*, *::before, *::after {
  box-sizing: border-box;
}

:root{
  --case-bg: #F9F9FA;
  --case-text: #000000;
  --case-accent: #067E8B;
  --case-cards-background: #FFF;
  --case-cards-border: rgba(248, 248, 248, 0.1);

}

.case-gls{
  --case-bg: #1C2756;
  --case-text: #FFFFFF;
  --case-accent: #1FA0AE;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: rgba(248, 248, 248, 0.1);
}

.case-glsresult{
  --case-bg: #1C2756;
  --case-text: #FFFFFF;
  --case-accent: #1FA0AE;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: #0B8693;
}

.case-esa{
  --case-bg: #173D5D;
  --case-text: #FFFFFF;
  --case-accent: #32B4C2;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: rgba(248, 248, 248, 0.1);
}

.case-esaresult{
  --case-bg: #173D5D;
  --case-text: #FFFFFF;
  --case-accent: #32B4C2;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: #0B8693;
}

.case-leasys{
  --case-bg: #175278;
  --case-text: #FFFFFF;
  --case-accent: #12D2E6;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: rgba(248, 248, 248, 0.1);
}

.case-leasysresult{
  --case-bg: #175278;
  --case-text: #FFFFFF;
  --case-accent: #12D2E6;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: #0B8693;
}

.phone-frame{
  display: inline-block;
  background: #0a0a0a;
  padding: 10px;
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  max-width: 320px;
}
.phone-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
}

/* --- Sforzando session-flow phone slideshow --- */
.seq-phone{
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #0a0a0a;
  padding: 10px;
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.seq-screen{
  border-radius: 32px;
  overflow: hidden;
  background: #050406;
}
.seq-statusbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 22px 0 24px;
  background: #050406;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.seq-time{
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.seq-icons{
  display: flex;
  align-items: center;
  gap: 6px;
}
.seq-icons svg{ display: block; }
.seq-battery{
  position: relative;
  width: 22px;
  height: 11px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 3px;
  padding: 1.5px;
  display: inline-block;
}
.seq-battery::after{
  content: "";
  position: absolute;
  right: -3px;
  top: 3.5px;
  width: 2px;
  height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 0 1px 1px 0;
}
.seq-battery-fill{
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 1.5px;
}
.seq-stack{
  position: relative;
  width: 100%;
  padding-bottom: 199.6%; /* 1341/672 aspect ratio */
  overflow: hidden;
  background: #000;
}
.seq-stack img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.seq-stack img.active{ opacity: 1; }

.seq-controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.seq-play{
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 8, 12, 0.6);
  border: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.seq-play:hover{ background: rgba(10, 8, 12, 0.85); }
.seq-dots{
  display: flex;
  gap: 6px;
}
.seq-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s ease;
}
.seq-dot.active{ background: #fff; }

.case-sforzando{
  --case-bg: #1F112D;
  --case-text: #FFFFFF;
  --case-accent: #E8A28A;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: rgba(248, 248, 248, 0.1);
}

.case-sforzandoresult{
  --case-bg: #1F112D;
  --case-text: #FFFFFF;
  --case-accent: #E8A28A;
  --case-cards-background: rgba(255, 255, 255, 0.05);
  --case-cards-border: #6B3247;
}

[hidden] { display: none !important; }

Html, body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background: #FFFFFF;
overflow-x: hidden;
scroll-behavior: smooth;
}

/* ------------------------------------ Menu ------------------------------------ */


.site-header{
position: sticky;
top: 0;
z-index: 1000;  
width: 100%;
padding: 16px 20px; /* <= 20px from borders on small screens */
}

@media (max-width: 420px){
.site-header{
padding: 16px 10px; 
}
}

.header-box{
max-width: 1600px;
margin: 0 auto;
border-radius: 10px;
background: rgba(255, 255, 255, 0.70);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
backdrop-filter: blur(20px);
}

/* INNER: max 1400 centered */
.header-inner{
  max-width: 1400px;
  margin: 0 auto;

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

  padding: 0 20px;           /* inner breathing room */
  min-height: 64px;
}




/* Brand */
.brand{
text-decoration: none;
color: #080808;
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;

}

.brand-light{ font-weight: 400; }

.brand::after {
content: ".";
color: #0B8693;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 0px;
letter-spacing: -1.6px;
}



/* Desktop menu */
.nav-list{
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}
.nav-list a{
text-decoration: none;
color: #040404;
text-align: center;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 2.1px;
}

/* Hamburger hidden on desktop */
.nav-toggle{
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 900px){
.main-nav{ display: none; }
.nav-social{ display: none;}
.nav-toggle{ display: inline-flex; }
}

/* ------------------------------------ Menu Overlay ------------------------------------ */

.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.02);

  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}

.menu-overlay.is-open{
  opacity: 1;
  visibility: visible;
border-radius: 10px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
backdrop-filter: blur(5px);
}


.mobile-menu{
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1000;

  background: #fff;
  border-radius: 16px;

  display: flex;
  flex-direction: column;


  /* start closed */
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top right; /* <-- grows from burger side */
  visibility: hidden;

  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  will-change: transform, opacity;
}

