/* HEADER logo: sits on the page, so it follows the page theme.
   Colored logo in light theme, white logo in dark.
   Site default is light (OS preference is ignored until the user toggles). */
.mxd-logo--light {
  display: block;
}
.mxd-logo--dark {
  display: none;
}

html[color-scheme="light"] .mxd-logo--light {
  display: block;
}
html[color-scheme="light"] .mxd-logo--dark {
  display: none;
}

html[color-scheme="dark"] .mxd-logo--light {
  display: none;
}
html[color-scheme="dark"] .mxd-logo--dark {
  display: block;
}

/* MENU logo: the slide-out panel is painted in --base-opp, i.e. the OPPOSITE
   of the page. So the menu logo must be inverted relative to the header one —
   otherwise dark theme puts the white logo on the light panel and it vanishes. */
.menu-logo--light {
  display: none;
}
.menu-logo--dark {
  display: block;
}

html[color-scheme="light"] .menu-logo--light {
  display: none;
}
html[color-scheme="light"] .menu-logo--dark {
  display: block;
}

html[color-scheme="dark"] .menu-logo--light {
  display: block;
}
html[color-scheme="dark"] .menu-logo--dark {
  display: none;
}

/* Mobile: hide the contact arrow next to the header controls (caption is already
   hidden below desktop — only the icon remains and crowds the logo/menu area). */
@media only screen and (max-width: 1199px) {
  .mxd-header__link {
    display: none !important;
  }
}

/* Tech stack logos: normalize visual size across mixed assets */
.mxd-tech-stack__logo {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mxd-tech-stack__logo img {
  width: 100%;
  height: 100%;
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Capabilities list: reserve image height so ScrollTrigger hide points stay accurate */
.mxd-cpb-list__image {
  aspect-ratio: 1200 / 980;
  overflow: hidden;
}
.mxd-cpb-list__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep featured projects tags visually capped to 3 badges */
.mxd-project-item__tags .tag {
  white-space: nowrap;
}

/* Responsive desktop/mobile project images via <picture> */
.card__image picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.card__image picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mxd-img-anim picture.mxd-img-anim__absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
}

.mxd-img-anim picture.mxd-img-anim__main {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}

.mxd-img-anim picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mxd-img-anim picture.mxd-img-anim__main img {
  height: auto;
}

/* Portfolio archive: show project image above title on mobile (desktop uses cursor preview) */
.mxd-projects-list__media {
  display: none;
}

@media only screen and (max-width: 1199px) {
  .mxd-projects-list__media {
    display: block;
    width: 100%;
    margin: 0 0 1.8rem;
    overflow: hidden;
    border-radius: 0;
  }

  .mxd-projects-list__media picture,
  .mxd-projects-list__media .mxd-projects-list__img {
    display: block;
    width: 100%;
  }

  .mxd-projects-list__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .mxd-projects-list__item {
    padding-top: 3.6rem;
    padding-bottom: 3.4rem;
  }
}

/* Footer contact email: don't clip long addresses in narrow columns */
.mxd-footer-nav02__list ul li {
  max-width: 100%;
}

.mxd-footer-nav02__list ul li a.anim-uni-slide-down {
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow: visible;
  align-items: flex-start;
}

.mxd-footer-nav02__list ul li a.anim-uni-slide-down span {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* About hero hover banners: match upload aspect ratios
   landscape → 1920×1920 (1:1), portrait → 1080×1920 (9:16) */
@media only screen and (min-width: 1200px) {
  .headline-banner-01.landscape,
  .headline-banner-02.landscape {
    width: 26rem;
    height: 26rem;
    aspect-ratio: 1 / 1;
  }

  .headline-banner-01.portrait,
  .headline-banner-02.portrait {
    width: 17.5rem;
    height: 31.11rem; /* 17.5 * 1920/1080 */
    aspect-ratio: 1080 / 1920;
  }

  .headline-banner-01 img,
  .headline-banner-02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media only screen and (min-width: 1600px) {
  .headline-banner-01.landscape,
  .headline-banner-02.landscape {
    width: 30rem;
    height: 30rem;
  }

  .headline-banner-01.portrait,
  .headline-banner-02.portrait {
    width: 20rem;
    height: 35.56rem; /* 20 * 1920/1080 */
  }
}

/* ---------------------------------------------------------------------------
   Home hero — text-only mobile (video/media temporarily off).
   Default layout is min-height:100vh + centered headline + absolute bottom,
   which leaves a huge gap above the title and below "Scroll to explore".
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  .mxd-hero-03--text-only {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 16rem; /* clear header + a bit of breathing room */
    padding-bottom: 3rem;
  }

  .mxd-hero-03--text-only .mxd-hero-03__headline {
    padding-top: 0;
  }

  .mxd-hero-03--text-only .mxd-hero-03__bottom {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 3.2rem;
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   Site-wide mobile section rhythm (all pages).
   Theme utilities use ~13–20rem gaps designed for desktop; on phones those
   stack into empty half-screens. Keep one shared mobile cadence.
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  .mxd-section.padding-top-default,
  .mxd-section.padding-top-number,
  .mxd-section.padding-top-number-mobile,
  .mxd-section.padding-top-title,
  .mxd-section.padding-top-title-mobile,
  .mxd-section.padding-top-subtitle,
  .mxd-section.padding-top-subtitle-mobile,
  .mxd-section.padding-top-manifest-m {
    padding-top: 8rem;
  }

  .mxd-section.padding-bottom-default,
  .mxd-section.padding-bottom-tag-m,
  .mxd-section.padding-bottom-tag-m-title,
  .mxd-section.padding-bottom-tag-m-subtitle,
  .mxd-section.padding-bottom-tag-m-desktop,
  .mxd-section.padding-bottom-tags-mobile,
  .mxd-section.padding-bottom-t-medium,
  .mxd-section.padding-bottom-preview,
  .mxd-section.padding-bottom-grid-l-to-title,
  .mxd-section.padding-marquee-tags {
    padding-bottom: 8rem;
  }

  .mxd-section.padding-bottom-projects {
    padding-bottom: 6rem;
  }

  /* Title-to-grid gap inside a section */
  .mxd-section-title.pre-grid,
  .mxd-section-title.pre-grid-xl-mobile {
    margin-bottom: 4.5rem;
  }

  /* Hero (text-only) → A/01: tighter than a normal section break */
  .mxd-hero-section--text-only + .mxd-section.padding-top-number {
    padding-top: 5.5rem;
  }
}