/* Homepage responsive hardening — v9.4
   Keeps the desktop character while preventing oversized portrait/grid items
   from defining a minimum page width on tablets and phones. */

.about-grid{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,52px);
}
.about-grid > *{min-width:0}
.portrait{
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center 38%;
  justify-self:center;
}

/* Four narrow cards are awkward around laptop/tablet widths. */
.grid3{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:1100px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  .about-grid{
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }
  .portrait{
    width:min(100%,420px);
    max-width:420px;
    justify-self:center;
  }
  .about-grid > div:last-child{width:100%}
}

@media(max-width:700px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .grid3 .card{min-width:0}
  .hero{min-height:auto}
  .hero-inner{padding:54px 0 46px}
  .hero-card{width:100%;max-width:100%;padding:22px 20px}
  .hero h1{
    max-width:12ch;
    font-size:clamp(2.55rem,11.5vw,3.35rem);
    line-height:.94;
  }
  .hero p{font-size:1.04rem}
}

@media(max-width:520px){
  .about-grid{padding:22px 18px;border-radius:28px}
  .portrait{
    width:min(100%,320px);
    max-width:320px;
    border-width:6px;
    border-radius:24px;
  }
  .about h2{font-size:clamp(2rem,10vw,2.8rem)}
  .about p{font-size:1rem}
  .actions{display:grid;grid-template-columns:1fr;width:100%}
  .actions .btn{width:100%}
  .cta{padding:28px 22px;border-radius:26px}
  .contact-actions{display:grid;grid-template-columns:1fr;width:100%}
  .contact-actions .btn{width:100%}
  .socials{gap:8px}
}

@media(max-width:360px){
  .hero-card{padding:20px 16px}
  .hero h1{font-size:2.35rem}
  .section-head h2{font-size:2rem}
  .card{padding:22px}
}