*{box-sizing:border-box}
:root{--navy:#0B2D5B;--coral:#FF4E3A;--green:#078633;--white:#fff}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#F1F4F7;color:var(--navy)}
body{min-height:100vh}

.landing{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,48%) minmax(0,52%);
  overflow:hidden;
}

.content{
  min-width:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(30px,4vh,52px) clamp(42px,6vw,100px);
  background:#F1F4F7;
  position:relative;
  z-index:2;
}

.brand-logo{
  display:block;
  width:min(100%,520px);
  max-height:195px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 clamp(26px,3.4vh,42px);
}

.message{max-width:660px}

.message h1{
  margin:0;
  font-size:clamp(49px,3.9vw,68px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:900;
}
.message h1 span,.message h1 strong{display:block}
.message h1 strong{color:var(--coral);font-weight:900}

.description{
  margin:22px 0 0;
  max-width:610px;
  font-size:clamp(18px,1.22vw,22px);
  line-height:1.42;
  font-weight:400;
}

.construction{margin-top:28px}
.accent-line{
  display:block;
  width:86px;
  height:4px;
  background:var(--coral);
  margin-bottom:18px
}
.construction p{
  margin:0;
  font-size:clamp(13px,1.05vw,18px);
  font-weight:700;
  letter-spacing:.29em;
  white-space:nowrap
}

.contact{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  margin-top:30px;
  align-items:stretch
}
.contact-button{
  min-height:64px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 20px;
  font-size:clamp(14px,.95vw,17px);
  font-weight:700;
  transition:transform .15s ease,filter .15s ease;
  white-space:nowrap
}
.contact-button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.contact-button:focus-visible{outline:4px solid rgba(255,78,58,.35);outline-offset:3px}
.contact-button svg{width:31px;height:31px;fill:#fff;flex:0 0 auto}
.divider{height:32px;width:1px;background:rgba(255,255,255,.7);margin:0 16px}
.whatsapp{background:var(--green);flex:0 0 auto}
.email{background:var(--navy);flex:1 1 auto}

.warehouse{
  min-height:100vh;
  background-image:url("assets/warehouse.jpg");
  background-size:cover;
  background-position:center 58%;
}

/* Laptops / shorter desktop windows: preserve the full composition without vertical clipping. */
@media (min-width:761px) and (max-height:820px){
  .content{padding-top:24px;padding-bottom:24px}
  .brand-logo{width:min(100%,430px);max-height:160px;margin-bottom:22px}
  .message h1{font-size:clamp(45px,3.45vw,59px)}
  .description{margin-top:15px;font-size:18px;line-height:1.34}
  .construction{margin-top:20px}
  .accent-line{margin-bottom:14px}
  .construction p{font-size:13px}
  .contact{margin-top:22px}
  .contact-button{min-height:56px}
}

/* Tablet */
@media (max-width:1180px) and (min-width:761px){
  .landing{grid-template-columns:55% 45%}
  .content{padding-left:44px;padding-right:44px}
  .brand-logo{width:min(100%,440px)}
  .contact{flex-direction:column}
  .contact-button{width:min(100%,500px);flex:none}
}

/* Mobile */
@media (max-width:760px){
  .landing{display:block;min-height:100svh;position:relative;overflow:hidden}
  .warehouse{
    position:absolute;
    inset:0;
    min-height:100%;
    background-position:62% center
  }
  .warehouse::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(241,244,247,.99) 0%,rgba(241,244,247,.97) 55%,rgba(241,244,247,.86) 74%,rgba(241,244,247,.62) 100%)
  }
  .content{
    min-height:100svh;
    padding:30px 24px 34px;
    justify-content:flex-start;
    background:transparent
  }
  .brand-logo{
    width:min(100%,360px);
    max-height:none;
    margin:0 0 42px
  }
  .message{max-width:100%}
  .message h1{font-size:clamp(43px,13vw,62px)}
  .description{font-size:18px;max-width:520px}
  .desktop-break{display:none}
  .construction{margin-top:26px}
  .construction p{font-size:13px;letter-spacing:.2em;white-space:normal;line-height:1.5}
  .contact{margin-top:26px;width:100%;gap:11px;flex-direction:column}
  .contact-button{width:100%;min-height:62px;padding:0 18px;font-size:15px;flex:none}
  .contact-button svg{width:29px;height:29px}
  .divider{height:30px;margin:0 14px}
}
@media (max-width:390px){
  .content{padding-left:18px;padding-right:18px}
  .message h1{font-size:41px}
  .email{font-size:13px}
}