/* Site-wide custom overrides layered on top of the exported Webflow CSS.
   Loaded after the Webflow stylesheet on every page. */

/* Remove the "Made in Webflow" badge Webflow's runtime JS injects. */
.w-webflow-badge,
#webflow-badge {
  display: none !important;
}

/* ---- Home hero: the lottie animation fills its column edge-to-edge (no
   forced width on the column itself, which was overflowing and clipping a
   sliver on the right), the section grows to fit the hero copy instead of
   scrolling internally, and the two columns line up on a shared center. ---- */
.section-home-hero-2.home {
  height: auto;
  min-height: 60vh;
  overflow: visible;
}

.home-hero_content.home {
  height: auto;
  max-height: none;
  align-items: stretch;
  margin-right: 0 !important;
}

/* Webflow adds an asymmetric right-only padding to this class at some
   breakpoints (no matching left padding) -- it's what was leaving a strip
   on the right of the hero and throwing the footer off-center below. */
.section-anchor-2 {
  padding-right: 0;
}

.section-home-hero-2.home .home-hero_top {
  position: static;
  overflow: visible;
  height: auto;
  max-height: none;
  align-self: center;
}

.section-home-hero-2.home .home-hero_image,
.section-home-hero-2.home .home-hero_image.clickable-off {
  position: relative;
  height: auto;
  min-height: 420px;
  align-self: stretch;
  padding: 0 !important;
}

.section-home-hero-2.home .home-hero_image-height,
.section-home-hero-2.home .lottie-animation-3 {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  display: flex;
  overflow: hidden;
}

.section-home-hero-2.home .lottie-animation-3 > *,
.section-home-hero-2.home .lottie-animation-3 svg,
.section-home-hero-2.home .lottie-animation-3 canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ---- Projects grid (Design + Art sections): a real responsive grid of the
   button cards themselves (the markup no longer groups them into Webflow's
   fixed-width float columns), so they land in even rows with equal gaps in
   every direction. ---- */
#design .content-list.w-row,
#art .content-list.w-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 0;
}

#design .content-list.w-row {
  grid-template-columns: repeat(2, 1fr);
}

/* Webflow's own clearfix pins .w-row::before/::after to grid-area 1/1/2/2
   (its own grid feature reserves that cell for them). Since these grids are
   opted in above but weren't authored by Webflow's grid tool, the pseudo
   elements still claim the first cell and bump every real card over by one
   slot, leaving a phantom gap in the top-left corner. Drop them so the cards
   themselves fill the grid from the top-left. */
#design .content-list.w-row::before,
#design .content-list.w-row::after,
#art .content-list.w-row::before,
#art .content-list.w-row::after {
  content: none;
}

#design .content-list.w-row,
#art .content-list.w-row {
  align-items: stretch;
}

#design .content-item,
#art .content-item {
  float: none;
  padding: 0;
  width: 100%;
  display: flex;
}

#design .content-item > a,
#art .content-item > a {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media screen and (max-width: 991px) {
  #art .content-list.w-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  #art .content-list.w-row {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  #design .content-list.w-row {
    grid-template-columns: 1fr;
  }
}

/* Reserve the same title height on every card (up to 2 lines) so every
   thumbnail starts at the same Y position -- otherwise a title that wraps
   to a second line pushes just that one image down and the row looks
   unbalanced. */
#design .project-title,
#art .project-title {
  min-height: 2.6rem;
  display: flex;
  align-items: flex-end;
}

/* Project thumbnails (Design + Art buttons): a consistent aspect ratio with
   a true cover-fit crop, so nothing looks cut off, stretched or warped at
   any size -- this also patches image-13/image-41, which Webflow never
   gave a base width/height/object-fit rule at all. */
#design .project-img,
#art .project-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

#design .project-img img,
#art .project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

/* ---- Case-study hero images (Rise & Shine / AIR Guatemala): fill the
   panel completely, no letterboxed gap on any side. An explicit height on
   the section (instead of a bare min-height against auto-height parents)
   removes the ambiguity that was letting the image fall back to its
   natural size. ---- */
.section-anchor-2 > .section-home-hero-2:not(.home) {
  height: 60vh;
  min-height: 60vh;
}

.section-anchor-2 > .section-home-hero-2:not(.home) .home-hero_content {
  height: 100%;
}

.hero-bg {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  align-items: stretch;
}

.hero-img,
.hero-img_container {
  width: 100% !important;
  height: 100%;
  margin-top: 0;
  display: flex;
}

.hero-img img,
.hero-img_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* AIR Guatemala hero: square off the bottom corners so the page's yellow
   background can't peek through the rounding. */
.page-air-guat .section-home-hero-2 {
  border-radius: 1rem 1rem 0 0;
}

/* Case-study body images: crop instead of stretch whenever a fixed height
   and a clamped width disagree (the source of the "warped" look). This is
   a safety net for images outside the img_grid galleries below. */
.faq-list img {
  object-fit: cover;
}

/* Case-study image galleries (the multi-photo grids further down each
   write-up): each photo gets its own padded card and keeps its natural
   aspect ratio -- no cropping, no stretching, fully responsive. */
.section-faq-2.project .cell-img_grid {
  height: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-faq-2.project .cell-img_grid img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 0.5rem;
}

/* ---- Painting sub-pages: simple placeholder gallery grid ---- */
.placeholder-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
}

.placeholder-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

@media screen and (max-width: 479px) {
  .placeholder-gallery {
    grid-template-columns: 1fr;
  }
}

/* ---- Art/painting pages: the nav bar stays correctly sized and on top at
   every scroll position, the text panel stays locked in place, and only
   the image gallery scrolls -- applies to every painting page since they
   all share this markup. ---- */
.section-2.painting .nav-bar.painting {
  position: sticky;
  top: 0;
  z-index: 1200;
  height: 3.2rem;
  border-radius: 1rem 1rem 0 0;
}

.section-2.painting .flex-block-15 {
  display: flex;
  align-items: flex-start;
  position: static;
}

.section-2.painting .home-hero_image.clickable-off.guacamaya {
  width: 50%;
  flex: 0 0 50%;
  position: sticky;
  top: 3.2rem;
  align-self: flex-start;
  height: calc(100vh - 3.2rem);
  overflow-y: auto;
}

.section-2.painting .flex-block-17 {
  width: 50%;
  flex: 0 0 50%;
}

@media screen and (max-width: 767px) {
  .section-2.painting .flex-block-15 {
    flex-direction: column;
  }

  .section-2.painting .home-hero_image.clickable-off.guacamaya,
  .section-2.painting .flex-block-17 {
    width: 100%;
    flex: 1 0 auto;
    position: static;
    height: auto;
    overflow-y: visible;
  }
}