:root {

  /* =========================
     BASE COLOR SYSTEM
  ========================= */

  --color-primary: rgb(241, 165, 19);
  --color-secondary: rgb(0, 0, 0);
  --color-tertiary: rgb(255, 255, 255);

  /* Text colors (added) */
  --text-primary: rgb(241, 165, 19);
  --text-secondary: rgb(0, 0, 0);
  --text-inverse: rgb(255, 255, 255);

  /* =========================
     SEMANTIC COLORS
  ========================= */

  --bg-primary: linear-gradient(140deg,rgba(241, 165, 19, 1) 18%, rgba(196, 129, 20, 1) 87%);
  --bg-secondary: radial-gradient(circle,rgba(23, 23, 23, 1) 18%, rgba(14, 13, 13, 1) 53%, rgba(33, 30, 30, 1) 87%);
  --bg-tertiary: rgb(255, 255, 255);
  --bg-tertiary-secondary:  linear-gradient(148deg, rgba(209, 207, 207, 1) 18%, rgba(255, 255, 255, 1) 87%);

  /* =========================
     BORDERS (fixed)
  ========================= */

  --border-primary: var(--color-primary);
  --border-secondary: var(--color-secondary);
  --border-tertiary: var(--color-tertiary);

  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-heading: "PT Sans Narrow", Georgia, serif;
  --font-body: "Alegreya Sans", Arial, sans-serif;
  --font-cta: "Lato", Arial, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 3rem;
  --font-size-display: clamp(2.5rem, 5vw, 4rem);

  --font-light: 300;
  --font-regular: 400;
  --font-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;   /* ← now defined */
  --line-height-loose: 1.8;

  /* =========================
     SPACING
  ========================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* =========================
     CTA SYSTEM
  ========================= */

  --cta-padding-y-sm: 8px;
  --cta-padding-y-md: 12px;
  --cta-padding-y-lg: 16px;
  --cta-padding-x-sm: 16px;
  --cta-padding-x-md: 24px;
  --cta-padding-x-lg: 32px;
  --cta-padding-y: var(--cta-padding-y-md);
  --cta-padding-x: var(--cta-padding-x-md);

  --cta-bg-primary: var(--bg-primary);     
  --cta-bg-secondary: var(--bg-secondary);
  --cta-bg-tertiary: var(--bg-tertiary);

  --cta-radius-sm: 4px;
  --cta-radius-md: 8px;
  --cta-radius-lg: 999px;

  /* =========================
     BORDER RADIUS
  ========================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* =========================
     SHADOWS
  ========================= */

  --shadow-sm: 0 2px 6px rgba(25, 85, 180, 0.1);
  --shadow-md: 0 4px 12px rgba(25, 85, 180, 0.15);
  --shadow-lg: 0 8px 24px rgba(200, 40, 40, 0.2);

  /* =========================
     TRANSITIONS
  ========================= */

  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;






  
  
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-primary) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 1px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}



/* =========================
   RESET & BODY
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  line-height: var(--line-height-normal);   
  color: var(--text-secondary);               
  background: var(--bg-tertiary);           
}




/* =========================================================
   STICKY SITE NAVIGATION
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  background: var(--bg-tertiary);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow: var(--shadow-sm);

  isolation: isolate;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-nav {
  width: 100%;

  background: var(--bg-tertiary);
}


/* =========================================================
   NAVIGATION CONTAINER
========================================================= */

.site-nav__container {
  position: relative;

  width: min(100% - 48px, 1400px);

  min-height: 84px;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: var(--space-lg);
}


/* =========================================================
   BRAND
========================================================= */

.site-nav__brand {
  justify-self: start;

  display: inline-flex;
  align-items: center;

  min-width: 0;

  color: inherit;

  text-decoration: none;

  border-radius: var(--radius-sm);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}


.site-nav__brand:hover {
  opacity: 0.9;
}


.site-nav__brand:active {
  transform: translateY(1px);
}


.site-nav__logo {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  max-height: 62px;

  object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION LINKS
========================================================= */

.site-nav__links {
  justify-self: center;

  display: flex;
  align-items: center;

  gap: clamp(
    var(--space-lg),
    3vw,
    var(--space-xl)
  );
}


.site-nav__link {
  position: relative;

  display: inline-flex;
  align-items: center;

  min-height: 44px;

  color: var(--text-secondary);

  font-family: var(--font-cta);

  font-size: var(--font-size-md);

  font-weight: var(--font-bold);

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color var(--transition-fast);
}


/* Animated underline */

.site-nav__link::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 5px;

  width: 100%;
  height: 2px;

  background: var(--color-primary);

  transform:
    scaleX(0);

  transform-origin: center;

  transition:
    transform var(--transition-fast);
}


.site-nav__link:hover {
  color: var(--color-primary);
}


.site-nav__link:hover::after,
.site-nav__link--active::after {
  transform: scaleX(1);
}


.site-nav__link--active {
  color: var(--color-primary);
}


/* =========================================================
   CONTACT ACTIONS
========================================================= */

.site-nav__actions {
  justify-self: end;

  display: flex;
  align-items: stretch;

  min-width: 0;

  background: var(--bg-tertiary);

  border:
    1px solid
    rgba(0, 0, 0, 0.12);

  border-radius: var(--radius-md);

  overflow: hidden;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.site-nav__contact-link {
  position: relative;

  min-height: 58px;

  display: flex;
  align-items: center;

  gap: var(--space-sm);

  padding:
    var(--space-sm)
    var(--space-lg);

  color: var(--text-secondary);

  background: transparent;

  text-decoration: none;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.site-nav__contact-link + .site-nav__contact-link {
  border-inline-start:
    1px solid
    rgba(0, 0, 0, 0.12);
}


.site-nav__contact-link:hover {
  color: var(--text-secondary);

  background: var(--bg-tertiary-secondary);
}


.site-nav__contact-link--call:hover {
  background: var(--color-primary);
}


.site-nav__contact-link--whatsapp:hover {
  background: var(--color-primary);
}


/* =========================================================
   CONTACT ICON
========================================================= */

.site-nav__icon {
  flex: 0 0 22px;

  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.site-nav__icon img {
  display: block;

  width: 22px;
  height: 22px;

  object-fit: contain;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.site-nav__contact-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.site-nav__contact-label {
  color: var(--color-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-xs);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  white-space: nowrap;
}



.site-nav__contact-number {
  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size: var(--font-size-md);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  white-space: nowrap;
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.site-nav__menu-toggle {
  display: none;

  width: 48px;
  height: 48px;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-secondary);

  background: var(--bg-tertiary);

  border:
    1px solid
    rgba(0, 0, 0, 0.14);

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}


.site-nav__menu-toggle:hover {
  background: var(--color-primary);

  border-color: var(--color-primary);
}



/* =========================================================
   HAMBURGER ICON
========================================================= */

.site-nav__hamburger-icon {
  display: block;

  width: 32px;
  height: 32px;

  object-fit: contain;

  pointer-events: none;
}

/* =========================================================
   MOBILE DRAWER
========================================================= */

.mobile-nav {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 1100;

  width: min(430px, 92vw);

  height: 100dvh;

  visibility: hidden;

  pointer-events: none;

  transform: translateX(100%);

  transition:
    transform var(--transition-normal),
    visibility var(--transition-normal);
}


/* =========================================================
   OPEN DRAWER
========================================================= */

.mobile-nav.is-open {
  visibility: visible;

  pointer-events: auto;

  transform: translateX(0);
}


/* =========================================================
   DRAWER PANEL
========================================================= */

.mobile-nav__panel {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  padding:
    24px
    clamp(24px, 6vw, 40px);

  overflow-y: auto;

  overscroll-behavior: contain;

  background: var(--bg-tertiary);

  box-shadow:
    -12px 0 40px
    rgba(0, 0, 0, 0.16);
}


/* =========================================================
   DRAWER HEADER
========================================================= */

.mobile-nav__header {
  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 32px;
}


.mobile-nav__label {
  color: var(--color-primary);

  font-family: var(--font-cta);

  font-size: var(--font-size-sm);

  font-weight: var(--font-bold);

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.mobile-nav__close {
  width: 46px;
  height: 46px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  background: var(--bg-tertiary);

  border:
    1px solid
    rgba(0, 0, 0, 0.14);

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}


.mobile-nav__close:hover {
  background: var(--color-primary);

  border-color: var(--color-primary);
}


/* =========================================================
   CLOSE ICON
========================================================= */

.mobile-nav__close-icon {
  position: relative;

  width: 22px;
  height: 22px;

  display: block;
}


.mobile-nav__close-icon span {
  position: absolute;

  top: 10px;
  left: 0;

  width: 22px;
  height: 2px;

  background: var(--text-secondary);
}


.mobile-nav__close-icon span:first-child {
  transform: rotate(45deg);
}


.mobile-nav__close-icon span:last-child {
  transform: rotate(-45deg);
}


/* =========================================================
   MOBILE LINKS
========================================================= */

.mobile-nav__links {
  display: flex;

  flex-direction: column;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.1);
}


.mobile-nav__link {
  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-md);

  color: var(--text-secondary);

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.1);

  font-family: var(--font-heading);

  font-size: clamp(
    1.5rem,
    4vw,
    2rem
  );

  font-weight: var(--font-bold);

  text-decoration: none;

  transition:
    color var(--transition-fast),
    padding-left var(--transition-fast);
}


.mobile-nav__link > span:last-child {
  color: rgba(0, 0, 0, 0.35);

  font-family: var(--font-cta);

  font-size: var(--font-size-xs);

  letter-spacing: 0.08em;
}


.mobile-nav__link:hover {
  padding-left: 8px;

  color: var(--color-primary);
}


.mobile-nav__link--active {
  color: var(--color-primary);
}


.mobile-nav__link--active > span:last-child {
  color: var(--color-primary);
}


/* =========================================================
   MOBILE IMAGE
========================================================= */

.mobile-nav__image {
  position: relative;

  width: 100%;

  margin-top: 22px;

  overflow: hidden;

  border-radius: var(--radius-sm);

  aspect-ratio: 16 / 8;
}


.mobile-nav__image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.12),
      transparent
    );

  pointer-events: none;
}


.mobile-nav__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.mobile-nav__social {
  margin-top: 32px;

  padding-top: 24px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.1);
}


