/* =========================================================
   ODOT MEDIA COMMUNICATION — theme layer for the Misiom template
   Loaded AFTER misiom.css. Retheme is done through the template's
   own CSS custom properties wherever possible, so the original
   layout, spacing and GSAP/AOS animation logic stay intact.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* brand accent, pulled from the ODOT logo's ember tone */
  --misiom-base: #ef5a28;
  --misiom-base-rgb: 239, 90, 40;

  /* warm charcoal instead of pure black, ties dark sections/footer to the brand */
  --misiom-black: #171512;
  --misiom-black-rgb: 23, 21, 18;
  --misiom-black2: #1c1a17;
  --misiom-black2-rgb: 28, 26, 23;
  --misiom-black4: #14120f;
  --misiom-black4-rgb: 20, 18, 15;
  --misiom-black5: #2a2622;
  --misiom-black5-rgb: 42, 38, 34;

  /* warm off-white / border to match the paper background used elsewhere on odotmedia.com */
  --misiom-white2: #f3f1ea;
  --misiom-white2-rgb: 243, 241, 234;
  --misiom-border-color: #e2ded2;
  --misiom-border-color-rgb: 226, 222, 210;

  --misiom-text: #5b5b58;
  --misiom-text-rgb: 91, 91, 88;
  --misiom-gray: #8a8985;
  --misiom-gray-rgb: 138, 137, 133;

  --misiom-font: "Inter", sans-serif;

  --odot-sun: #ffc72c;
  --odot-amber: #f9962c;
  --odot-ember: #ef5a28;
  --odot-flare: #e02e3d;
  --odot-leaf-1: #b7d84a;
  --odot-leaf-2: #6fb854;
  --odot-leaf-3: #357a42;
  --odot-arc-gradient: linear-gradient(120deg, var(--odot-sun) 0%, var(--odot-amber) 35%, var(--odot-ember) 68%, var(--odot-flare) 100%);
}

/* Headline / display moments get the geometric display face, body text stays on Inter */
.sec-title__title,
.hero-one__title,
.about-one__info__title,
.about-one__progress__text,
.work-process__card__title,
.why-choose__item__title,
.faq-one__faq__title,
.service-card__title,
.portfolio-one__item__title,
.portfolio-one__hover__title,
.contact-one__image__title,
.contact-info__title,
.footer-widget__title,
.business-impact__about__title,
.slide-text__title {
  font-family: "Space Grotesk", sans-serif;
}

/* small kicker labels use the mono face, matching the rest of the ODOT site */
.sec-title__tagline {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

/* signature "dot" mark next to eyebrow-style taglines, echoing the ODOT logo */
.sec-title__tagline::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  transform: rotate(12deg);
  background: linear-gradient(135deg, var(--odot-leaf-1), var(--odot-leaf-2) 55%, var(--odot-leaf-3));
  vertical-align: middle;
}

/* gradient treatment for the primary button, in place of the flat base color */
.misiom-btn {
  background: var(--odot-arc-gradient) !important;
  background-color: var(--misiom-base) !important;
}

/* portfolio accent bars / hover overlays read the brand gradient instead of flat orange where used as a highlight */
.portfolio-one__item__rm,
.work-process__card__icon,
.why-choose__item__icon {
  background: var(--odot-arc-gradient) !important;
}

/* a little extra vertical room so the taller logo doesn't crowd the nav pill next to it */
.main-header__inner {
  padding: 10px 0;
}

/* logo sizing — template ships no fixed height (max-width:100%; height:auto), so we set one explicitly.
   The ODOT lockup is icon-over-wordmark (tall aspect ratio), so a very large height overflows the
   header row — sized to read clearly large while still sitting fully inside the nav bar. */
.main-header__logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
}
.footer-widget__logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
}
.sidebar-two__logo img,
.mobile-nav__wrapper .logo-box img {
  height: 64px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 1199px) {
  .main-header__logo img {
    height: 68px;
  }
}
@media (max-width: 767px) {
  .main-header__logo img {
    height: 56px;
  }
}
@media (max-width: 480px) {
  .main-header__logo img {
    height: 48px;
  }
}

/* text-chip strip used in place of the template's stock "client logos" row */
.odot-client-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
  align-items: center;
}
.odot-client-strip span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--misiom-text);
  letter-spacing: 0.02em;
}

/* honest placeholder card, reused wherever the template expected fabricated content (testimonials, team) */
.odot-notice {
  border: 1.5px dashed var(--misiom-border-color);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  color: var(--misiom-gray);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  max-width: 760px;
  margin: 0 auto;
}

/* portfolio thumbnails: template expects real screenshots we don't have yet — use brand-gradient
   placeholder panels with the project name, so nothing looks like a broken image */
/* the two funfact cards ("Design" / "Develop") had zero gap in the template's default (desktop)
   styles — they only gained spacing at narrower breakpoints. Add breathing room at every size. */
.business-impact__funfact {
  gap: 24px !important;
}

.odot-portfolio-thumb {
  width: 100%;
  height: 100%;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  border-radius: inherit;
}
@media (max-width: 991px) {
  .odot-portfolio-thumb {
    min-height: 480px;
  }
}
@media (max-width: 575px) {
  .odot-portfolio-thumb {
    min-height: 380px;
  }
}
.odot-portfolio-thumb span {
  font-family: "IBM Plex Mono", monospace;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* hero paragraph was overflowing into the hero portrait image on the right — constrain its width
   so it always wraps well inside the text column instead of running under the image */
.hero-one__text {
  max-width: 430px;
}
@media (max-width: 1599px) {
  .hero-one__text {
    max-width: 360px;
  }
}
@media (max-width: 1199px) {
  .hero-one__text {
    max-width: 320px;
  }
}
@media (max-width: 991px) {
  .hero-one__text {
    max-width: 520px;
  }
}