: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;

}

/* =========================
   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);           
}





/* =========================================================
   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.03);

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

  isolation: isolate;
}


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

.site-nav {
  width: 100%;
  background: var(--bg-tertiary);
}


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

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

  min-height: 84px;

  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

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


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

.site-nav__brand {
  flex: 0 1 auto;

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

  min-width: 0;

  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;
}


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

.site-nav__contact {
  flex: 0 0 auto;

  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;

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

  font-weight: 500;

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


/* Vertical divider */

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


/* =========================================================
   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: 1px;
}


.site-nav__contact-label {
  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);

  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;
}


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

.site-nav__contact-link:hover {
  scale: 1.1;
}




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

.site-nav__brand:focus-visible,
.site-nav__contact-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;

  z-index: 2;
}


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

.site-nav__contact-link:active {
  background: var(--bg-tertiary-secondary);
}


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

@media (max-width: 900px) {

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

    min-height: 76px;

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


  .site-nav__logo {
    max-height: 54px;
  }


  .site-nav__contact-link {
    min-height: 52px;

    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
========================================================= */

@media (max-width: 600px) {

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

    min-height: 68px;

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


  .site-nav__logo {
    max-width: 170px;
    max-height: 48px;
  }


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


  .site-nav__contact-link {
    min-width: 44px;
    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;
  }

}


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

@media (max-width: 400px) {

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

    min-height: 62px;

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


  .site-nav__logo {
    max-width: 145px;
    max-height: 42px;
  }


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

    padding: var(--space-xs);
  }


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

}


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

@media (max-width: 340px) {

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


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


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

}


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

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

  .site-nav__brand,
  .site-nav__contact-link {
    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: 5px;

  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.88) 0%,
      rgba(0, 0, 0, 0.72) 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(--color-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 / 6;

  overflow: hidden;

  background:
    #111;
}


/* =========================================================
   FACEBOOK IFRAME
========================================================= */

.work-showcase__embed iframe {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   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;
  }

}



/* =========================================================
   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(1.15rem, 2vw, 1.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-md);

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


/* =========================================================
   STATUS
========================================================= */

.operating-hours__status {
  font-weight:
    var(--font-bold);
}


/* =========================================================
   OPEN INDICATOR
========================================================= */

.operating-hours__indicator {
  width:
    9px;

  height:
    9px;

  flex-shrink: 0;

  border-radius:
    50%;

  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;
  }

}




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

.site-footer {
  width: 100%;

  padding-top:
    clamp(65px, 8vw, 100px);

  background:
    var(--color-tertiary);

  color:
    var(--color-primary);

  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.2fr)
    minmax(280px, 0.8fr);

  gap:
    clamp(60px, 10vw, 160px);

  padding-bottom:
    clamp(55px, 7vw, 85px);
}


/* =========================================================
   ABOUT
========================================================= */

.site-footer__about {
  max-width:
    650px;
}


/* =========================================================
   LOGO
========================================================= */

.site-footer__logo {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin-bottom:
    28px;

  text-decoration:
    none;
}


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

.site-footer__logo img {
  display:
    block;

  width:
    min(220px, 65vw);

  height:
    auto;
}


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

.site-footer__description {
  max-width:
    600px;

  margin: 0;

  color:
    var(--text-secondary);

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

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

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


/* =========================================================
   CONTACT COLUMN
========================================================= */

.site-footer__contact {
  max-width:
    500px;
}


/* =========================================================
   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);
}


/* =========================================================
   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(--color-secondary);

  text-decoration:
    none;
}


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

.site-footer__contact-icon {
  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  width:
    44px;

  height:
    44px;

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

  border-radius:
    50%;
}


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

.site-footer__contact-icon img {
  display:
    block;

  width:
    19px;

  height:
    19px;
}


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

.site-footer__contact-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


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

.site-footer__contact-label {
  color:
    rgba(255, 255, 255, 0.58);

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

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

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


/* =========================================================
   CONTACT VALUE
========================================================= */

.site-footer__contact-value {
  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-normal);

  overflow-wrap:
    anywhere;
}


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

.site-footer__contact-link:hover
.site-footer__contact-value {
  color:
    var(--color-secondary);
}


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

.site-footer__logo:focus-visible,
.site-footer__contact-link:focus-visible,
.site-footer__credit a:focus-visible {
  outline:
    3px solid
    var(--color-secondary);

  outline-offset:
    5px;
}


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

.site-footer__bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  padding-block:
    24px;

  border-top:
    1px solid
    var(--bg-secondary);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer__copyright,
.site-footer__credit {
  margin: 0;

  color:
    var(--text-secondary);

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

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

  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 0.25s ease;
}


.site-footer__credit a:hover {
  color:
    var(--color-secondary);
}


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

@media (max-width: 900px) {

  .site-footer__main {
    grid-template-columns:
      1fr 1fr;

    gap:
      50px;
  }

}


/* =========================================================
   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;
  }


  .site-footer__contact {
    max-width:
      100%;
  }


  .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);
  }

}


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

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

  .site-footer__credit a {
    transition:
      none;
  }

}