.mobile-nav__social-title {
  margin: 0 0 var(--space-md);

  color: var(--color-primary);

  font-family: var(--font-cta);

  font-size: var(--font-size-xs);

  font-weight: var(--font-bold);

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.mobile-nav__social-links {
  display: flex;

  flex-wrap: wrap;

  gap: var(--space-sm);
}


.mobile-nav__social-link {
  min-height: 44px;

  display: inline-flex;

  align-items: center;

  gap: var(--space-sm);

  padding:
    var(--space-sm)
    var(--space-md);

  color: var(--text-secondary);

  background: var(--bg-tertiary);

  border:
    1px solid
    rgba(0, 0, 0, 0.12);

  border-radius: var(--radius-sm);

  font-family: var(--font-cta);

  font-size: var(--font-size-sm);

  font-weight: var(--font-bold);

  text-decoration: none;

  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}


.mobile-nav__social-link:hover {
  color: var(--text-secondary);

  background: var(--color-primary);

  border-color: var(--color-primary);
}


.mobile-nav__social-link img {
  display: block;

  width: 20px;
  height: 20px;

  object-fit: contain;
}


/* =========================================================
   BACKDROP
========================================================= */

.mobile-nav__backdrop {
  position: fixed;

  inset: 0;

  z-index: 1050;

  background:
    rgba(0, 0, 0, 0.48);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}


.mobile-nav__backdrop.is-visible {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


/* =========================================================
   FOCUS STATES
========================================================= */

.site-nav__brand:focus-visible,
.site-nav__link:focus-visible,
.site-nav__contact-link:focus-visible,
.site-nav__menu-toggle:focus-visible,
.mobile-nav__close:focus-visible,
.mobile-nav__link:focus-visible,
.mobile-nav__social-link:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset: 3px;
}


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

@media (max-width: 1050px) {

  .site-nav__container {
    width: min(100% - 32px, 1400px);

    min-height: 76px;

    grid-template-columns:
      auto
      1fr
      auto;

    gap: var(--space-md);
  }


  .site-nav__links {
    gap: var(--space-lg);
  }


  .site-nav__contact-link {
    padding-inline: var(--space-md);
  }


  .site-nav__contact-label {
    font-size: var(--font-size-xs);
  }


  .site-nav__contact-number {
    font-size: var(--font-size-xs);
  }

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 800px) {

  .site-nav__container {
    width: min(100% - 24px, 1400px);

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-sm);
  }


  /* Hide desktop links */

  .site-nav__links {
    display: none;
  }


  /* Contact stays visible */

  .site-nav__actions {
    margin-left: auto;
  }


  .site-nav__contact-link {
    width: 48px;
    min-width: 48px;

    min-height: 48px;

    justify-content: center;

    padding: var(--space-sm);

    gap: 0;
  }


  .site-nav__contact-content {
    display: none;
  }


  .site-nav__icon,
  .site-nav__icon img {
    width: 22px;
    height: 22px;
  }


  /* Hamburger */

  .site-nav__menu-toggle {
    display: inline-flex;

    flex: 0 0 48px;
  }


  .site-nav__logo {
    max-width: 175px;

    max-height: 50px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

  .site-nav__container {
    width: min(100% - 16px, 1400px);

    min-height: 64px;
  }


  .site-nav__logo {
    max-width: 145px;

    max-height: 44px;
  }


  .site-nav__contact {
    border-radius: var(--radius-sm);
  }


  .site-nav__contact-link {
    width: 44px;
    min-width: 44px;

    height: 44px;
    min-height: 44px;
  }


  .site-nav__menu-toggle {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }


  .site-nav__icon,
  .site-nav__icon img {
    width: 20px;
    height: 20px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 350px) {

  .site-nav__logo {
    max-width: 125px;
  }


  .site-nav__contact-link {
    width: 42px;
    min-width: 42px;
  }


  .site-nav__menu-toggle {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-nav__brand,
  .site-nav__link,
  .site-nav__contact-link,
  .site-nav__menu-toggle,
  .mobile-nav,
  .mobile-nav__backdrop,
  .mobile-nav__link,
  .mobile-nav__close,
  .mobile-nav__social-link,
  .site-nav__hamburger span {
    transition: none;
  }

}


/* =========================================================
   HERO SECTION
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */


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

.hero {
  position: relative;

  width: 100%;

  padding-inline: var(--space-md);
  padding-block: var(--space-md);

  background: var(--bg-tertiary);

  overflow: hidden;
}


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

.hero__container {
  position: relative;

  width: min(100%, 1440px);

  min-height: clamp(560px, 78vh, 820px);

  margin-inline: auto;

  overflow: hidden;

  border-radius: 10px;

  isolation: isolate;

  background: var(--color-secondary);
}


/* =========================================================
   VIDEO
========================================================= */

.hero__media {
  position: absolute;

  inset: 0;

  z-index: -2;

  overflow: hidden;
}


.hero__video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
}


/* =========================================================
   GRADIENT OVERLAY
========================================================= */

.hero__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.12) 34%,
      rgba(0, 0, 0, 0.42) 62%,
      rgba(0, 0, 0, 0.20) 100%
    );

  pointer-events: none;
}


/* =========================================================
   CAROUSEL
========================================================= */

.hero__carousel {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: inherit;

  display: flex;
  align-items: center;

  overflow: hidden;
}


/* =========================================================
   SLIDES
========================================================= */

