.boat-content { 
  position: relative; 
  z-index: 2; display: grid; 
  place-items: center;
  /* transform: translate(-68px, 40px); */
}

.boat-wrap{
  --boat-w: min(91vw, 1280px);
  --boat-ar: 16/6.9;
  --cabin: clamp(60px, 7vw, 100px);
  --gap: clamp(3px, 2.2vw, 2px);
  --pill-h: calc(var(--cabin) * 0.98);
  --pill-px: clamp(10px, 1.4vw, 14px);
  --deckTop: 30%;
  --deck-pad-x: clamp(12px, 2.2vw, 24px);
  --deck-pad-y: clamp(8px, 1.5vw, 16px);
  width: var(--boat-w);
  aspect-ratio: var(--boat-ar);
  position: relative;
  top: 16%;
  right: 10%;
}

/* Make a simple CSS-grid boat canvas (3 rows) */
.boat{
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  row-gap: 0;
}

/* ===== Cabins row: two rounded cabins + name pill ======================= */
.cabins{
  grid-row: 1; display: grid; align-items: end;
  grid-template-columns: var(--cabin) var(--cabin) 1fr;
  align-items: end; column-gap: var(--gap);
  padding: 0;
  align-self: end;
  /* transform: translateY(clamp(102px, 2vw, 120px));  */
  position: absolute; z-index: 3;
  left: 0; right: 0;
  top: calc(var(--deckTop) - var(--cabin));
}


.cabin{
  width: var(--cabin);
  height: calc(var(--cabin) * 0.98);
  background: #F8F8FF;
  border-bottom-left-radius: 2%;
  border-bottom-right-radius: 2%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  display: grid;
  place-items: center;
}

#company-logo, #company-logo img {
  width: calc(var(--cabin) * 0.39);
  height: calc(var(--cabin) * 0.39);
  object-fit: contain;
  display: block;
}

.name-pill{
  /* height: calc(var(--cabin) * 0.98); */
  height: var(--pill-h);
  min-width: clamp(125px, 23vw, 339px);
  /* align-self: end; */
  justify-self: start;
  display: inline-flex;
  align-items:center;
  gap:10px;
  padding: var(--pill-px); /*add 0 at the beggining */
  background:#F8F8FF;
  border-radius: 3px;
  color: var(--c-deep);
  font-weight:600;
  text-decoration:none;
  font-size: clamp(18px, 1.6vw, 22px);
  justify-content: space-around;
}
#company-name { line-height: 1;}
.name-pill .open-icon { flex: 0 0 auto; opacity: .9;}

.company-info {
    grid-row: 2;
    position: relative;
    display: grid;
    align-content: center;
    justify-content: space-around;
    padding: var(--deck-pad-y) var(--deck-pad-x);
}

.boat-img{
    width: 100%;
    height: 100%;
    max-width: 80%;
    position: absolute;
    inset: 0;
    object-fit: contain;
    z-index: 0;
}

.project-blurb,
.project-badge{
  position: relative;
  z-index: 1;
  max-width: 46ch;
  color: #1B4C82;
}
#company--desc {
  font-size: calc(14px, 1.1vw, 18px);
  line-height: 1.35;
  margin-top: clamp(8px, 1.6vw, 16px);
}

.project-badge{ display:inline-flex; align-items:center; gap:8px; font-weight:700; 
  margin-top: clamp(8px, 1.2vw, 12px); }
.project-badge img{ width:16px; height:16px; }



@media (min-width:1536px){
  .boat-wrap{ --boat-w: min(88vw, 1400px); }
} 

@media (max-width:991px){
  .boat-wrap{ --boat-w: 115vw; --boat-ar: 16/7; --cabin: clamp(56px, 10vw, 90px);} 
  .boat-section .wave-darkblue-bg { height: clamp(224px, 10vw, 165px);}
}

@media (max-width: 770px) {
  .boat-section .wave-darkblue-bg { height: clamp(180px, 10vw, 165px);}
}

@media (max-width: 624px) {
  .boat-wrap{ --boat-w: 124vw; } 
}

@media (max-width:575px){
  .boat-section .wave-darkblue-bg { height: clamp(195px, 10vw, 165px);}
  .boat-wrap {--boat-ar: 10 / 7;--boat-w: clamp(685px, 2vw, 739px);--deckTop: 37%; margin-right: 5%;}
  #company-desc { padding-right: 20%;}
  .cabins { left: 35px;}
}

@media (max-width: 400px) {
  #company-desc { padding: 24px 90px 0;}
  .boat-wrap {
    --boat-ar: 10/6.8;--boat-w: clamp(619px, 2vw, 739px);
    margin-right: 12% !important;--deckTop: 37%;
  }
  .name-pill {min-width: clamp(153px, 23vw, 339px) !important;}
  .cabins {left: 67px;}
}

@media(max-width: 375px) {
  #company-desc { padding: 24px 90px 0;}
  .boat-wrap {--boat-ar: 10/6.8;--boat-w: clamp(662px,0vw,732px);margin-right: 30% !important;}
  .name-pill {min-width: clamp(125px, 23vw, 339px);}
  .cabins {left: 46px;}
}

@media (maxpp-width: 360px) {
  
}