/* Portfolio hero: keep the title and photo in their own columns. */
.creative-portfolio .cs_site_header { background: #f4f4f4; }
.cs_hero.cs_style3.cs_bg_color {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text photo";
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 148px 0 64px;
  min-height: 720px;
  z-index: 0;
}
.cs_hero.cs_style3.cs_bg_color > .container {
  grid-area: text;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-left: max(24px, calc((100vw - 1320px) / 2));
  padding-right: 0;
}
.cs_hero.cs_style3.cs_bg_color .cs_banner_img {
  grid-area: photo;
  position: relative;
  display: block;
  width: auto;
  height: 100%;
  min-height: 440px;
  margin-right: max(24px, calc((100vw - 1320px) / 2));
}
.cs_hero.cs_style3.cs_bg_color .cs_banner_img img { display: block; object-fit: cover; }
.cs_hero.cs_style3.cs_bg_color .cs_hero_text { position: relative; padding: 0; }
.cs_hero.cs_style3.cs_bg_color .cs_hero_text .cs_hero_title,
.cs_hero.cs_style3.cs_bg_color .cs_hero_text .cs_hero_subTitle {
  font-size: clamp(34px, 4.5vw, 70px);
  line-height: 1.1;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.cs_hero.cs_style3.cs_bg_color .cs_hero_text .cs_hero_p {
  width: auto;
  max-width: 44ch;
  margin: 28px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.75;
}

/* Modern needs: fluid columns and a caption below the photograph. */
.cs_modern_needs.cs_style {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
}
.cs_modern_needs.cs_style > div { min-width: 0; }
.cs_modern_needs.cs_style .cs_section_title { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; }
.cs_modern_needs.cs_style .cs_height_65 { height: 28px; }
.cs_modern_needs.cs_style .cs_height_85 { height: 36px; }
.cs_modern_needs.cs_style .cs_col_md_778 .cs_text p { max-width: none; margin: 0; font-size: 18px; line-height: 1.75; }
.cs_modern_needs.cs_style .cs_col_md_778 > .row { row-gap: 24px; }
.cs_modern_needs.cs_style .cs_col_md_778 > .row > div { border-top: 1px solid #ddd; padding-top: 18px; }
.cs_modern_needs.cs_style .cs_col_md_778 > .row h6 { font-size: 21px; margin-bottom: 12px; }
.cs_modern_needs.cs_style .cs_col_md_778 > .row p { font-size: 16px; line-height: 1.65; margin: 0; }
.cs_modern_needs.cs_style .cs_col_md_672 .cs_img_section > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cs_modern_needs.cs_style .cs_col_md_672 .cs_img_section .cs_img_card_text {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  padding: 28px;
}
.cs_modern_needs.cs_style .cs_img_card_text h6 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }
.cs_modern_needs.cs_style .cs_img_card_text p { font-size: 17px; line-height: 1.7; margin: 0; }

/* Journey photos are inline accents, with consistent size and line spacing. */
.cs_journey_stary { display: block; max-width: 1080px; }
.cs_journey_stary .cs_height_50 { height: 32px; }
.cs_journey_stary h2.cs_line_height_85 { font-size: clamp(28px, 3.4vw, 50px); line-height: 1.55; margin: 0; }
.cs_journey_stary h2 span { display: inline; }
.cs_journey_stary h2 img {
  display: inline-block;
  width: clamp(80px, 8vw, 120px);
  height: clamp(48px, 5vw, 72px);
  object-fit: cover;
  vertical-align: middle;
  margin: 0 8px;
  border-radius: 6px;
}

/* Recent projects: two leading cards followed by three smaller cards. */
.project_successfull {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-flow: row;
  gap: 24px;
}
.project_successfull > .cs_portfolio { grid-column: span 2; grid-row: auto; min-width: 0; aspect-ratio: 4 / 3; }
.project_successfull > .cs_portfolio:nth-child(-n+2) { grid-column: span 3; }
.project_successfull .cs_portfolio .cs_portfolio_img { height: 100%; width: 100%; }
.project_successfull .cs_portfolio .cs_portfolio_img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.project_successfull .cs_portfolio .cs_portfolio_overlay { inset: 0; opacity: 1; transform: none; background: linear-gradient(transparent 35%, rgba(0,0,0,.78)); }
.project_successfull .cs_portfolio .cs_portfolio_info { bottom: 0; opacity: 1; padding: 24px; }
.project_successfull .cs_portfolio .cs_portfolio_title { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; }
.project_successfull .cs_portfolio .cs_portfolio_subtitle { font-size: 15px; }
.elementor-widget-title-subtitle2:has(.project_successfull) .cs_section_title { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.2; }
.elementor-widget-title-subtitle2:has(.project_successfull) .cs_height_100 { height: 64px; }

@media (max-width: 991px) {
  .cs_hero.cs_style3.cs_bg_color { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "photo"; min-height: 0; padding: 140px 0 48px; gap: 32px; }
  .cs_hero.cs_style3.cs_bg_color > .container { padding: 0 24px; }
  .cs_hero.cs_style3.cs_bg_color .cs_banner_img { min-height: 0; height: 360px; margin: 0 24px; }
  .cs_modern_needs.cs_style { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs_modern_needs.cs_style .cs_col_md_672 .cs_img_section > img { max-height: 440px; }
  .project_successfull { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .project_successfull > .cs_portfolio,
  .project_successfull > .cs_portfolio:nth-child(-n+2) { grid-column: auto; }
}
@media (max-width: 575px) {
  .cs_hero.cs_style3.cs_bg_color { padding-top: 120px; }
  .cs_hero.cs_style3.cs_bg_color .cs_banner_img { height: 280px; }
  .cs_journey_stary h2 img { margin: 0 4px; }
  .project_successfull { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project_successfull .cs_portfolio .cs_portfolio_info { padding: 20px; }
  .elementor-widget-title-subtitle2:has(.project_successfull) .cs_height_100 { height: 40px; }
}