@media (max-width: 420px){
.mobile-menu{
  top: 20px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
}

.mobile-menu.is-open{
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}

.mobile-menu__top{
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;


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

  padding: 0 20px;           /* inner breathing room */
  min-height: 64px;
}

.menu-close{
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}
.menu-close img{ display:block; width: 22px; height: 22px; }

.mobile-menu__nav{
  display: flex;
  flex-direction: column;
  gap: 40px;
Margin: 80px 40px;
}

.mobile-menu__nav a{
  text-decoration: none;
color: #040404;
text-align: left;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 4.8px;
}

.mobile-menu__linkedin{
  margin-top: auto;          /* pushes it to bottom */
Padding: 20px;

  display: inline-flex;
  align-items: center;
  gap: 0px;
  text-decoration: none;
  color: #000;
  font-weight: 500;
}

.mobile-menu__linkedin span{
margin-top: 11px;
}


.mobile-menu__linkedin img{ width: 48px; height: 48px; display:block; }


/* ------------------------------------ Breadcrumb ------------------------------------ */

.breadcrumb .container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 20px 0;

  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb ol{
 display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}

.breadcrumb a{
color: #000;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-color: #0B8693;
text-decoration-thickness: 8%; /* 0.96px */
text-underline-offset: 25%; /* 3px */
text-underline-position: from-font;
}

.breadcrumb a:hover{
  text-decoration:underline;
}

.breadcrumb-home img{
width: 19px;
height: 16.5px;
  vertical-align: middle;

}

.separator{
color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 2.1px;
}

.current{
color: #000;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

/* ------------------------------------ Hero ------------------------------------ */


.hero {
display: flex;
padding: 300px 40px 0px 40px;
justify-content: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

@media (max-width:1268px) {
.hero {
padding: 200px 40px 0px 40px;
}
}

@media (max-width:768px) {
.hero {
padding: 140px 40px 0px 40px;
}
}

@media (max-width:600px) {
.hero {
padding: 120px 24px 0px 24px;
}
}

.hero-container {
display: flex;
width: 1200px;
padding: 0 0px 120px 0px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}

h1 {
margin-top: 0px;
margin-bottom: 0px;
color: #000;
font-family: Montserrat;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 78px; /* 121.875% */
letter-spacing: -1.28px;
}

h1::after {
content: ".";
color: #0B8693;
font-family: Montserrat;
font-size: 80px;
font-style: normal;
font-weight: 800;
line-height: 78px;
letter-spacing: -1.6px;
}

.hero-role {
color: #000;
font-family: Montserrat;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 78px;
letter-spacing: -1.28px;
}

P {
margin-top: 0px;
margin-bottom: 0px;
color: var(--case-text);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 180% */
}

.statement{
color: #000;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 30px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-color: #0B7993;
text-decoration-thickness: 8%;
text-underline-offset: 20%;
text-underline-position: from-font;
}

@media (max-width:768px) {
h1 {
font-size: 56px;
line-height: 70px;
}

h1::after {
font-size: 70px;
line-height: 30px;
}

.hero-role {
font-size: 56px;
line-height: 70px;
}

P {
font-size: 16px;
line-height: 28px;

}

.statement{
font-size: 16px;
line-height: 28px;
}

}


@media (max-width:550px) {
h1 {
font-size: 48px;
line-height: 60px;
}

h1::after {
font-size: 70px;
line-height: 30px;
}

.hero-role {
font-size: 48px;
line-height: 60px;
}

P {
font-size: 14px;
line-height: 24px;

}

.statement{
font-size: 14px;
line-height: 24px;
}

}

.cta-main {
border-radius: 12px;
background: #000000;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
display: flex;
width: 235px;
height: 44px;
padding: 0 30px;
justify-content: center;
align-items: center;
gap: 10px;
color: #FFF;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none;
}

#cases{
  scroll-margin-top: 80px;
}
/* ------------------------------------ Approach ------------------------------------ */


.approach {
display: flex;
padding: 150px 50px 100px 50px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
background: var(--case-bg);
 clip-path: polygon(
    0 10%,
    100% 0,
    100% 100%,
    0 100%
  );
}

@media (max-width:950px) {
.approach {
clip-path: polygon(
    0 4%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

@media (max-width:550px) {
.approach {
clip-path: polygon(
    0 2%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

.approach-container {
Margin-top: 50px;
display: flex;
width: 100%;
max-width: 1200px;
Padding:  0 40px;
justify-content: space-between;
gap: 20px;
align-items: center;
}

@media (max-width:1150px) {
.approach-container {
flex-direction: column;
gap: 100px;
Margin-top: 40px;

  }
}

@media (max-width:768px) {
.approach-container {
Padding:  0 10px;

  }
}

@media (max-width:550px) {
.approach-container {
gap: 40px;

  }
}


#space  {
Margin-top: 80px;
}

@media (max-width:1150px) {
#space {
Margin-top: 30px;
  }
}

.services-grid .cards:nth-child(2),
.services-grid .cards:nth-child(4){
  transform: translateY(-60px);
}

h2 {
margin-top: 0px;
margin-bottom: 0px;
color: var(--case-accent);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 3.2px;
}


h3 {
margin-top: 0px;
margin-bottom: 0px;
color: var(--case-text);
font-family: Montserrat;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 78px; /* 121.875% */
}


h3::after {
content: ".";
color: #0B8693;
font-family: Montserrat;
font-size: 80px;
font-style: normal;
font-weight: 900;
line-height: 78px;
}

.h3-highlight {
color: var(--case-text);
font-family: Montserrat;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 78px;
}

@media (max-width:7680px) {
h3 {
font-size: 56px;
line-height: 70px;
}

h3::after {
font-size: 70px;
line-height: 30px;
}

.h3-highlight {
font-size: 56px;
line-height: 70px;
}

}


@media (max-width:550px) {
h3 {
font-size: 48px;
line-height: 60px;
}

h3::after {
font-size: 70px;
line-height: 30px;
}

.h3-highlight {
font-size: 48px;
line-height: 60px;
}

}

.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 50%;
align-items: flex-start;
gap: 15px;
flex-shrink: 0;
}


@media (max-width:1150px) {
.services-grid  {
width: 100%;
  }
}

@media (max-width:650px) {
.services-grid .cards:nth-child(2),
.services-grid .cards:nth-child(4){
  transform: none;
}
}

.services-carousel-controls{
  display: none;
}

@media (max-width:650px) {
.services-grid  {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
  padding-bottom: 4px;
  /* bleed to the screen edges within the 24px-padded section */
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  /* hide native scrollbar — navigation is via arrows/dots */
  scrollbar-width: none;
}
.services-grid::-webkit-scrollbar{ display: none; }
.services-grid .cards{
  flex: 0 0 90%;
  scroll-snap-align: center;
}

.services-carousel-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 11px;
}
.carousel-arrow{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--case-cards-border, rgba(0,0,0,0.15));
  background: #fff;
  color: var(--case-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.carousel-arrow:disabled{
  opacity: 0.3;
  cursor: default;
}
.carousel-dots{
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  transition: background 0.25s ease, transform 0.25s ease;
}
.carousel-dot.active{
  background: var(--case-accent, #067E8B);
  transform: scale(1.25);
}

/* Dark case backgrounds — use white/gray controls for visibility */
.case-sforzando .carousel-arrow,
.case-esa .carousel-arrow,
.case-gls .carousel-arrow,
.case-leasys .carousel-arrow{
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.case-sforzando .carousel-arrow:disabled,
.case-esa .carousel-arrow:disabled,
.case-gls .carousel-arrow:disabled,
.case-leasys .carousel-arrow:disabled{
  opacity: 0.35;
}
.case-sforzando .carousel-dot,
.case-esa .carousel-dot,
.case-gls .carousel-dot,
.case-leasys .carousel-dot{
  background: rgba(255,255,255,0.35);
}
.case-sforzando .carousel-dot.active,
.case-esa .carousel-dot.active,
.case-gls .carousel-dot.active,
.case-leasys .carousel-dot.active{
  background: #fff;
}
}

h4, h5{
margin-top: 0px;
margin-bottom: 0px;
color: var(--case-text);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 25px;
}

.small-p {
color: var(--case-text);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}

.cards  {
display: flex;
padding: 60px 36px 30px 36px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 12px;
align-self: stretch;

border-radius: 24px;
border: 1.5px solid var(--case-cards-border);
background: var(--case-cards-background);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}


/* ------------------------------------ Value ------------------------------------ */


.thevalue {
display: flex;
padding-top: 120px;
Padding-bottom: 120px;
justify-content: center;
}

.thevalue-container {
max-width: 1100px;
display: flex;
padding: 0 80px 40px 80px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}


@media (max-width:768px) {
.thevalue {
padding: 120px 24px 80px 24px;
}

.thevalue-container {
padding: 0 0 40px 0;
width: 100%;
}

}



.thevalue-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
Padding-top: 80px;
gap: 30px;
}


@media (max-width: 900px) {
  .thevalue-grid {
    grid-template-columns: 1fr;
  }
}


.value{
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}

.bigger-title{
color: var(--case-text);
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.highlight-bigger-title{
color: var(--case-text);
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

#number{
color: #949494;
font-family: Montserrat;
font-size: 34px;
font-style: normal;
font-weight: 700;
}

/* ------------------------------------ Projects ------------------------------------ */

.projects {
display: flex;
justify-content: center;
flex-direction: column;
align-self: stretch;
}

.project-header {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 0 70px 40px 70px;
flex-direction: column;
align-items: flex-start;
}

@media (max-width:1268px) {
.project-header {
padding: 150px 60px 0px 60px;
}
}

@media (max-width:768px) {
.project-header {
padding: 150px 40px 0px 40px;
}
}

.project-container {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
background: #0B7B86;
 clip-path: polygon(
    0 10%,
    100% 0,
    100% 100%,
    0 100%
  );
}

@media (max-width:950px) {
.project-container {
clip-path: polygon(
    0 4%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

@media (max-width:550px) {
.project-container {
clip-path: polygon(
    0 2%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

.project-password {
display: flex;
max-width: 800px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
align-self: stretch;
margin: 250px auto 80px;
}

@media (max-width:1100px) {
.project-password {
margin: 150px auto 40px;
Padding: 0 80px;
}
}


@media (max-width:1024px) {
.project-password {
margin: 120px auto 40px;
max-width: 600px;

}
}

@media (max-width:768px) {
.project-password {
padding: 70px 60px 20px 60px;
}
}

#white-text {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 180% */
Max-width: 800px;
}

@media (max-width:768px) {
#white-text {
font-size: 18px;
line-height: 32px;
}
}


.projects-previews img{
 display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
padding: 00px 40px;

}




/* ------------------------------------ Clients ------------------------------------ */

.client {
display: flex;
padding: 200px 40px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
}


.clients-container {
Margin: 0 auto;
display: flex;
width: 100%;
max-width: 1200px;
justify-content: space-between;
gap: 80px;
align-items: center;
Padding:0 40px;
}

@media (max-width:768px) {
.clients-container{
flex-direction: column;
gap: 40px;
Padding:0 0px;

}
}

#space-text{
Margin-top: 40px;
}


.chips-list{
 display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  list-style: none;
  padding: 0;
margin: 0;

}

@media (max-width:768px) {
.chips-list{
  justify-content: flex-start;
Width: 80%;
}
}

.chip{
  padding: 8px 20px;
border-radius: 20px;
border: 1px solid #EFEFEF;
background: #F7F7F7;
  font-size: 14px;
  font-weight: 500;
  color: #6B6B6B;
}


/* ------------------------------------ About ------------------------------------ */

.about-avatar{
width:158px;
height:158px;
border-radius:50%;
object-fit:cover;
margin-bottom:0px;
}

.who {
display: flex;
padding: 200px 40px 50px 40px;
justify-content: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

@media (max-width:768px) {
.who {
padding: 70px 70px 0px 70px;
}
}

.who-container {
display: flex;
width: 1200px;
padding: 0 300px 40px 0px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}

@media (max-width:1400px) {
.who-container {
padding: 0 150px 40px 0px;
}
}

@media (max-width:1000px) {
.who-container {
padding: 0 30px 40px 0px;
}
}

.culture {
display: flex;
padding: 150px 20px;
justify-content: center;
align-items: center;
align-self: stretch;
}

.culture-container {
width: 1240px;
display: flex;
padding: 50px 200px 50px 200px;
flex-direction: column;
align-items: center;
align-self: stretch;
text-align: center;
gap: 30px;
}

@media (max-width:1000px) {
.culture-container {
padding: 50px 100px 50px 100px;
}
}

@media (max-width:700px) {
.culture-container {
padding: 50px 40px 50px 40px;
}
}



.industrial {
display: flex;
padding: 150px 70px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
}

.industrial-container {
width: 1200px;
display: flex;
padding: 50px 180px 50px 100px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
gap: 30px;
}

@media (max-width:1000px) {
.industrial-container {
padding: 0 50px 40px 0px;
}
}


.how {
display: flex;
padding: 150px 40px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
}

.how-container {
display: flex;
width: 1200px;
padding: 0 300px 40px 40px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}


@media (max-width:1400px) {
.how-container {
padding: 0 150px 40px 0px;
}
}

@media (max-width:1000px) {
.how-container {
padding: 0 100px 40px 100px;
align-items: center;
text-align: center;
}
}

@media (max-width:700px) {
.how-container {
padding: 50px 30px 50px 30px;
}
}

.beyond {
display: flex;
padding: 150px 20px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
}

.beyond-container {
display: flex;
width: 1200px;
padding: 50px 40px 100px 450px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}

@media (max-width:1400px) {
.beyond-container {
padding: 50px 0px 100px 300px;
}
}

@media (max-width:1000px) {
.beyond-container {
padding: 0 70px 40px 70px;
}
}

@media (max-width:700px) {
.beyond-container {
padding: 50px 50px 50px 50px;
}
}

/* ------------------------------------ Contact ------------------------------------ */

.contact {
display: flex;
padding: 200px 40px 160px 40px;
justify-content: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.contact-container {
display: flex;
width: 1200px;
padding: 0 300px 40px 0px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}

@media (max-width:1400px) {
.contact-container {
padding: 0 150px 40px 0px;
}
}

@media (max-width:1000px) {
.contact-container {
padding: 0 50px 40px 0px;
}
}

/* ------------------------------------ Case Studies ------------------------------------ */

.cases{
  width: 100%;
 Margin-top: 80px;
 Margin-bottom: 150px;
  padding: 120px 40px 0 40px;
 clip-path: polygon(
    0 10%,
    100% 0,
    100% 100%,
    0 100%
  );
}

@media (max-width:950px) {
.cases{
clip-path: polygon(
    0 4%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

@media (max-width:550px) {
.cases{
clip-path: polygon(
    0 2%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}


.cases--gls{
  background: #1C2756;
}

.cases--esa{
  background:#173D5D;
}

.cases--leasys{
  background:#175278;
}

.leasys-previews{
  position: relative;
  display: block !important;
  width: 100%;
  overflow: visible;
}
.leasys-previews img.leasys-preview{
  width: 42%;
  height: auto;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  display: block;
}
.leasys-preview--01{ position: relative; margin-left: 58%; z-index: 3; }
.leasys-preview--02{ position: absolute; left: 29%; bottom: 0; z-index: 2; }
.leasys-preview--03{ position: absolute; left: 0;   bottom: 0; z-index: 1; }

@media (max-width: 600px){
  .leasys-previews img.leasys-preview{ width: 52%; }
  .leasys-preview--03{ display: none; }
  .leasys-preview--01{ margin-left: 48%; }
  .leasys-preview--02{ left: 0; bottom: 0; }
}

.esa-previews{
  position: relative;
  display: block !important;
  width: 100%;
  overflow: visible;
}
.esa-previews img.esa-preview{
  width: 42%;
  height: auto;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  display: block;
}
.esa-preview--01{ position: relative; margin-left: 58%; z-index: 3; }
.esa-preview--02{ position: absolute; left: 29%; bottom: 0; z-index: 2; }
.esa-preview--03{ position: absolute; left: 0;   bottom: 0; z-index: 1; }

@media (max-width: 600px){
  .esa-previews img.esa-preview{ width: 52%; }
  .esa-preview--03{ display: none; }
  .esa-preview--01{ margin-left: 48%; }
  .esa-preview--02{ left: 0; bottom: 0; }
}

.gls-previews{
  position: relative;
  display: block !important;
  width: 100%;
  overflow: visible;
}
.gls-previews img.gls-preview{
  width: 42%;
  height: auto;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  display: block;
}
.gls-preview--01{ position: relative; margin-left: 58%; z-index: 3; }
.gls-preview--02{ position: absolute; left: 29%; bottom: 0; z-index: 2; }
.gls-preview--03{ position: absolute; left: 0;   bottom: 0; z-index: 1; }

@media (max-width: 600px){
  .gls-previews img.gls-preview{ width: 52%; }
  .gls-preview--03{ display: none; }
  .gls-preview--01{ margin-left: 48%; }
  .gls-preview--02{ left: 0; bottom: 0; }
}

.sforzando-previews{
  position: relative;
  display: block !important;
  width: 100%;
  overflow: visible;
}
.sforzando-previews img.sforzando-preview{
  width: 42%;
  height: auto;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.45);
  display: block;
}
.sforzando-preview--01{ position: relative; margin-left: 58%; z-index: 3; }
.sforzando-preview--02{ position: absolute; left: 29%; bottom: 0; z-index: 2; }
.sforzando-preview--03{ position: absolute; left: 0;   bottom: 0; z-index: 1; }

@media (max-width: 600px){
  .sforzando-previews img.sforzando-preview{ width: 52%; }
  .sforzando-preview--03{ display: none; }
  .sforzando-preview--01{ margin-left: 48%; }
  .sforzando-preview--02{ left: 0; bottom: 0; }
}

.cases--sforzando{
  background:#1F112D;
}

.project01-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 0px 20px 0px 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;

}

.summary {
display: flex;
width: 900px;
padding: 50px 0 50px 135px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
}

@media (max-width:1100px) {
.summary {
padding: 0px 100px 50px 50px;
width: 100%;
}
}

@media (max-width:768px) {
.summary {
padding: 0px 0px 50px 0px;
width: 100%;
}
}



.project__tag{
display: flex;
padding: 8px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
border: 0.5px solid #FFF;

color: #FFF;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#case-text {
color: #FFF;
font-family: Montserrat;
font-size: 34px;
font-style: normal;
font-weight: 400;
line-height: 40px;
}

#case-bold {
color: #FFF;
font-family: Montserrat;
font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: 28px; /* 82.353% */
}

#case-explanation {
color: #FFF;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 36px; /* 166.667% */
}

@media (max-width:768px) {
#case-explanation {
font-size: 16px;
line-height: 30px;
}
}

.case-hero__link {
text-decoration: none;
color: #FFF;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

/* ------------------------------------ Project pages - 01 ------------------------------------ */


/* ------------------------------------ Hero ------------------------------------ */

.case-hero-image{
  width: 720px;
  height: auto;
}

.case-hero-image img{
  display: block;
   width: 720px;
  max-width: none;
  height: auto;
  object-fit: cover;
}

.case-hero{
  padding: 100px 40px;
}

@media (max-width:1000px) {
.case-hero{
padding: 70px 40px;
}
}

@media (max-width:768px) {
.case-hero{
  padding: 60px 40px;
}
}

@media (max-width:600px) {
.case-hero{
  padding: 50px 24px;
}
}


.case-hero h1{
  margin-top: 0;
  margin-bottom: 40px;
}

.case-hero-container{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 700px  700px;
  align-items: center;
}


@media (max-width:1000px) {
.case-hero-container{
  grid-template-columns:1fr;
Gap: 40px;
}
}

.case-hero-content{
  width: 100%;
transform: translateY(-40px);
}

@media (max-width:1000px) {
.case-hero-content{
transform: none;
}
}



.case-hero-image{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.case-hero-image img{
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  object-fit: contain;
}

@media (max-width:1000px) {
.case-hero-image img{
margin: 0 auto;
}
}

.case-meta{
  margin-top:40px;
  display:flex;
  align-items:center;
  gap:12px;

  font-size:14px;
  letter-spacing:.08em;
}

.case-role{
color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.divider{
stroke-width: 0.5px;
stroke: #000;
}

.case-duration{
color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.brand-project {
color: #000;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 3.2px;
}

.case-brand{
  display: flex;
  align-items: center;
  gap: 16px;
Margin-bottom: 10px;
}

.case-brand .project__tag--logistics{
display: flex;
padding: 8px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
border: 0.5px solid #000;

color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* ------------------------------------ Discovery ------------------------------------ */


.discovery-list{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.discovery-item{
  border-left: 3px solid #0B8693;
  padding-left: 14px;
}

.discovery{
  padding: 180px 40px 120px 40px;
}

.discovery-container{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}


@media (max-width: 999px) {
.discovery-container{
    grid-template-columns: 1fr;
    gap: 48px;
}
}

@media (max-width: 600px) {
.discovery{
    padding-left: 24px;
    padding-right: 24px;
}
.discovery-intro h3{
    font-size: 40px;
    line-height: 48px;
    overflow-wrap: anywhere;
}
}


.discovery-intro{
  display: flex;
  flex-direction: column;
}

/* ------------------------------------ Challenge ------------------------------------ */


.challenge-container{
  max-width: 900px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.challenge-text{
  display: flex;
  flex-direction: column;
  Gap: 20px;
}

/* ------------------------------------ Research - ESA ------------------------------------ */

.research-highlight{
  display: flex;
  flex-direction: column;
  gap: 40px;
width: 100%;
max-width: 1000px;
margin: 60px auto;
}

.research-card-right{
position: relative;
top: 0;
right: 0;
gap: 0px;
width: 50%;
padding: 32px 28px;
align-self: flex-end;
}

@media (max-width: 999px) {
.research-card-right{
width: 80%;
}
}

@media (max-width: 500px) {
.research-card-right{
width: 100%;
}
}


.research-card-left{
position: relative;
top: 0;
right: 0;
gap: 0px;
width: 50%;
padding: 32px 28px;
align-self: flex-start;
}

@media (max-width: 999px) {
.research-card-left{
width: 80%;
}
}

@media (max-width: 500px) {
.research-card-left{
width: 100%;
}
}

.research-number{
color: #0B8693;
font-family: Montserrat;
font-size: 60px;
font-style: normal;
font-weight: 600;
line-height: 78px; /* 130% */
}

.research-card h4{
  margin: 0;
}

.research-card .small-p{
  margin: 0;
}

.research-image{
  display: block;
  width: 100%;
  height: auto;
}

.ds-scroll{
  width: 100%;
}
.ds-scroll .research-image{
  width: 100%;
}
@media (max-width: 700px){
  .ds-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .ds-scroll .research-image{
    width: auto;
    height: 620px;
    max-width: none;
  }
}

.five-images{
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  width: 100%;
}
.five-images .research-image{
  flex: 1;
  width: 0;
  min-width: 0;
  height: auto;
}
@media (max-width: 700px){
  .five-images{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .five-images .research-image{
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
}

.two-images{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
gap: 12px;
width: 100%;
}


.two-images .research-image{
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 596px;
  object-fit: contain;
}

.research-figure{
  flex: 0 1 auto;
  width: auto;
  max-width: 48%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.two-images .research-figure .research-image{
  width: auto;
  height: auto;
  max-height: 596px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.35);
}
.research-figure figcaption{
  font-size: 13px;
  line-height: 1.4;
  color: var(--case-text);
  text-align: center;
}


@media (max-width: 700px) {
.two-images{
  flex-direction: row;
  align-items: flex-start;
  margin: 0 0;
width:100%;
  }

.two-images .research-figure{
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}
.two-images .research-figure .research-image{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.two-images .research-image{
  flex: 1;
width: 100%;
Height: auto;
}



}


/* ------------------------------------ Wireframe ------------------------------------ */


.wireframes-container{
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

figure {
  margin: 0;
}

.wireframes-images{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 700px) {
.wireframes-images{
    grid-template-columns: 1fr;
  margin: 0 30px;
  }
}

.wireframes-images img{
  width: 100%;
  height: auto;
  display: block;
}

.wireframes-caption{
color: #F1F1F2;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: italic;
font-weight: 300;
line-height: 36px; /* 225% */
}

.flow-images img{
  width: 100%;
  height: auto;
  display: block;
}


/* ------------------------------------ Result ------------------------------------ */

.section-intro{
  max-width: 1200px;
Padding: 0 40px;
  margin: 120px auto 300px;

}

/* ---------- GLS results collage ---------- */
.case-highlights--collage{
  background: #FFFFFF;
  overflow: hidden;
}
.case-collage{
  position: relative;
  max-width: 1400px;
  margin: 120px auto 0;
  padding: 0 40px;
  aspect-ratio: 1400 / 760;
  overflow: hidden;
}
.case-collage .collage-title{
  position: absolute;
  top: 0;
  left: 40px;
  z-index: 10;
  max-width: 780px;
}
.case-collage .collage-title h2{ margin-bottom: 10px; }
.case-col{
  position: absolute;
  width: 31%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 22px);
}
.case-col img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(4px, 0.7vw, 10px);
  box-shadow: 0 30px 70px -25px rgba(15, 23, 42, 0.35);
}
/* tops as % of the collage height so the whole stagger scales with width */
.case-col-left{  left: 0;     top: 44%;  z-index: 3; }
.case-col-mid{   left: 34.5%; top: 29%;  z-index: 2; }
.case-col-right{ left: 69%;   top: 5.5%; z-index: 1; }

/* Title scales with the viewport so it never overgrows the shrinking collage */
.case-collage .collage-title h2{
  font-size: clamp(11px, 1.1vw, 16px);
}
.case-collage .collage-title h3{
  line-height: 1.05;
}
/* readable title on the white collage background */
.case-highlights--collage .collage-title h3,
.case-highlights--collage .collage-title .h3-highlight{
  color: #16131E;
}

/* ---- 5-column collage variant (Sforzando) ---- */
.case-collage--5{
  aspect-ratio: 1400 / 900;
}
.case-collage--5 .case-col{
  width: 18%;
}
.c5-1{ left: 0;     top: 52%; z-index: 5; }
.c5-2{ left: 20.5%; top: 40%; z-index: 4; }
.c5-3{ left: 41%;   top: 28%; z-index: 3; }
.c5-4{ left: 61.5%; top: 16%; z-index: 2; }
.c5-5{ left: 82%;   top: 5%;  z-index: 1; }

@media (max-width: 1000px){
  .case-collage{
    margin: 80px auto 0;
    padding: 0 24px;
  }
  .case-collage .collage-title{
    left: 24px;
  }
}

/* Narrower screens: give the title room by making the collage taller and
   pushing the staggered images down, and let "some highlights." wrap to two lines. */
@media (max-width: 860px){
  .case-collage{
    aspect-ratio: 1400 / 1050;
  }
  .case-collage .collage-title{
    max-width: 240px;
  }
  .case-collage .collage-title h3{
    line-height: 1.1;
  }
  .case-col-left{  top: 66%; }
  .case-col-mid{   top: 50%; }
  .case-col-right{ top: 34%; }

  /* 5-column variant: taller + pushed down so the title clears the images,
     front column reaches the navy band */
  .case-collage--5{
    aspect-ratio: 1400 / 1050;
  }
  .c5-1{ top: 66%; }
  .c5-2{ top: 54%; }
  .c5-3{ top: 44%; }
  .c5-4{ top: 32%; }
  .c5-5{ top: 22%; }
}

/* Phone widths: title spans the full width at the top (same size as every other
   section title — it does NOT shrink), and the staggered columns sit below it,
   all bleeding into the navy band like desktop. */
@media (max-width: 600px){
  .case-collage .collage-title{
    max-width: none;
    left: 24px;
    right: 24px;
  }
  /* 3-column */
  .case-collage{ aspect-ratio: 1400 / 1400; }
  .case-col-right{ top: 46%; }
  .case-col-mid{   top: 58%; }
  .case-col-left{  top: 66%; }
  /* 5-column */
  .case-collage--5{ aspect-ratio: 1400 / 1300; }
  .c5-5{ top: 44%; }
  .c5-4{ top: 50%; }
  .c5-3{ top: 56%; }
  .c5-2{ top: 62%; }
  .c5-1{ top: 68%; }
}

.results {
  background: var(--case-bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.highlight {
  width: 100%;
  margin: 0 auto;
  padding: 150px 0px;
}

@media (max-width: 768px) {
  .highlight {
    padding: 150px 0px;
  }
}

.highlight-text,
.highlight-media--01,
.highlight-media--02,
.highlight-media--03,
.highlight-media--04,
.highlight-media--05,
.highlight-media--06,
.highlight-media--07 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 60px;

}

@media (max-width: 600px){
  .highlight-text,
  .highlight-media--01,
  .highlight-media--02,
  .highlight-media--03,
  .highlight-media--04,
  .highlight-media--05,
  .highlight-media--06,
  .highlight-media--07 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.highlight-media--01,
.highlight-media--02,
.highlight-media--03,
.highlight-media--04,
.highlight-media--05,
.highlight-media--06,
.highlight-media--07 {
Margin-top: 30px;
}

.highlight-text{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.highlight-number{
color: rgba(226, 226, 226, 0.40);
font-family: Montserrat;
font-size: 100px;
font-style: normal;
font-weight: 700;
line-height: 78px; /* 78% */
}

.highlight-media--01{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.highlight-media--01 img{
  width: 100%;
  border-radius: 12px;
  display: block;
}

/* This block: on mobile show the wide composite in horizontal scroll */
@media (max-width: 1000px){
  .highlight-media--hscroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .highlight-media--hscroll::-webkit-scrollbar{ display: none; }
  .highlight-media--hscroll .result-image-01,
  .highlight-media--hscroll picture{
    display: block;
    width: max-content;
  }
  .highlight-media--hscroll .result-image-01 img,
  .highlight-media--hscroll picture img{
    width: auto;
    height: 52vh;
    max-width: none;
    border-radius: 12px;
  }
}

.card-top{
max-width: 50%;
  justify-self: end;
}


.card-bottom{
max-width: 50%;
 justify-self: start;
}

@media (max-width: 1200px) {
.card-top, .card-bottom{
max-width: 80%;
  }
}

.highlight-media--02{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px 0px;
  align-items: center;
}


.highlight-media--02 img{
  width: 100%;
  display: block;
}

.highlight-media--solo{
  grid-template-columns: 1fr;
}

.highlight-media--textleft{
  grid-template-columns: 0.75fr 1.25fr;
}

/* Sforzando "A Living Practice History" block only: on mobile put the image
   first and the text box after it. */
@media (max-width: 1000px){
  .highlight-media--imgthentext .result-image-02{ order: 1; }
  .highlight-media--imgthentext .card-left03{ order: 2; align-self: start; margin-top: 0; }

  /* Sforzando "Making practice visible" block only: no gap between the image
     and the text box on mobile. */
  .highlight-media--tight{ gap: 0; }
  .highlight-media--tight .result-image-01{ padding-bottom: 0; margin-bottom: 0; }
  .highlight-media--tight .card-right03{ margin-top: 0; }
}

.card-left03{
max-width: 100%;
  align-self: start;
height: auto;
border-color: #0B8693;
}

/* ESA --03 text box centered on desktop (only this block) */
.highlight-media--03 .card-left03{
  align-self: center;
}

.card-right01{
max-width: 100%;
  align-self:center;
height: auto;
}

.card-right02{
max-width: 100%;
  align-self:end;
height: auto;
}

.card-right03{
max-width: 100%;
  align-self: center;
height: auto;
border-color: #0B8693;
}

/* This block's text box sits higher on desktop */
.highlight-media--textfirst .card-right03{
  align-self: start;
  margin-top: 40px;
}

/* ESA --05 first text box sits higher on desktop */
.highlight-media--05 .card-right03{
  align-self: start;
}

.card-right04{
max-width: 100%;
  Align-self:start;
height: auto;
Margin-top: 40px;
}

.card-right05{
max-width: 100%;
  Align-self:start;
height: auto;
}

@media (max-width: 1000px){
  .highlight-media--02{
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .card-right01{
    order: 1;
    align-self: start;
  }



.result-image-01{
    order: 2;
Padding-bottom: 40px;
  }

  .result-image-02{
    order: 3;
  }

  .card-right02{
    order: 4;
    align-self: start;
    margin-left: auto;
  }

.card-right03{
    order: 4;
    align-self: start;
  }

  .highlight-media--02 .cards{
    max-width: 90%;
  }

  /* This GLS block: box, image, image, box on mobile (only this one) */
  .highlight-media--imgboxboximg .card-right01{ order: 1; align-self: start; margin-left: 0; }
  .highlight-media--imgboxboximg .result-image-01{ order: 2; padding-bottom: 0; margin-bottom: 24px; }
  .highlight-media--imgboxboximg .result-image-02{ order: 3; }
  .highlight-media--imgboxboximg .card-right02{ order: 4; align-self: start; margin-left: 0; }

  /* This GLS block: box, image, image, box on mobile (only this one) */
  .highlight-media--boximgimgbox .card-left01{ order: 1; align-self: start; margin-left: 0; }
  .highlight-media--boximgimgbox .result-image-03{ order: 2; margin-bottom: 24px; }
  .highlight-media--boximgimgbox .result-image-04{ order: 3; }
  .highlight-media--boximgimgbox .card-left02{ order: 4; align-self: start; margin-left: 0; }

  .highlight-media--textfirst .card-right03{
    order: 1;
    align-self: start;
    margin-top: 0;
  }
  /* Leasys "Reducing commitment uncertainty" card: align right on mobile */
  .case-leasysresult .highlight-media--textfirst .card-right03{
    justify-self: end;
  }
  .highlight-media--textfirst .result-image-01{
    order: 2;
    padding-bottom: 0;
    margin-top: 0;
  }
}

.highlight-media--03{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 36px 0px;
  align-items: center;
}

.highlight-media--03 img{
  width: 100%;
  display: block;
}

.card-left01{
max-width: 100%;
align-self:start;
height: auto;
margin-left: auto;
}

.card-left02{
max-width: 100%;
align-self:end;
height: auto;
}

.card-left03{
max-width: 100%;
Align-self:start;
height: auto;
margin-top: 40px;
}

@media (max-width: 1000px){
  .highlight-media--03{
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .card-left01{
    order: 1;
    align-self: start;
  }

.result-image-03{
    order: 2;
Padding-bottom: 40px;
  }

  .result-image-04{
    order: 3;
  }

  .card-left02{
    order: 4;
    align-self: start;
  }

  .highlight-media--03 .cards{
    max-width: 90%;
  }
}


.highlight-media--04{
  display: grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap: 0 20px;
}

.highlight-media--04 img{
  width:100%;
  border-radius:12px;
  display:block;
}

.card-center{
 grid-column:1 / -1;
justify-self:end;
max-width:900px;
width:100%;
}

@media (max-width: 1000px){
  .highlight-media--04{
    grid-template-columns: 1fr;
    gap: 0px;
  }


.result-image-05{
    order: 1;
  }


  .card-center{
    order: 2;
    align-self: start;
  }

  .result-image-06{
    order: 3;
  }


  .highlight-media--04 .cards{
    max-width: 90%;
  }
}

.highlight-media--05{
  display: grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap: 20px 0px;
}

.highlight-media--05 img{
  width:100%;
  border-radius:12px;
  display:block;
}

.card-center{
 grid-column:1 / -1;
justify-self:end;
max-width:900px;
width:100%;
}

@media (max-width: 1000px){
  .highlight-media--05{
    grid-template-columns: 1fr;
    gap: 0px;
  }


  .highlight-media--05 .card-right03{
    order: 1;
    align-self: end;
  }

  .highlight-media--05 .result-image-01{
    order: 2;
  }

  .highlight-media--05 .result-image-02{
    order: 3;
  }

  .highlight-media--05 .card-right04{
    order: 4;
    align-self: end;
    margin-top: 0px;
  }

  .highlight-media--05 .cards{
    max-width: 90%;
  }
}

.highlight-media--06{
  display: grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap: 20px 0px;
}

.highlight-media--06 img{
  width:100%;
  border-radius:12px;
  display:block;
}

/* ESA quorum block: center this last box against its row's left image (desktop) */
.highlight-media--06 .card-right05{
  align-self: center;
}

.card-center{
 grid-column:1 / -1;
justify-self:end;
max-width:900px;
width:100%;
}

@media (max-width: 1000px){
  .highlight-media--06{
    grid-template-columns: 1fr;
    gap: 0px;
  }


  .highlight-media--06 .card-right01{
    order: 1;
    align-self: end;
  }

  .highlight-media--06 .result-image-01{
    order: 2;
  }

  .highlight-media--06 .result-image-02{
    order: 3;
  }

  .highlight-media--06 .card-right05{
    order: 4;
    align-self: end;
  }

  .highlight-media--06 .cards{
    max-width: 90%;
  }
}


.highlight-media--07{
  display: grid;
  grid-template-columns:1fr;
  align-items:start;
}

.highlight-media--07 img{
  width:100%;
  border-radius:12px;
  display:block;
}


@media (max-width: 1000px){
  .highlight-media--07{
    grid-template-columns: 1fr;
    gap: 0px;
  }


.result-image-02{
    order: 1;
  }

  .card-left02{
    order: 2;
    align-self: end;
  }

  .result-image-04{
    order: 3;
  }



  .highlight-media--07 .cards{
    max-width: 90%;
  }
}



/* ------------------------------------ Key learnings ------------------------------------ */


.conclusion{
  padding:200px 40px 150px 40px;
background: #F9F9FA;
  transform: translateY(-60px);

  clip-path: polygon(
    0 10%,
    100% 0,
    100% 100%,
    0 100%
  );
}

@media (max-width:950px) {
.conclusion{
clip-path: polygon(
    0 4%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}

@media (max-width:550px) {
.conclusion{
clip-path: polygon(
    0 2%,   /* left top */
    100% 0, /* right top */
    100% 100%,
    0% 100%
  );
}
}


.conclusion-container{
  max-width:1200px;
  margin:0 auto;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:120px;
}

@media (max-width: 1200px) {
.conclusion-container{
  gap: 60px;
  }
}

@media (max-width: 1000px) {
.conclusion-container{
  flex-direction: column;
  }
}

.conclusion-title{
    flex: none;
    max-width: 100%;
}


.next-container{
  max-width:1200px;
  Margin:200px auto;
gap: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

}

/* ------------------------------------ Footer ------------------------------------ */

.site-footer{
  padding: 0px 20px;     /* distance from viewport */
}

@media (max-width: 420px){
.site-footer{
  padding: 0px 10px;     /* distance from viewport */
}
}

.footer-box{
  max-width: 1600px;
  margin: 0 auto;
  background: #09090B;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(39, 40, 51, 0.10);

  padding: 60px; /* inside the black box */
}
@media (max-width: 768px){
  .footer-box{ padding: 40px; }
}

@media (max-width: 550px){
  .footer-box{ padding: 40px; }
}

.footer-inner{
max-width: 1400px;
margin: 0 auto;
}

@media (max-width: 768px){
.footer-inner{ padding: 40px 0px 0px 0px; }
}

.footer-top{
  display: flex;
  width: 100%;
  height: auto;              /* <-- missing ; in your code */
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.footer-left{
  flex: 1;
  min-width: 0;              /* important: prevents overflow */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-right{
  width: 35%;              /* optional “column” width */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 768px){
  .footer-top{
    flex-direction: column;
    gap: 32px;
  }

  .footer-right{
    width: 100%;
  }
}

#logo-text{
margin-top: 0px;
margin-bottom: 0px;
color: white;
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: normal;

}

#h6-highlight{
color: #FFF;
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

h6::after {
content: ".";
color: #0B8693;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 0px;
letter-spacing: -1.6px;
}

.footer-text{
color: #F1F1F2;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 28px; /* 180% */
}

@media (max-width: 768px){
.footer-text{
font-size: 14px;
  }
 }
  

.footer-label{
color: #8F8F98;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 3.2px;
}

#footer-line{
color: #9292A1;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 180% */
}

@media (max-width: 768px){
#footer-line{
font-size: 14px;
  }
 }


/* ------------------------------------ Consistent mobile side margins ------------------------------------ */
/* One source of truth for horizontal insets on phones: 24px on every section,
   with inner containers zeroed so the inset never doubles up. Vertical padding
   is left untouched. */
@media (max-width: 600px){
  .hero,
  .approach,
  .thevalue,
  .client,
  .cases,
  .who,
  .culture,
  .industrial,
  .how,
  .beyond,
  .contact{
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-container,
  .approach-container,
  .thevalue-container,
  .clients-container,
  .project01-container,
  .who-container,
  .culture-container,
  .industrial-container,
  .how-container,
  .beyond-container,
  .contact-container{
    padding-left: 0;
    padding-right: 0;
  }

  /* Projects section: keep the green band full-bleed to the viewport edges,
     but hold the header text at the 24px inset. */
  .project-header{
    padding-left: 24px;
    padding-right: 24px;
  }
}