.hero__slide {
  position: absolute;

  inset: 0;

  width: 100%;
  min-height: 100%;

  display: flex;
  align-items: center;

  padding:
    clamp(48px, 7vw, 96px)
    clamp(24px, 8vw, 120px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform: translateX(24px);

  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    visibility var(--transition-slow);
}


.hero__slide--active {
  position: relative;

  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform: translateX(0);

  z-index: 2;
}


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

.hero__content {
  width: min(100%, 720px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero__eyebrow {
  margin: 0 0 var(--space-md);

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);
  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.hero__title {
  max-width: 760px;

  margin: 0;

  color: var(--text-inverse);

  font-family: var(--font-heading);

  font-size: clamp(2.5rem, 5.5vw, 5rem);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  letter-spacing: -0.02em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero__description {
  max-width: 680px;

  margin:
    var(--space-lg)
    0
    var(--space-xl);

  color: rgba(255, 255, 255, 0.92);

  font-family: var(--font-body);

  font-size: clamp(
    var(--font-size-md),
    1.5vw,
    var(--font-size-lg)
  );

  font-weight: var(--font-regular);

  line-height: var(--line-height-loose);
}


/* =========================================================
   CTA
========================================================= */

.hero__cta {
  min-width: 150px;
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-sm);

  padding:
    var(--cta-padding-y-md)
    var(--cta-padding-x-lg);

  color: var(--text-secondary);

  background: var(--bg-primary);

  border:
    1px solid
    var(--color-primary);

  border-radius: var(--cta-radius-sm);

  font-family: var(--font-cta);

  font-size: var(--font-size-md);
  font-weight: var(--font-bold);

  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}


.hero__cta:hover {
  color: var(--text-secondary);

  transform: translateY(-2px);

  box-shadow:
    0 6px 18px
    rgba(0, 0, 0, 0.25);
}


.hero__cta:active {
  transform: translateY(0);
}


/* =========================================================
   CTA ICON
========================================================= */

.hero__cta-icon {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 20px;
}


.hero__cta-icon img {
  display: block;

  width: 20px;
  height: 20px;

  object-fit: contain;
}


/* =========================================================
   FOCUS STATES
========================================================= */

.hero__cta:focus-visible,
.hero__control:focus-visible {
  outline: 3px solid var(--color-primary);

  outline-offset: 4px;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.hero__controls {
  position: absolute;

  right: clamp(24px, 8vw, 120px);
  bottom: clamp(24px, 5vw, 56px);

  z-index: 10;

  display: flex;
  align-items: center;

  gap: var(--space-sm);
}


.hero__control {
  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-inverse);

  background: none;

  border: 1px solid rgba(255, 255, 255, 0.45);

  border-radius: var(--radius-sm);

  font-family: var(--font-cta);

  font-size: var(--font-size-xs);
  font-weight: var(--font-bold);

  cursor: pointer;

  backdrop-filter: blur(4px);

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}


.hero__control:hover {
  color: var(--text-secondary);

  background: var(--color-primary);

  border-color: var(--color-primary);
}


.hero__control--active {
  color: var(--text-secondary);

  background: var(--color-primary);

  border-color: var(--color-primary);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .hero {
    padding-inline: var(--space-sm);
  }


  .hero__container {
    min-height: 650px;
  }


  .hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.68) 48%,
        rgba(0, 0, 0, 0.35) 100%
      );
  }


  .hero__slide {
    padding-inline: clamp(32px, 7vw, 72px);
  }


  .hero__content {
    width: min(100%, 650px);
  }


  .hero__title {
    font-size: clamp(2.5rem, 7vw, 4.25rem);
  }


  .hero__controls {
    left: clamp(32px, 7vw, 72px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .hero {
    padding: var(--space-sm);
  }


  .hero__container {
    min-height: 650px;

    border-radius: 5px;
  }


  .hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(0, 0, 0, 0.78) 48%,
        rgba(0, 0, 0, 0.94) 100%
      );
  }


  .hero__slide {
    align-items: flex-end;

    padding:
      40px
      24px
      100px;
  }


  .hero__content {
    width: 100%;
  }


  .hero__eyebrow {
    margin-bottom: var(--space-sm);

    font-size: var(--font-size-xs);
  }


  .hero__title {
    font-size: clamp(2.35rem, 11vw, 3.5rem);

    line-height: 1.08;
  }


  .hero__description {
    margin:
      var(--space-md)
      0
      var(--space-lg);

    font-size: var(--font-size-md);

    line-height: 1.65;
  }


  .hero__cta {
    min-height: 48px;

    padding-inline: var(--cta-padding-x-md);
  }


  .hero__controls {
    left: 24px;
    bottom: 32px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .hero__container {
    min-height: 620px;
  }


  .hero__slide {
    padding:
      32px
      20px
      92px;
  }


  .hero__title {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }


  .hero__description {
    font-size: var(--font-size-sm);
  }


  .hero__controls {
    left: 20px;
    bottom: 24px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hero__slide,
  .hero__cta,
  .hero__control {
    transition: none;
  }

}





/* =========================================================
   CAPABILITIES & TRACK RECORD
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.capabilities {
  width: 100%;
  padding-block: clamp(42px, 9vw, 60px);

  background: var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.capabilities__container {
  width: min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.capabilities__header {
  width: min(100%, 760px);

  margin-inline: auto;
  margin-bottom: clamp(48px, 7vw, 80px);

  text-align: center;
}


.capabilities__eyebrow {
  margin: 0 0 var(--space-sm);

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);
  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.capabilities__title {
  margin: 0;

  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size: clamp(2.2rem, 4vw, 3.5rem);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


.capabilities__intro {
  max-width: 680px;

  margin: var(--space-lg) auto 0;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-lg);

  line-height: var(--line-height-loose);
}


/* =========================================================
   CAPABILITY STATISTICS
========================================================= */

.capabilities__stats {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  border-top:
    1px solid rgba(0, 0, 0, 0.12);

  border-bottom:
    1px solid rgba(0, 0, 0, 0.12);
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.capability-stat {
  position: relative;

  min-width: 0;

  padding:
    clamp(32px, 4vw, 52px)
    clamp(18px, 3vw, 40px);

  text-align: center;
}


.capability-stat + .capability-stat {
  border-inline-start:
    1px solid rgba(0, 0, 0, 0.12);
}


/* =========================================================
   STAT NUMBER
========================================================= */

.capability-stat__number {
  display: flex;

  align-items: baseline;
  justify-content: center;

  margin-bottom: var(--space-sm);

  color: var(--color-primary);

  font-family: var(--font-heading);

  font-size: clamp(3rem, 5vw, 5rem);

  font-weight: 800;

  line-height: 0.95;

  font-variant-numeric: tabular-nums;

  overflow: hidden;
}


/* =========================================================
   COUNTER VALUE
========================================================= */

.capability-stat__value {
  display: inline-block;

  /*
   * Initial state:
   * The number sits below its final position
   * and is invisible.
   */
  opacity: 0;

  transform: translateY(100%);

  /*
   * Only the number itself rises.
   */
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;

  will-change: transform, opacity;
}


/*
 * JavaScript adds this class once the counter
 * enters the viewport.
 */
.capability-stat__value--visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   STAT SUFFIX
========================================================= */

.capability-stat__suffix {
  font-size: 0.55em;

  line-height: 1;
}


/* =========================================================
   STAT TITLE
========================================================= */

.capability-stat__title {
  margin: 0;

  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size: var(--font-size-xl);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


/* =========================================================
   STAT DESCRIPTION
========================================================= */

.capability-stat__description {
  max-width: 250px;

  margin:
    var(--space-md)
    auto
    0;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  line-height: var(--line-height-normal);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .capabilities__stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .capability-stat:nth-child(3) {
    border-inline-start: 0;

    border-top:
      1px solid rgba(0, 0, 0, 0.12);
  }


  .capability-stat:nth-child(4) {
    border-top:
      1px solid rgba(0, 0, 0, 0.12);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .capabilities {
    padding-block: 72px;
  }


  .capabilities__container {
    width: min(100% - 32px, 1380px);
  }


  .capabilities__intro {
    font-size: var(--font-size-md);
  }


  .capabilities__stats {
    grid-template-columns: 1fr;
  }


  .capability-stat,
  .capability-stat:nth-child(3),
  .capability-stat:nth-child(4) {
    border-inline-start: 0;

    border-top:
      1px solid rgba(0, 0, 0, 0.12);
  }


  .capability-stat:first-child {
    border-top: 0;
  }


  .capability-stat {
    padding-block: 20px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .capabilities__container {
    width: min(100% - 24px, 1380px);
  }


  .capability-stat__number {
    font-size: 3.5rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .capability-stat__value {
    opacity: 1;

    transform: none;

    transition: none;
  }

}







/* =========================================================
   SERVICES & SOLUTIONS
========================================================= */

.solutions {
  width: 100%;

  padding-block:
    clamp(70px, 9vw, 120px);

  background: var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.solutions__container {
  width: min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.solutions__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap: clamp(40px, 7vw, 110px);

  align-items: end;

  margin-bottom:
    clamp(50px, 7vw, 85px);
}


.solutions__heading {
  max-width: 700px;
}


.solutions__eyebrow {
  margin: 0 0 var(--space-sm);

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.solutions__title {
  max-width: 680px;

  margin: 0;

  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


.solutions__intro {
  max-width: 620px;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-lg);

  line-height: var(--line-height-loose);
}


.solutions__intro p {
  margin: 0;
}


/* =========================================================
   SOLUTIONS LIST
========================================================= */

.solutions__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(35px, 5vw, 70px)
    clamp(25px, 3vw, 50px);
}


/* =========================================================
   SOLUTION
========================================================= */

.solution {
  min-width: 0;

  border-top:
    1px solid rgba(0, 0, 0, 0.18);

  border-bottom:
    1px solid rgba(0, 0, 0, 0.18);
}


/* =========================================================
   MAIN SOLUTION AREA
========================================================= */

.solution__main {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  min-height: 320px;
}


/* =========================================================
   IMAGE
========================================================= */

.solution__image {
  min-width: 0;

  overflow: hidden;
}


.solution__image img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 320px;

  object-fit: cover;

  transition:
    transform 0.6s
    cubic-bezier(0.22, 1, 0.36, 1);
}


.solution:hover .solution__image img {
  transform: scale(1.04);
}


/* =========================================================
   CONTENT
========================================================= */

.solution__content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding:
    clamp(25px, 3vw, 42px);
}


.solution__number {
  margin: 0 0 var(--space-lg);

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  font-weight: var(--font-bold);

  letter-spacing: 0.1em;
}


.solution__title {
  margin: 0;

  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size:
    clamp(1.45rem, 2vw, 2rem);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


.solution__description {
  margin:
    var(--space-md)
    0
    0;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  line-height: var(--line-height-loose);
}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.solution__toggle {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: auto;
  padding: 18px 0 0;

  border: 0;

  background: transparent;

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  font-weight: var(--font-bold);

  line-height: 1;

  cursor: pointer;

  transition:
    color 0.25s ease;
}


.solution__toggle:hover {
  color: var(--text-secondary);
}


.solution__toggle:focus-visible {
  outline:
    2px solid var(--color-primary);

  outline-offset: 5px;
}


/* =========================================================
   TOGGLE ICON
========================================================= */

.solution__toggle-icon {
  width: 18px;
  height: 18px;

  flex-shrink: 0;

  transition:
    transform 0.35s
    cubic-bezier(0.22, 1, 0.36, 1);
}


.solution.is-open
.solution__toggle-icon {
  transform: rotate(180deg);
}


/* =========================================================
   EXPANDED DETAILS
========================================================= */

.solution__details {
  display: grid;

  grid-template-rows: 0fr;

  overflow: hidden;

  transition:
    grid-template-rows 0.45s
    cubic-bezier(0.22, 1, 0.36, 1);
}


.solution__details-grid {
  min-height: 0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 30px;

  padding-inline:
    clamp(25px, 3vw, 42px);

  opacity: 0;

  transition:
    opacity 0.25s ease;
}


.solution.is-open
.solution__details {
  grid-template-rows: 1fr;
}


.solution.is-open
.solution__details-grid {
  padding-block:
    30px
    40px;

  opacity: 1;
}


/* =========================================================
   DETAIL COLUMN
========================================================= */

.solution__detail-column {
  min-width: 0;
}


.solution__detail-column h4 {
  margin: 0 0 var(--space-md);

  color: var(--text-secondary);

  font-family: var(--font-heading);

  font-size: var(--font-size-lg);

  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


.solution__detail-column ul {
  display: grid;

  gap: 10px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.solution__detail-column li {
  position: relative;

  padding-left: 18px;

  color: var(--text-secondary);

  font-family: var(--font-body);

  font-size: var(--font-size-sm);

  line-height: var(--line-height-normal);
}


.solution__detail-column li::before {
  content: "";

  position: absolute;

  top: 0.65em;
  left: 0;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--color-primary);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .solutions__header {
    grid-template-columns: 1fr;

    gap: 20px;

    align-items: start;
  }


  .solutions__intro {
    max-width: 760px;
  }

}


/* =========================================================
   SMALLER DEVICES
========================================================= */

@media (max-width: 760px) {

  .solutions__container {
    width:
      min(100% - 32px, 1380px);
  }


  .solutions__list {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  .solution__main {
    grid-template-columns: 1fr;

    min-height: 0;
  }


  .solution__image img {
    height: auto;

    min-height: 0;

    aspect-ratio: 16 / 10;
  }


  .solution__content {
    min-height: 280px;

    padding:
      28px
      0;
  }


  .solution__details-grid {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-inline: 0;
  }


  .solution.is-open
  .solution__details-grid {
    padding-block:
      10px
      35px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 500px) {

  .solutions {
    padding-block: 72px;
  }


  .solutions__container {
    width:
      min(100% - 24px, 1380px);
  }


  .solutions__title {
    font-size: 2.1rem;
  }


  .solution__content {
    min-height: 260px;

    padding:
      25px
      0;
  }


  .solution__number {
    margin-bottom:
      var(--space-md);
  }


  .solution__toggle {
    padding-top: 22px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .solution__image img,
  .solution__toggle-icon,
  .solution__details {
    transition: none;
  }

}








/* =========================================================
   SOLUTIONS CONTACT CTA
========================================================= */

.solutions-cta {
  width: 100%;

  padding-block:
    clamp(35px, 7vw, 55px);

  background:
    var(--bg-primary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.solutions-cta__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   HEADING
========================================================= */

.solutions-cta__title {
  max-width: 850px;

  margin: 0 auto;

  color: var(--color-tertiary);

  font-family: var(--font-heading);

  font-size:
    clamp(2rem, 4vw, 3.5rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  text-align: center;
}


/* =========================================================
   CONTACT OPTIONS
========================================================= */

.solutions-cta__contacts {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  max-width: 900px;

  margin:
    clamp(40px, 5vw, 60px)
    auto
    0;

  border-top:
    1px solid rgba(255, 255, 255, 0.35);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.35);
}


/* =========================================================
   CONTACT LINK
========================================================= */

.solutions-cta__contact {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-width: 0;

  padding:
    clamp(24px, 3vw, 35px);

  color: var(--color-tertiary);

  text-decoration: none;

  transition:
    background-color 0.3s ease;
}


/* =========================================================
   SECOND CONTACT BORDER
========================================================= */

.solutions-cta__contact
+ .solutions-cta__contact {
  border-inline-start:
    1px solid rgba(255, 255, 255, 0.35);
}


/* =========================================================
   ICON
========================================================= */

.solutions-cta__icon {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  flex-shrink: 0;

  border:
    1px solid rgba(255, 255, 255, 0.6);

  border-radius: 50%;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}


.solutions-cta__icon img {
  display: block;

  width: 28px;
  height: 28px;

  object-fit: contain;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.solutions-cta__contact-content {
  display: flex;

  flex-direction: column;

  gap: 5px;

  min-width: 0;
}


.solutions-cta__label {
  color:
    rgba(255, 255, 255, 0.8);

  font-family: var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.solutions-cta__number {
  color:
    var(--color-tertiary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.15rem, 2vw, 1.65rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  white-space:
    nowrap;
}


/* =========================================================
   HOVER
========================================================= */

.solutions-cta__contact:hover {
  background:
    rgba(255, 255, 255, 0.08);
}


.solutions-cta__contact:hover
.solutions-cta__icon {
  transform:
    translateY(-3px);

  background:
    rgba(255, 255, 255, 0.1);
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.solutions-cta__contact:focus-visible {
  outline:
    3px solid var(--color-tertiary);

  outline-offset:
    -3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .solutions-cta {
    padding-block:
      65px;
  }


  .solutions-cta__container {
    width:
      min(100% - 32px, 1380px);
  }


  .solutions-cta__title {
    max-width: 600px;
  }


  .solutions-cta__contacts {
    grid-template-columns: 1fr;

    margin-top: 40px;
  }


  .solutions-cta__contact
  + .solutions-cta__contact {
    border-inline-start: 0;

    border-top:
      1px solid rgba(255, 255, 255, 0.35);
  }

}


@media (max-width: 420px) {

  .solutions-cta__container {
    width:
      min(100% - 24px, 1380px);
  }


  .solutions-cta__contact {
    justify-content: flex-start;

    padding-inline: 10px;
  }


  .solutions-cta__icon {
    width: 52px;
    height: 52px;
  }


  .solutions-cta__icon img {
    width: 25px;
    height: 25px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .solutions-cta__contact,
  .solutions-cta__icon {
    transition: none;
  }

}






/* =========================================================
   INDUSTRIES WE SERVE
========================================================= */

.industries {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.industries__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.industries__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap:
    clamp(40px, 7vw, 110px);

  align-items: end;

  margin-bottom:
    clamp(50px, 7vw, 85px);
}


.industries__heading {
  max-width: 700px;
}


.industries__eyebrow {
  margin: 0 0 var(--space-sm);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.industries__title {
  max-width: 680px;

  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


.industries__intro {
  max-width: 620px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-loose);
}


.industries__intro p {
  margin: 0;
}


/* =========================================================
   INDUSTRY LIST
========================================================= */

.industries__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(35px, 6vw, 90px);

  border-top:
    1px solid rgba(0, 0, 0, 0.16);
}


/* =========================================================
   INDUSTRY
========================================================= */

.industry {
  display: grid;

  grid-template-columns:
    68px minmax(0, 1fr);

  gap: 25px;

  align-items: start;

  padding-block:
    clamp(28px, 3vw, 42px);

  border-bottom:
    1px solid rgba(0, 0, 0, 0.16);
}


/* =========================================================
   ICON
========================================================= */

.industry__icon {
  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  border:
    1px solid
    rgba(0, 0, 0, 0.18);

  border-radius: 50%;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.industry__icon img {
  display: block;

  width: 32px;
  height: 32px;

  object-fit: contain;
}


/* =========================================================
   INDUSTRY CONTENT
========================================================= */

.industry__content {
  min-width: 0;
}


.industry__title {
  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.35rem, 2vw, 1.8rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


.industry__description {
  max-width: 560px;

  margin:
    var(--space-md)
    0
    0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  line-height:
    var(--line-height-loose);
}


/* =========================================================
   HOVER
========================================================= */

.industry:hover
.industry__icon {
  background:
    var(--color-primary);

  border-color:
    var(--color-primary);

  transform:
    translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .industries__header {
    grid-template-columns: 1fr;

    gap: 20px;

    align-items: start;
  }


  .industries__intro {
    max-width: 760px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .industries__container {
    width:
      min(100% - 32px, 1380px);
  }


  .industries__list {
    grid-template-columns: 1fr;

    column-gap: 0;
  }


  .industry {
    grid-template-columns:
      58px minmax(0, 1fr);

    gap: 20px;
  }


  .industry__icon {
    width: 50px;
    height: 50px;
  }


  .industry__icon img {
    width: 28px;
    height: 28px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

  .industries {
    padding-block: 72px;
  }


  .industries__container {
    width:
      min(100% - 24px, 1380px);
  }


  .industries__title {
    font-size: 2.1rem;
  }


  .industry {
    grid-template-columns: 1fr;

    gap: 18px;

    padding-block: 30px;
  }


  .industry__icon {
    width: 52px;
    height: 52px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .industry__icon {
    transition: none;
  }

}



/* =========================================================
   OUR WORK
   FACEBOOK VIDEO SHOWCASE
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.work-showcase {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.work-showcase__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.work-showcase__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap:
    clamp(40px, 7vw, 110px);

  align-items: end;

  margin-bottom:
    clamp(45px, 6vw, 75px);
}


/* =========================================================
   HEADER HEADING
========================================================= */

.work-showcase__heading {
  max-width: 700px;
}


/* =========================================================
   EYEBROW
========================================================= */

.work-showcase__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.work-showcase__title {
  max-width: 680px;

  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.work-showcase__intro {
  max-width: 620px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-loose);
}


.work-showcase__intro p {
  margin: 0;
}


/* =========================================================
   CAROUSEL
========================================================= */

.work-showcase__carousel {
  position: relative;

  width: 100%;
}


/* =========================================================
   ACCESSIBILITY STATUS
   Visually hidden but available to screen readers.
========================================================= */

.work-showcase__status {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* =========================================================
   CAROUSEL TRACK
========================================================= */

.work-showcase__track {
  display: flex;

  width: 100%;

  overflow-x: auto;

  /*
   * Native horizontal scrolling gives us
   * reliable touch and trackpad behavior.
   */
  scroll-snap-type:
    x mandatory;

  scroll-behavior:
    smooth;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    none;

  cursor:
    grab;

  /*
   * Allows normal vertical page scrolling
   * while preserving horizontal swipe behavior.
   */
  touch-action:
    pan-y;
}


/* =========================================================
   HIDE WEBKIT SCROLLBAR
========================================================= */

.work-showcase__track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   ACTIVE DRAG STATE
========================================================= */

.work-showcase__track:active {
  cursor:
    grabbing;
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.work-showcase__track:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    5px;
}


/* =========================================================
   VIDEO SLIDE
   3 COLUMNS ON LARGE DESKTOP
========================================================= */

.work-showcase__slide {
  flex:
    0 0
    calc(
      (100% - 40px) / 3
    );

  min-width:
    0;

  margin-right:
    20px;

  scroll-snap-align:
    start;

  scroll-snap-stop:
    always;
}


/* =========================================================
   LAST SLIDE
========================================================= */

.work-showcase__slide:last-child {
  margin-right:
    0;
}


/* =========================================================
   MEDIA FIGURE
========================================================= */

.work-showcase__media {
  width: 100%;

  margin: 0;
}


/* =========================================================
   VIDEO EMBED CONTAINER
========================================================= */

.work-showcase__embed {
  position: relative;

  width: 100%;

  /*
   * Maintains a consistent video ratio.
   */
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background:
    #111;
}


/* =========================================================
   VIDEO SHOWCASE
========================================================= */

/* =========================================================
   LOCAL VIDEO
========================================================= */

.work-showcase__embed video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  object-fit: cover;

  background: #111;
}

/* =========================================================
   VIDEO CAPTION
========================================================= */

.work-showcase__caption {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1fr);

  gap:
    25px;

  padding-top:
    24px;
}


/* =========================================================
   VIDEO TITLE
========================================================= */

.work-showcase__caption h3 {
  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.25rem, 2vw, 1.7rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   VIDEO DESCRIPTION
========================================================= */

.work-showcase__caption p {
  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  line-height:
    var(--line-height-loose);
}


/* =========================================================
   NAVIGATION CONTAINER
   Always positioned below the videos.
========================================================= */

.work-showcase__navigation {
  display: flex;

  justify-content:
    flex-end;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    30px;
}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.work-showcase__nav {
  display: grid;

  place-items: center;

  width:
    50px;

  height:
    50px;

  padding: 0;

  border:
    1px solid
    rgba(0, 0, 0, 0.25);

  border-radius:
    50%;

  background:
    transparent;

  color:
    var(--text-secondary);

  cursor:
    pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   NAVIGATION ICON
========================================================= */

.work-showcase__nav svg {
  display:
    block;

  width:
    20px;

  height:
    20px;
}


/* =========================================================
   NAVIGATION HOVER
========================================================= */

.work-showcase__nav:hover {
  background:
    var(--color-primary);

  border-color:
    var(--color-primary);

  color:
    var(--color-tertiary);

  transform:
    translateY(-2px);
}


/* =========================================================
   NAVIGATION FOCUS
========================================================= */

.work-showcase__nav:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    4px;
}


/* =========================================================
   DISABLED NAVIGATION
========================================================= */

.work-showcase__nav:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;

  transform:
    none;
}


/* =========================================================
   TABLET / SMALLER DESKTOP
   TWO COLUMNS
========================================================= */

@media (max-width: 1000px) {

  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .work-showcase__header {
    grid-template-columns:
      1fr;

    gap:
      20px;

    align-items:
      start;
  }


  .work-showcase__intro {
    max-width:
      760px;
  }


  /* -------------------------------------------------------
     TWO VIDEO COLUMNS
  ------------------------------------------------------- */

  .work-showcase__slide {
    flex:
      0 0
      calc(
        (100% - 20px) / 2
      );

    margin-right:
      20px;
  }

}


/* =========================================================
   MOBILE
   ONE COLUMN
========================================================= */

@media (max-width: 700px) {

  /* -------------------------------------------------------
     SECTION
  ------------------------------------------------------- */

  .work-showcase {
    padding-block:
      72px;
  }


  /* -------------------------------------------------------
     CONTAINER
  ------------------------------------------------------- */

  .work-showcase__container {
    width:
      min(100% - 32px, 1380px);
  }


  /* -------------------------------------------------------
     ONE VIDEO COLUMN
  ------------------------------------------------------- */

  .work-showcase__slide {
    flex:
      0 0
      100%;

    margin-right:
      16px;
  }


  /* -------------------------------------------------------
     CAPTION
  ------------------------------------------------------- */

  .work-showcase__caption {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  /* -------------------------------------------------------
     NAVIGATION
  ------------------------------------------------------- */

  .work-showcase__navigation {
    margin-top:
      25px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  /* -------------------------------------------------------
     CONTAINER
  ------------------------------------------------------- */

  .work-showcase__container {
    width:
      min(100% - 24px, 1380px);
  }


  /* -------------------------------------------------------
     NAVIGATION BUTTON
  ------------------------------------------------------- */

  .work-showcase__nav {
    width:
      46px;

    height:
      46px;
  }


  .work-showcase__nav svg {
    width:
      18px;

    height:
      18px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .work-showcase__track {
    scroll-behavior:
      auto;
  }


  .work-showcase__nav {
    transition:
      none;
  }

}










/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--bg-tertiary);

  overflow: visible;
}


/* =========================================================
   CONTAINER
========================================================= */

.faq-section__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline:
    auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 380px);

  gap:
    clamp(50px, 8vw, 120px);

  align-items:
    start;
}


/* =========================================================
   MAIN
========================================================= */

.faq-section__main {
  min-width: 0;
}


/* =========================================================
   HEADER
========================================================= */

.faq-section__header {
  max-width:
    780px;

  margin-bottom:
    clamp(45px, 6vw, 70px);
}


/* =========================================================
   EYEBROW
========================================================= */

.faq-section__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.faq-section__title {
  max-width:
    720px;

  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   INTRO
========================================================= */

.faq-section__intro {
  max-width:
    680px;

  margin:
    var(--space-lg) 0 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-loose);
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-section__list {
  width: 100%;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item {
  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   QUESTION HEADING
========================================================= */

.faq-item__question {
  margin: 0;
}


/* =========================================================
   TRIGGER
========================================================= */

.faq-item__trigger {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    34px;

  align-items: center;

  width: 100%;

  min-height:
    82px;

  padding:
    18px 0;

  border: 0;

  background:
    transparent;

  color:
    var(--text-secondary);

  text-align: left;

  cursor:
    pointer;

  font-family:
    var(--font-body);

  transition:
    color 0.25s ease;
}


/* =========================================================
   QUESTION NUMBER
========================================================= */

.faq-item__number {
  color:
    var(--color-primary);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    1;
}


/* =========================================================
   QUESTION TEXT
========================================================= */

.faq-item__question-text {
  padding-right:
    20px;

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.1rem, 2vw, 1.35rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   PLUS / X ICON
========================================================= */

.faq-item__icon {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    1.7rem;

  font-weight:
    400;

  line-height:
    1;

  transition:
    transform 0.25s ease;
}


/* =========================================================
   OPEN STATE
========================================================= */

.faq-item__trigger[aria-expanded="true"]
.faq-item__icon {
  transform:
    rotate(45deg);
}


/*
 * Rotating the + by 45 degrees visually produces an X.
 */


/* =========================================================
   HOVER
========================================================= */

.faq-item__trigger:hover {
  color:
    var(--color-primary);
}


/* =========================================================
   FOCUS
========================================================= */

.faq-item__trigger:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    4px;
}


/* =========================================================
   ANSWER
========================================================= */

.faq-item__answer {
  padding:
    0 48px 25px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  line-height:
    var(--line-height-loose);
}


.faq-item__answer > div {
  max-width:
    720px;
}


/* =========================================================
   ADDITIONAL FAQ
========================================================= */

.faq-section__additional[hidden] {
  display:
    none;
}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.faq-section__more {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  width:
    100%;

  min-height:
    64px;

  margin-top:
    24px;

  padding:
    15px 20px;

  border:
    1px solid
    rgba(0, 0, 0, 0.18);

  background:
    transparent;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  cursor:
    pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}


/* =========================================================
   READ MORE ICON
========================================================= */

.faq-section__more-icon {
  display:
    grid;

  place-items:
    center;

  width:
    25px;

  height:
    25px;

  font-size:
    1.5rem;

  line-height:
    1;

  transition:
    transform 0.25s ease;
}


.faq-section__more[aria-expanded="true"]
.faq-section__more-icon {
  transform:
    rotate(45deg);
}


/* =========================================================
   READ MORE HOVER
========================================================= */

.faq-section__more:hover {
  background:
    var(--color-primary);

  color:
    var(--color-tertiary);
}


/* =========================================================
   READ MORE FOCUS
========================================================= */

.faq-section__more:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    4px;
}


/* =========================================================
   STICKY ASIDE
========================================================= */

.faq-section__aside {
  position:
    sticky;

  

  top:
    60px;

  align-self:
    start;
}


/* =========================================================
   CONTACT BOX
========================================================= */

.faq-section__contact {
  padding:
    clamp(70px, 4vw, 50px);

  background:
    var(--color-primary);

  color:
    var(--color-tertiary);
}


/* =========================================================
   CONTACT EYEBROW
========================================================= */

.faq-section__contact-eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   CONTACT TITLE
========================================================= */

.faq-section__contact-title {
  margin:
    0 0
    40px;

  color:
    var(--color-tertiary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2rem, 3vw, 2.8rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.faq-section__contact-links {
  display:
    flex;

  flex-direction:
    column;

  gap:
    22px;
}


/* =========================================================
   CONTACT LINK
========================================================= */

.faq-section__contact-link {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  color:
    var(--color-tertiary);

  text-decoration:
    none;
}


/* =========================================================
   CONTACT ICON
========================================================= */

.faq-section__contact-icon {
  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(255, 255, 255, 0.4);

  border-radius:
    50%;
}


/* =========================================================
   ICON IMAGE
========================================================= */

.faq-section__contact-icon img {
  display:
    block;

  width:
    20px;

  height:
    20px;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.faq-section__contact-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.faq-section__contact-label {
  color:
    rgba(255, 255, 255, 0.65);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   CONTACT NUMBER
========================================================= */

.faq-section__contact-number {
  color:
    var(--color-tertiary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-normal);
}


/* =========================================================
   CONTACT HOVER
========================================================= */

.faq-section__contact-link:hover
.faq-section__contact-number {
  color:
    var(--color-secondary);
}


/* =========================================================
   CONTACT FOCUS
========================================================= */

.faq-section__contact-link:focus-visible {
  outline:
    3px solid
    var(--color-secondary);

  outline-offset:
    5px;
}


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

@media (max-width: 1000px) {

  .faq-section__container {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }


  .faq-section__aside {
    position:
      static;

    width:
      100%;
  }


  .faq-section__contact {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap:
      30px;
  }


  .faq-section__contact-title {
    margin-bottom:
      0;
  }


  .faq-section__contact-links {
    justify-content:
      center;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .faq-section {
    padding-block:
      72px;
  }


  .faq-section__container {
    width:
      min(100% - 32px, 1380px);

    gap:
      50px;
  }


  .faq-item__trigger {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      30px;

    min-height:
      75px;
  }


  .faq-item__question-text {
    padding-right:
      12px;

    font-size:
      1.05rem;
  }


  .faq-item__answer {
    padding:
      0 40px 22px;
  }


  .faq-section__contact {
    display:
      block;

    padding:
      32px;
  }


  .faq-section__contact-title {
    margin-bottom:
      35px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .faq-section__container {
    width:
      min(100% - 24px, 1380px);
  }


  .faq-item__trigger {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      28px;
  }


  .faq-item__number {
    font-size:
      0.8rem;
  }


  .faq-item__question-text {
    font-size:
      1rem;
  }


  .faq-item__answer {
    padding-left:
      32px;
  }


  .faq-section__contact {
    padding:
      28px 24px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .faq-item__icon,
  .faq-section__more-icon,
  .faq-section__more,
  .faq-item__trigger {
    transition:
      none;
  }

}















/* =========================================================
   OPERATING HOURS
========================================================= */

.operating-hours {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.operating-hours__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.operating-hours__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap:
    clamp(40px, 7vw, 110px);

  align-items: end;

  margin-bottom:
    clamp(50px, 7vw, 85px);
}


/* =========================================================
   HEADING
========================================================= */

.operating-hours__heading {
  max-width: 700px;
}


/* =========================================================
   EYEBROW
========================================================= */

.operating-hours__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.operating-hours__title {
  max-width:
    680px;

  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.operating-hours__intro {
  max-width:
    620px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-loose);
}


.operating-hours__intro p {
  margin: 0;
}


/* =========================================================
   SCHEDULE
========================================================= */

.operating-hours__schedule {
  width: 100%;

  border-top:
    1px solid rgba(0, 0, 0, 0.16);
}


/* =========================================================
   SCHEDULE ROW
========================================================= */

.operating-hours__row {
  display: grid;

  grid-template-columns:
    minmax(180px, 0.8fr)
    minmax(0, 1fr);

  align-items: center;

  min-height:
    78px;

  border-bottom:
    1px solid rgba(0, 0, 0, 0.16);
}


/* =========================================================
   DAY
========================================================= */

.operating-hours__day {
  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.15rem, 2vw, 3.4rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   TIME
========================================================= */

.operating-hours__time {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 12px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-xxl);

  line-height:
    var(--line-height-normal);
}


/* =========================================================
   STATUS
========================================================= */

.operating-hours__status {
  font-weight:
    var(--font-bold);
}


/* =========================================================
   OPEN INDICATOR
========================================================= */

.operating-hours__indicator {
  width:
    40px;

  height:
    3px;

  flex-shrink: 0;

  border-radius:
    0%;

  background:
    var(--color-primary);
}


/* =========================================================
   CLOSED DAYS
========================================================= */

.operating-hours__row--closed
.operating-hours__status {
  opacity:
    0.55;
}


.operating-hours__row--closed
.operating-hours__indicator {
  background:
    rgba(0, 0, 0, 0.3);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .operating-hours__header {
    grid-template-columns:
      1fr;

    gap:
      20px;

    align-items:
      start;
  }


  .operating-hours__intro {
    max-width:
      760px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .operating-hours {
    padding-block:
      72px;
  }


  .operating-hours__container {
    width:
      min(100% - 32px, 1380px);
  }


  .operating-hours__row {
    grid-template-columns:
      1fr;

    gap:
      10px;

    padding-block:
      20px;
  }


  .operating-hours__time {
    justify-content:
      flex-start;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .operating-hours__container {
    width:
      min(100% - 24px, 1380px);
  }


  .operating-hours__title {
    font-size:
      2.1rem;
  }


  .operating-hours__row {
    min-height:
      auto;
  }

}







/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-choose-us {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--bg-tertiary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.why-choose-us__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline:
    auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.why-choose-us__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap:
    clamp(40px, 7vw, 110px);

  align-items:
    end;

  margin-bottom:
    clamp(50px, 7vw, 85px);
}


/* =========================================================
   HEADING
========================================================= */

.why-choose-us__heading {
  max-width:
    720px;
}


/* =========================================================
   EYEBROW
========================================================= */

.why-choose-us__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.why-choose-us__title {
  max-width:
    700px;

  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4vw, 3.6rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.why-choose-us__intro {
  max-width:
    620px;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-loose);
}


.why-choose-us__intro p {
  margin: 0;
}


/* =========================================================
   REASONS LIST
========================================================= */

.why-choose-us__list {
  width: 100%;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   INDIVIDUAL REASON
========================================================= */

.why-choose-us__item {
  display: grid;

  grid-template-columns:
    110px
    minmax(0, 1fr);

  align-items: center;

  min-height:
    clamp(90px, 10vw, 125px);

  padding-block:
    20px;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   NUMBER
========================================================= */

.why-choose-us__number {
  color:
    var(--color-primary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1rem, 1.5vw, 1.25rem);

  font-weight:
    var(--font-bold);

  line-height:
    1;
}


/* =========================================================
   ITEM TITLE
========================================================= */

.why-choose-us__item-title {
  margin: 0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.35rem, 2.5vw, 2rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   HOVER
========================================================= */

.why-choose-us__item {
  transition:
    padding-left 0.25s ease,
    background-color 0.25s ease;
}


.why-choose-us__item:hover {
  padding-left:
    12px;

  background:
    rgba(0, 0, 0, 0.025);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .why-choose-us__header {
    grid-template-columns:
      1fr;

    gap:
      20px;

    align-items:
      start;
  }


  .why-choose-us__intro {
    max-width:
      760px;
  }


  .why-choose-us__item {
    grid-template-columns:
      90px
      minmax(0, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .why-choose-us {
    padding-block:
      72px;
  }


  .why-choose-us__container {
    width:
      min(100% - 32px, 1380px);
  }


  .why-choose-us__item {
    grid-template-columns:
      55px
      minmax(0, 1fr);

    min-height:
      85px;

    padding-block:
      18px;
  }


  .why-choose-us__item:hover {
    padding-left:
      0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .why-choose-us__container {
    width:
      min(100% - 24px, 1380px);
  }


  .why-choose-us__title {
    font-size:
      2.1rem;
  }


  .why-choose-us__item {
    grid-template-columns:
      45px
      minmax(0, 1fr);
  }


  .why-choose-us__item-title {
    font-size:
      1.25rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .why-choose-us__item {
    transition:
      none;
  }

}





/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
  width: 100%;

  padding-block:
    clamp(75px, 9vw, 120px);

  background:
    var(--color-primary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-section__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.contact-section__header {
  max-width:
    850px;

  margin-bottom:
    clamp(45px, 6vw, 75px);
}


/* =========================================================
   EYEBROW
========================================================= */

.contact-section__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--color-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.contact-section__title {
  max-width:
    800px;

  margin: 0;

  color:
    var(--color-tertiary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 4.5vw, 4rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   MAIN GRID
========================================================= */

.contact-section__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    clamp(40px, 7vw, 100px);

  align-items:
    start;
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.contact-section__form-wrapper {
  width: 100%;
}


/* =========================================================
   FORM
========================================================= */

.contact-section__form {
  width: 100%;
}


/* =========================================================
   FIELD
========================================================= */

.contact-section__field {
  margin-bottom:
    24px;
}


/* =========================================================
   LABEL
========================================================= */

.contact-section__label {
  display: block;

  margin-bottom:
    9px;

  color:
    var(--color-tertiary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   INPUTS
========================================================= */

.contact-section__input {
  display: block;

  width: 100%;

  min-height:
    54px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius:
    0;

  background:
    transparent;

  color:
    var(--color-tertiary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  line-height:
    1.4;

  appearance:
    none;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.contact-section__input::placeholder {
  color:
    rgba(255, 255, 255, 0.65);

  opacity:
    1;
}


/* =========================================================
   SELECT
========================================================= */

.contact-section__select {
  cursor:
    pointer;
}


/* =========================================================
   SELECT OPTIONS
========================================================= */

.contact-section__select option {
  color:
    var(--text-secondary);

  background:
    var(--color-tertiary);
}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-section__textarea {
  min-height:
    150px;

  resize:
    vertical;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.contact-section__input:focus {
  outline:
    none;

  border-color:
    var(--color-secondary);

  background:
    rgba(255, 255, 255, 0.06);
}


/* =========================================================
   INVALID INPUT
========================================================= */

.contact-section__input:user-invalid {
  border-color:
    var(--color-secondary);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-section__submit {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap:
    18px;

  min-height:
    58px;

  padding:
    14px 24px;

  border:
    1px solid
    var(--color-tertiary);

  border-radius:
    0;

  background:
    var(--color-tertiary);

  color:
    var(--color-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  cursor:
    pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   SUBMIT ICON
========================================================= */

.contact-section__submit-icon {
  display:
    grid;

  place-items:
    center;

  width:
    24px;

  height:
    24px;
}


/* =========================================================
   SUBMIT ICON IMAGE
========================================================= */

.contact-section__submit-icon img {
  display:
    block;

  width:
    20px;

  height:
    20px;

  filter:
    none;
}


/* =========================================================
   SUBMIT HOVER
========================================================= */

.contact-section__submit:hover {
  background:
    transparent;

  color:
    var(--color-tertiary);

  transform:
    translateY(-2px);
}


/* =========================================================
   SUBMIT FOCUS
========================================================= */

.contact-section__submit:focus-visible {
  outline:
    3px solid
    var(--color-secondary);

  outline-offset:
    4px;
}


/* =========================================================
   FORM STATUS
========================================================= */

.contact-section__status {
  min-height:
    24px;

  margin:
    16px 0 0;

  color:
    var(--color-tertiary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  line-height:
    var(--line-height-normal);
}


/* =========================================================
   HONEYPOT
========================================================= */

.contact-section__honeypot {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  clip:
    rect(0, 0, 0, 0);

  white-space:
    nowrap;
}


/* =========================================================
   ASIDE
========================================================= */

.contact-section__aside {
  width: 100%;
}


/* =========================================================
   IMAGE
========================================================= */

.contact-section__image {
  width: 100%;

  aspect-ratio:
    4 / 3;

  margin: 0;

  overflow:
    hidden;

  background:
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   IMAGE ELEMENT
========================================================= */

.contact-section__image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-section__details {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    0;

  margin:
    0;

  padding:
    0;

  font-style:
    normal;
}


/* =========================================================
   CONTACT DETAIL
========================================================= */

.contact-section__detail {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  padding:
    24px 16px 0 0;

  color:
    var(--color-tertiary);

  text-decoration:
    none;
}


/* =========================================================
   CONTACT ICON
========================================================= */

.contact-section__detail-icon {
  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius:
    50%;
}


/* =========================================================
   CONTACT ICON IMAGE
========================================================= */

.contact-section__detail-icon img {
  display:
    block;

  width:
    20px;

  height:
    20px;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.contact-section__detail-content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  gap:
    3px;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.contact-section__detail-label {
  color:
    rgba(255, 255, 255, 0.65);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   CONTACT VALUE
========================================================= */

.contact-section__detail-value {
  color:
    var(--color-tertiary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-normal);

  overflow-wrap:
    anywhere;
}


/* =========================================================
   CONTACT LINK HOVER
========================================================= */

.contact-section__detail:hover
.contact-section__detail-value {
  color:
    var(--color-secondary);
}


/* =========================================================
   CONTACT LINK FOCUS
========================================================= */

.contact-section__detail:focus-visible {
  outline:
    3px solid
    var(--color-secondary);

  outline-offset:
    5px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .contact-section__grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }


  .contact-section__aside {
    max-width:
      900px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .contact-section {
    padding-block:
      72px;
  }


  .contact-section__container {
    width:
      min(100% - 32px, 1380px);
  }


  .contact-section__grid {
    gap:
      48px;
  }


  .contact-section__details {
    grid-template-columns:
      1fr;
  }


  .contact-section__detail {
    padding:
      18px 0 0;
  }


  .contact-section__image {
    aspect-ratio:
      4 / 3;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .contact-section__container {
    width:
      min(100% - 24px, 1380px);
  }


  .contact-section__title {
    font-size:
      2.1rem;
  }


  .contact-section__submit {
    width:
      100%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-section__input,
  .contact-section__submit {
    transition:
      none;
  }

}






/* =========================================================
   GOOGLE MAPS / LOCATION
========================================================= */

.location {
  width: 100%;

  padding-block:
    var(--space-xxl);

  background:
    var(--bg-tertiary);

  color:
    var(--text-secondary);
}


/* =========================================================
   CONTAINER
========================================================= */

.location__container {
  width: min(
    calc(100% - 48px),
    1400px
  );

  min-height: 520px;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(0, 1.4fr);

  gap: var(--space-xl);

  align-items: stretch;
}


/* =========================================================
   CONTENT
========================================================= */

.location__content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-block:
    var(--space-lg);
}


.location__eyebrow {
  margin:
    0 0
    var(--space-sm);

  color:
    var(--text-primary);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}


.location__title {
  margin:
    0 0
    var(--space-md);

  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(2rem, 4vw, 3.5rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


.location__description {
  max-width:
    560px;

  margin:
    0 0
    var(--space-xl);

  color:
    rgba(0, 0, 0, 0.72);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  line-height:
    var(--line-height-loose);
}


/* =========================================================
   ADDRESS / DETAILS
========================================================= */

.location__address {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-lg);

  margin:
    0 0
    var(--space-xl);

  font-style:
    normal;
}


.location__detail {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--space-md);
}


.location__icon {
  flex:
    0 0 46px;

  width:
    46px;

  height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--bg-primary);

  color:
    var(--text-inverse);

  border-radius:
    var(--radius-sm);
}


.location__icon svg {
  width:
    22px;

  height:
    22px;

  display:
    block;
}


.location__detail-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.location__label {
  color:
    var(--text-primary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


.location__value {
  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  text-decoration:
    none;
}


.location__value--link {
  transition:
    color var(--transition-fast);
}


.location__value--link:hover {
  color:
    var(--color-primary);
}


/* =========================================================
   DIRECTIONS CTA
========================================================= */

.location__cta {
  width:
    fit-content;

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-sm);

  padding:
    var(--cta-padding-y-md)
    var(--cta-padding-x-lg);

  background:
    var(--bg-primary);

  color:
    var(--text-inverse);

  border-radius:
    var(--cta-radius-sm);

  font-family:
    var(--font-cta);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  text-decoration:
    none;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}


.location__cta svg {
  width:
    18px;

  height:
    18px;
}


.location__cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-md);
}


.location__cta:focus-visible,
.location__value--link:focus-visible {
  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    3px;
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.location__map {
  position:
    relative;

  width:
    100%;

  min-height:
    520px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(0, 0, 0, 0.10);

  border-radius:
    var(--radius-md);

  background:
    var(--bg-tertiary-secondary);

  box-shadow:
    var(--shadow-md);
}


.location__map iframe {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  border:
    0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .location__container {
    grid-template-columns:
      1fr;

    gap:
      var(--space-xl);
  }


  .location__content {
    padding-block:
      0;
  }


  .location__map {
    min-height:
      450px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .location {
    padding-block:
      var(--space-xl);
  }


  .location__container {
    width:
      min(
        calc(100% - 24px),
        1400px
      );

    gap:
      var(--space-lg);
  }


  .location__title {
    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );
  }


  .location__description {
    margin-bottom:
      var(--space-lg);
  }


  .location__address {
    gap:
      var(--space-md);

    margin-bottom:
      var(--space-lg);
  }


  .location__map {
    min-height:
      380px;
  }


  .location__cta {
    width:
      100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .location__container {
    width:
      min(
        calc(100% - 16px),
        1400px
      );
  }


  .location__map {
    min-height:
      340px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .location__cta,
  .location__value--link {
    transition:
      none;
  }

}
















/* =========================================================
   SITE FOOTER
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */

.site-footer {
  width: 100%;

  padding-top:
    clamp(65px, 8vw, 100px);

  background:
    var(--color-tertiary);

  color:
    var(--text-secondary);

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.site-footer__container {
  width:
    min(100% - 40px, 1380px);

  margin-inline:
    auto;
}


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

.site-footer__main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(160px, 0.55fr)
    minmax(280px, 0.8fr);

  gap:
    clamp(45px, 7vw, 110px);

  padding-bottom:
    clamp(55px, 7vw, 85px);
}


/* =========================================================
   ABOUT / BRAND
========================================================= */

.site-footer__about {
  max-width:
    650px;
}


/* =========================================================
   LOGO
========================================================= */

.site-footer__logo {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin-bottom:
    28px;

  color:
    inherit;

  text-decoration:
    none;

  border-radius:
    var(--radius-sm);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}


.site-footer__logo:hover {
  opacity:
    0.9;
}


.site-footer__logo:active {
  transform:
    translateY(1px);
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.site-footer__logo img {
  display:
    block;

  width:
    min(220px, 65vw);

  height:
    auto;

  max-height:
    70px;

  object-fit:
    contain;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.site-footer__description {
  max-width:
    600px;

  margin:
    0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-regular);

  line-height:
    var(--line-height-loose);
}


/* =========================================================
   IMPORTANT LINKS
========================================================= */

.site-footer__links {
  min-width:
    0;
}


/* =========================================================
   COLUMN HEADING
========================================================= */

.site-footer__heading {
  margin:
    0 0 28px;

  color:
    var(--color-secondary);

  font-family:
    var(--font-heading);

  font-size:
    clamp(1.4rem, 2vw, 1.8rem);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   IMPORTANT LINK LIST
========================================================= */

.site-footer__link-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  margin:
    0;

  padding:
    0;

  list-style:
    none;
}


/* =========================================================
   IMPORTANT LINKS
========================================================= */

.site-footer__link {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-regular);

  line-height:
    var(--line-height-normal);

  text-decoration:
    none;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}


.site-footer__link:hover {
  color:
    var(--color-primary);

  transform:
    translateX(4px);
}


.site-footer__link:active {
  transform:
    translateX(2px);
}


/* =========================================================
   CONTACT COLUMN
========================================================= */

.site-footer__contact {
  max-width:
    500px;
}


/* =========================================================
   CONTACT LIST
========================================================= */

.site-footer__contact-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    22px;

  margin:
    0;

  padding:
    0;

  font-style:
    normal;
}


/* =========================================================
   CONTACT LINK
========================================================= */

.site-footer__contact-link {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  width:
    fit-content;

  color:
    var(--text-secondary);

  text-decoration:
    none;

  border-radius:
    var(--radius-sm);

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}


.site-footer__contact-link:hover {
  color:
    var(--color-primary);

  transform:
    translateX(3px);
}


/* =========================================================
   CONTACT ICON
========================================================= */

.site-footer__contact-icon {
  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  width:
    44px;

  height:
    44px;

  border:
    1px solid
    rgba(0, 0, 0, 0.12);

  border-radius:
    50%;

  background:
    var(--bg-tertiary);

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}


.site-footer__contact-link:hover
.site-footer__contact-icon {
  border-color:
    var(--color-primary);
}


/* =========================================================
   CONTACT ICON IMAGE
========================================================= */

.site-footer__contact-icon img {
  display:
    block;

  width:
    19px;

  height:
    19px;

  object-fit:
    contain;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.site-footer__contact-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.site-footer__contact-label {
  color:
    rgba(0, 0, 0, 0.55);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-regular);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   CONTACT VALUE
========================================================= */

.site-footer__contact-value {
  color:
    var(--text-secondary);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-normal);

  overflow-wrap:
    anywhere;

  transition:
    color var(--transition-fast);
}


.site-footer__contact-link:hover
.site-footer__contact-value {
  color:
    var(--color-primary);
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.site-footer__social {
  margin-top:
    var(--space-xl);

  padding-top:
    var(--space-lg);

  border-top:
    1px solid
    rgba(0, 0, 0, 0.10);
}


/* =========================================================
   SOCIAL TITLE
========================================================= */

.site-footer__social-title {
  margin:
    0 0 var(--space-md);

  color:
    var(--color-secondary);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-size-md);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.site-footer__social-links {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-sm);
}


/* =========================================================
   SOCIAL LINK
========================================================= */

.site-footer__social-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-sm);

  min-height:
    42px;

  padding:
    6px 12px;

  color:
    var(--text-secondary);

  background:
    var(--bg-tertiary);

  border:
    1px solid
    rgba(0, 0, 0, 0.12);

  border-radius:
    var(--radius-sm);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-height-tight);

  text-decoration:
    none;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}


.site-footer__social-link:hover {
  color:
    var(--color-primary);

  border-color:
    var(--color-primary);

  transform:
    translateY(-2px);
}


.site-footer__social-link:active {
  transform:
    translateY(0);
}


/* =========================================================
   SOCIAL ICON
========================================================= */

.site-footer__social-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  width:
    20px;

  height:
    20px;
}


.site-footer__social-icon img {
  display:
    block;

  width:
    20px;

  height:
    20px;

  object-fit:
    contain;
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.site-footer__logo:focus-visible,
.site-footer__link:focus-visible,
.site-footer__contact-link:focus-visible,
.site-footer__social-link:focus-visible,
.site-footer__credit a:focus-visible {

  outline:
    3px solid
    var(--color-primary);

  outline-offset:
    4px;
}


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

.site-footer__bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  padding-block:
    24px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.10);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer__copyright,
.site-footer__credit {
  margin:
    0;

  color:
    var(--text-secondary);

  font-family:
    var(--font-body);

  font-size:
    var(--font-size-sm);

  font-weight:
    var(--font-regular);

  line-height:
    var(--line-height-normal);
}


/* =========================================================
   DESIGNER / DEVELOPER CREDIT
========================================================= */

.site-footer__credit {
  text-align:
    right;
}


.site-footer__credit a {
  color:
    var(--color-secondary);

  font-weight:
    var(--font-bold);

  text-decoration:
    none;

  transition:
    color var(--transition-fast);
}


.site-footer__credit a:hover {
  color:
    var(--color-primary);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .site-footer__main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(180px, 0.65fr)
      minmax(250px, 0.8fr);

    gap:
      40px;
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 900px) {

  .site-footer__container {
    width:
      min(100% - 32px, 1380px);
  }


  .site-footer__main {
    grid-template-columns:
      1fr 1fr;

    gap:
      50px;
  }


  .site-footer__about {
    grid-column:
      1 / -1;

    max-width:
      700px;
  }


  .site-footer__links,
  .site-footer__contact {
    max-width:
      100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .site-footer {
    padding-top:
      72px;
  }


  .site-footer__container {
    width:
      min(100% - 32px, 1380px);
  }


  .site-footer__main {
    grid-template-columns:
      1fr;

    gap:
      55px;

    padding-bottom:
      55px;
  }


  .site-footer__about {
    grid-column:
      auto;

    max-width:
      100%;
  }


  .site-footer__links,
  .site-footer__contact {
    max-width:
      100%;
  }


  .site-footer__heading {
    margin-bottom:
      22px;
  }


  .site-footer__link-list {
    gap:
      12px;
  }


  .site-footer__social {
    margin-top:
      var(--space-lg);

    padding-top:
      var(--space-md);
  }


  .site-footer__bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      10px;
  }


  .site-footer__credit {
    text-align:
      left;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .site-footer__container {
    width:
      min(100% - 24px, 1380px);
  }


  .site-footer__main {
    gap:
      45px;
  }


  .site-footer__logo img {
    width:
      min(200px, 70vw);
  }


  .site-footer__contact-link {
    gap:
      12px;

    width:
      100%;
  }


  .site-footer__contact-icon {
    width:
      40px;

    height:
      40px;
  }


  .site-footer__contact-icon img {
    width:
      18px;

    height:
      18px;
  }


  .site-footer__social-links {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .site-footer__social-link {
    width:
      fit-content;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

  .site-footer__container {
    width:
      min(100% - 16px, 1380px);
  }


  .site-footer__description {
    font-size:
      var(--font-size-sm);
  }


  .site-footer__contact-value {
    font-size:
      var(--font-size-sm);
  }


  .site-footer__social-link {
    min-height:
      40px;

    padding:
      5px 10px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-footer__logo,
  .site-footer__link,
  .site-footer__contact-link,
  .site-footer__contact-icon,
  .site-footer__social-link,
  .site-footer__credit a {
    transition:
      none;
  }


  .site-footer__link:hover,
  .site-footer__contact-link:hover,
  .site-footer__social-link:hover {
    transform:
      none;
  }

}







/* =========================================================
   ABOUT US
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.about-section {
  width: 100%;
  padding-block: clamp(72px, 9vw, 120px);
  background: var(--bg-tertiary);
  overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.about-section__container {
  width: min(100% - 40px, 1380px);
  margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.about-section__header {
  width: min(100%, 850px);
  margin: 0 auto clamp(56px, 8vw, 96px);
  text-align: center;
}


.about-section__eyebrow {
  position: relative;

  width: fit-content;
  margin: 0 auto var(--space-sm);

  color: var(--color-primary);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.about-section__title {
  margin: 0;

  color: var(--text-secondary);

  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);

  text-wrap: balance;
}


/* =========================================================
   CONTENT
========================================================= */

.about-section__content {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 10vw, 120px);
}


/* =========================================================
   CONTENT BLOCK
========================================================= */

.about-section__block {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(40px, 7vw, 100px);
}


/* =========================================================
   REVERSED CONTENT BLOCK
========================================================= */

.about-section__block--reverse {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
}


/*
 * Keep the text on the right and image on the left
 * for the reversed block.
 */

.about-section__block--reverse
.about-section__text {
  order: 2;
}

.about-section__block--reverse
.about-section__image {
  order: 1;
}


/* =========================================================
   TEXT CONTENT
========================================================= */

.about-section__text {
  min-width: 0;
}


.about-section__label {
  margin: 0 0 var(--space-sm);

  color: var(--color-primary);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.about-section__heading {
  margin: 0 0 var(--space-lg);

  color: var(--text-secondary);

  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);

  text-wrap: balance;
}


.about-section__text p:not(
  .about-section__label
) {
  margin: 0 0 var(--space-md);

  color: var(--text-secondary);

  font-family: var(--font-body);
  font-size: var(--font-size-md);

  line-height: var(--line-height-loose);
}


.about-section__text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.about-section__image {
  position: relative;

  width: 100%;
  margin: 0;

  overflow: hidden;

  background: var(--color-primary);
}


.about-section__image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 900 / 650;

  object-fit: cover;

  transition:
    transform 600ms ease;
}


.about-section__image:hover img {
  transform: scale(1.035);
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.about-section__image figcaption {
  padding: 12px 16px;

  color: var(--color-tertiary);

  background: var(--color-primary);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);

  line-height: var(--line-height-normal);
}


/* =========================================================
   CTA
========================================================= */

.about-section__cta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-top: clamp(72px, 9vw, 110px);
  padding: clamp(24px, 4vw, 40px);

  background: var(--color-primary);
}


.about-section__cta p {
  margin: 0;

  color: var(--color-tertiary);

  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: var(--font-bold);

  line-height: var(--line-height-tight);
}


.about-section__cta-link {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 12px 24px;

  color: var(--color-primary);
  background: var(--color-tertiary);

  border: 2px solid var(--color-tertiary);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-bold);

  line-height: 1;

  text-decoration: none;

  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    transform 250ms ease;
}


.about-section__cta-link:hover {
  color: var(--color-tertiary);
  background: transparent;

  transform: translateY(-2px);
}


.about-section__cta-link:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 4px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .about-section__block {
    gap: clamp(32px, 5vw, 60px);
  }

  .about-section__heading {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
  }

  .about-section__text p:not(
    .about-section__label
  ) {
    font-size: var(--font-size-sm);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .about-section {
    padding-block: 72px;
  }


  .about-section__container {
    width: min(100% - 32px, 1380px);
  }


  .about-section__header {
    margin-bottom: 56px;
  }


  .about-section__title {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }


  .about-section__content {
    gap: 64px;
  }


  .about-section__block,
  .about-section__block--reverse {
    display: flex;
    flex-direction: column;

    gap: 32px;

    align-items: stretch;
  }


  /*
   * On mobile the text always comes first,
   * followed by the image.
   */

  .about-section__block--reverse
  .about-section__text {
    order: 1;
  }


  .about-section__block--reverse
  .about-section__image {
    order: 2;
  }


  .about-section__heading {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }


  .about-section__text p:not(
    .about-section__label
  ) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
  }


  .about-section__image img {
    aspect-ratio: 4 / 3;
  }


  .about-section__cta {
    flex-direction: column;

    align-items: stretch;

    gap: 22px;

    margin-top: 64px;
  }


  .about-section__cta-link {
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .about-section__container {
    width: min(100% - 24px, 1380px);
  }


  .about-section {
    padding-block: 60px;
  }


  .about-section__header {
    margin-bottom: 44px;
  }


  .about-section__content {
    gap: 52px;
  }


  .about-section__image figcaption {
    padding: 10px 12px;
  }


  .about-section__cta {
    padding: 22px 18px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .about-section__image img,
  .about-section__cta-link {
    transition: none;
  }


  .about-section__image:hover img {
    transform: none;
  }


  .about-section__cta-link:hover {
    transform: none;
  }

}






/* =========================================================
   SOLUTIONS PAGE HERO
   Nairobi Heavy Lifting & Transport Solutions
========================================================= */


/* ================================================================
   NAirobi HEAVY LIFTING
   EQUIPMENT SOLUTIONS & CAPABILITIES
   UNIQUE PAGE NAMESPACE: nhlts-solutions
   ================================================================ */


/* ================================================================
   PAGE WRAPPER
   ================================================================ */

.nhlts-solutions__page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    background: var(--bg-tertiary);
    box-sizing: border-box;
}


/* ================================================================
   PAGE HEADING
   ================================================================ */

.nhlts-solutions__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-display);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
}

.nhlts-solutions__subheading {
    max-width: 640px;
    margin: 0 0 var(--space-xxl) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-light);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
    opacity: 0.7;
}


/* ================================================================
   SOLUTIONS LIST
   ================================================================ */

.nhlts-solutions__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}


/* ================================================================
   SOLUTION ITEM
   ================================================================ */

.nhlts-solutions__item {
    background: none;
    overflow: hidden;
}


/* ================================================================
   MAIN SOLUTION ROW
   CONTENT LEFT / IMAGE RIGHT
   ================================================================ */

.nhlts-solutions__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}


/* ================================================================
   SOLUTION INFORMATION
   ================================================================ */

.nhlts-solutions__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    box-sizing: border-box;
}


/* ================================================================
   SOLUTION NUMBER
   ================================================================ */

.nhlts-solutions__number {
    margin: 0 0 var(--space-xs) 0;

    font-family: var(--font-heading);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: -0.04em;

    color: var(--color-primary);
    opacity: 0.15;
}


/* ================================================================
   SOLUTION TITLE
   ================================================================ */

.nhlts-solutions__title {
    margin: 0 0 var(--space-sm) 0;

    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;

    color: var(--text-secondary);
}


/* ================================================================
   SOLUTION DESCRIPTION
   ================================================================ */

.nhlts-solutions__description {
    max-width: 600px;
    margin: 0 0 var(--space-md) 0;

    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);

    color: var(--text-secondary);
    opacity: 0.85;
}


/* ================================================================
   SOLUTION IMAGE / VISUAL
   ================================================================ */

.nhlts-solutions__visual {
    min-height: 280px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--bg-tertiary);

    overflow: hidden;
}


.nhlts-solutions__visual img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    margin: 0;
    padding: 0;
}


/* ================================================================
   META INFORMATION SECTION
   Capacities / Industries / Applications / Did You Know
   ================================================================ */

.nhlts-solutions__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);

    padding: var(--space-xl) var(--space-lg);

    background: var(--bg-tertiary);

    border-top: 1px solid rgba(0, 0, 0, 0.04);

    box-sizing: border-box;
}


/* ================================================================
   META COLUMN
   ================================================================ */

.nhlts-solutions__meta-column {
    min-width: 0;
}


/* ================================================================
   META COLUMN HEADING
   ================================================================ */

.nhlts-solutions__meta-column h4 {
    display: inline-block;

    margin: 0 0 var(--space-xs) 0;
    padding-bottom: var(--space-xs);

    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-bold);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: var(--text-secondary);

    border-bottom: 2px solid var(--color-primary);
}


/* ================================================================
   META COLUMN PARAGRAPH
   ================================================================ */

.nhlts-solutions__meta-column p {
    margin: var(--space-sm) 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);

    color: var(--text-secondary);
    opacity: 0.8;
}


/* ================================================================
   META LIST
   ================================================================ */

.nhlts-solutions__meta-column ul {
    margin: var(--space-sm) 0 0 0;
    padding: 0;

    list-style: none;
}


/* ================================================================
   META LIST ITEMS
   ================================================================ */

.nhlts-solutions__meta-column li {
    position: relative;

    margin: 0;
    padding: var(--space-xs) 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);

    color: var(--text-secondary);
    opacity: 0.8;

    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}


/* ================================================================
   LAST LIST ITEM
   ================================================================ */

.nhlts-solutions__meta-column li:last-child {
    border-bottom: 0;
}


/* ================================================================
   LIST MARKER
   ================================================================ */

.nhlts-solutions__meta-column li::before {
    content: "— ";

    color: var(--color-primary);
    font-weight: var(--font-bold);
}


/* ================================================================
   DID YOU KNOW
   ================================================================ */

.nhlts-solutions__didyouknow {
    padding: var(--space-md);

    background: rgba(241, 165, 19, 0.05);

    border-radius: var(--radius-sm);

    box-sizing: border-box;
}


/* ================================================================
   DID YOU KNOW PARAGRAPH
   ================================================================ */

.nhlts-solutions__didyouknow p {
    margin: 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);

    color: var(--text-secondary);
    opacity: 0.9;
}


/* ================================================================
   DID YOU KNOW STRONG TEXT
   ================================================================ */

.nhlts-solutions__didyouknow strong {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}


/* ================================================================
   CTA SECTION
   ================================================================ */

.nhlts-solutions__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);

    padding: var(--space-md) var(--space-lg) var(--space-xl);

    background: var(--bg-tertiary);

    border-top: 1px solid rgba(0, 0, 0, 0.04);

    box-sizing: border-box;
}


/* ================================================================
   CTA LINK / BUTTON
   ================================================================ */

.nhlts-solutions__cta-link {
    display: inline-block;

    padding: 20px 28px;

    font-family: var(--font-cta);
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    line-height: 1;

    color: var(--text-inverse);

    background: var(--bg-primary);

    border: none;
    border-radius: 5px;

    text-decoration: none;

    cursor: pointer;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


/* ================================================================
   CTA HOVER
   ================================================================ */

.nhlts-solutions__cta-link:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}


/* ================================================================
   CTA FOCUS
   ================================================================ */

.nhlts-solutions__cta-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ================================================================
   CTA NOTE
   ================================================================ */

.nhlts-solutions__cta-note {
    font-family: var(--font-cta);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;

    color: var(--text-secondary);
    opacity: 0.5;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 992px) {

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

}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 768px) {

    .nhlts-solutions__page {
        padding: var(--space-xl) var(--space-md);
    }


    .nhlts-solutions__row {
        grid-template-columns: 1fr;
    }


    .nhlts-solutions__visual {
        order: -1;
        min-height: 0;
    }


    .nhlts-solutions__visual img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }


    .nhlts-solutions__info {
        padding: var(--space-xl) var(--space-md);
    }


    .nhlts-solutions__meta {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--space-xl) var(--space-md);
    }


    .nhlts-solutions__cta {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

}


/* ================================================================
   SMALL MOBILE
   ================================================================ */

@media (max-width: 480px) {

    .nhlts-solutions__page {
        padding: var(--space-lg) var(--space-sm);
    }


    .nhlts-solutions__meta {
        grid-template-columns:repeat(2, 1fr);
        gap: var(--space-xl);
    }


    .nhlts-solutions__info {
        padding: var(--space-lg) var(--space-sm);
    }


    .nhlts-solutions__meta {
        padding: var(--space-lg) var(--space-sm);
    }


    .nhlts-solutions__cta {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--space-md) var(--space-sm) var(--space-lg);
    }


    .nhlts-solutions__cta-link {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

}





/* ================================================================
   GALLERY WRAPPER
   ================================================================ */
/* ================================================================
   HEAVY LIFTING & EQUIPMENT GALLERY
   ================================================================ */

.gallery {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5rem 2rem;
    box-sizing: border-box;
}

/* ================================================================
   GALLERY HEADER
   ================================================================ */

.gallery__title {
    margin: 0 0 0.5rem;
    color: #1a1a1a;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.gallery__subtitle {
    max-width: 750px;
    margin: 0 0 2.5rem;
    color: #555;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
}

/* ================================================================
   MASONRY GRID
   ================================================================ */

.gallery__grid {
    width: 100%;
    column-count: 4;
    column-gap: 1.25rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================================================================
   GALLERY ITEM
   ================================================================ */

.gallery__item {
    display: inline-block;
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0;
    vertical-align: top;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* ================================================================
   HOVER EFFECT
   ================================================================ */

.gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* ================================================================
   GALLERY IMAGE
   ================================================================ */

.gallery__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    background: #e9ecef;
    border: 0;
}

/* ================================================================
   LARGE TABLETS / SMALL DESKTOPS
   ================================================================ */

@media (max-width: 1200px) {

    .gallery {
        padding: 4.5rem 1.5rem;
    }

    .gallery__grid {
        column-count: 3;
        column-gap: 1.15rem;
    }

    .gallery__item {
        margin-bottom: 1.15rem;
    }
}

/* ================================================================
   TABLETS
   ================================================================ */

@media (max-width: 900px) {

    .gallery {
        padding: 4rem 1.25rem;
    }

    .gallery__title {
        font-size: clamp(1.9rem, 5vw, 2.75rem);
    }

    .gallery__subtitle {
        margin-bottom: 2rem;
    }

    .gallery__grid {
        column-count: 2;
        column-gap: 1rem;
    }

    .gallery__item {
        margin-bottom: 1rem;
    }
}

/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 600px) {

    .gallery {
        width: 100%;
        padding: 3rem 1rem;
    }

    .gallery__title {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .gallery__subtitle {
        margin-bottom: 1.75rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .gallery__grid {
        column-count: 2;
        column-gap: 0.75rem;
    }

    .gallery__item {
        margin-bottom: 0.75rem;
        border-radius: 5px;
    }
}

/* ================================================================
   SMALL MOBILE DEVICES
   ================================================================ */

@media (max-width: 420px) {

    .gallery {
        padding: 2.5rem 0.75rem;
    }

    .gallery__title {
        font-size: 1.65rem;
    }

    .gallery__subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .gallery__grid {
        column-count: 2;
        column-gap: 0.6rem;
    }

    .gallery__item {
        margin-bottom: 0.6rem;
        border-radius: 4px;
    }
}

/* ================================================================
   VERY SMALL SCREENS
   ================================================================ */

@media (max-width: 320px) {

    .gallery {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .gallery__grid {
        column-count: 1;
    }

    .gallery__item {
        margin-bottom: 0.85rem;
    }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .gallery__item {
        transition: none;
    }

    .gallery__item:hover {
        transform: none;
    }
}



/* ================================================================
   BACK TO TOP BUTTON
   ================================================================ */

.back-to-top {
    position: fixed;
    right: 0;
    bottom: 4rem;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: var(--bg-secondary);

    
   

    border-radius: 10px;

    cursor: pointer;
    margin-right: -10px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}


/* ================================================================
   ACTIVE / VISIBLE STATE
   ================================================================ */

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}


/* ================================================================
   ICON
   ================================================================ */

.back-to-top__icon {
    width: 32px;
    height: 32px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* ================================================================
   HOVER
   ================================================================ */

.back-to-top:hover {
    background: var(--bg-primary);
    
}

.back-to-top:hover .back-to-top__icon {
    transform: translateY(-1.5px);
}


/* ================================================================
   FOCUS
   ================================================================ */




/* ================================================================
   ACTIVE
   ================================================================ */

.back-to-top:active {
    transform: translateY(1px);
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 768px) {

    .back-to-top {
        width: 50px;
        height: 50px;
        bottom: 1.5rem;
    }

    .back-to-top__icon {
        width: 20px;
        height: 20px;
    }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 480px) {

    .back-to-top {
        width: 46px;
        height: 46px;
        bottom: 1.25rem;
    }

    .back-to-top__icon {
        width: 18px;
        height: 18px;
    }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .back-to-top {
        transition: none;
    }

    .back-to-top__icon {
        transition: none;
    }
}