/* =========================================================
   Percival Page WordPress Version 38
   Responsive first-fold, visual cleanup and expanded team.
========================================================= */

/* The illustrative disclaimer was removed from the template; this rule also
   protects installations serving a cached copy of the older markup. */
.prototype-note--trusted {
  display: none !important;
}

/* Keep the opening experience visually consistent even when the browser is
   zoomed out: the hero and indicators together occupy the first viewport. */
@media (min-width: 821px) {
  .shell {
    width: min(1880px, calc(100% - 120px));
  }

  .hero,
  .hero__inner {
    min-height: clamp(620px, calc(100svh - 130px), 1320px);
  }

  .hero {
    background-position: 70% center;
  }

  .hero__inner {
    padding-top: 124px;
  }

  .hero__copy {
    width: min(1050px, 70vw);
  }

  .hero h1 {
    font-size: clamp(48px, 3.75vw, 72px);
    line-height: 1.055;
    letter-spacing: -.012em;
    text-wrap: balance;
  }

  .hero p {
    font-size: clamp(17px, 1.12vw, 21px);
  }

  .hero__actions {
    margin-top: 32px;
  }

  .brand {
    flex-basis: clamp(390px, 28vw, 520px);
  }

  .brand img {
    width: clamp(390px, 28vw, 520px);
    max-height: 82px;
  }

  .main-nav {
    gap: clamp(24px, 2.2vw, 48px);
  }

  .main-nav a {
    font-size: clamp(12px, .82vw, 15px);
  }

  .stats__grid {
    min-height: 130px;
  }
}

/* Compact laptop screens: preserve the whole message without crowding. */
@media (min-width: 821px) and (max-height: 760px) {
  .hero,
  .hero__inner {
    min-height: max(570px, calc(100svh - 112px));
  }

  .hero__inner {
    padding-top: 112px;
  }

  .hero h1 {
    font-size: clamp(42px, 3.45vw, 58px);
  }

  .hero p {
    margin-top: 16px;
  }

  .hero__actions {
    margin-top: 22px;
  }

  .stats__grid {
    min-height: 112px;
  }

  .stats article {
    padding-block: 14px;
  }
}

/* When the desktop layout switches to two indicator rows, reserve their
   actual height so the trusted-brands section still begins below the fold. */
@media (min-width: 821px) and (max-width: 1080px) {
  .hero,
  .hero__inner {
    min-height: clamp(600px, calc(100svh - 180px), 980px);
  }
}

/* 21–27 inch displays and high-density desktop screens. */
@media (min-width: 1900px) {
  .shell {
    width: min(2200px, calc(100% - 180px));
  }

  .topbar,
  .topbar__inner {
    height: 58px;
  }

  .site-header {
    top: 58px;
    height: 116px;
  }

  .nav-shell {
    height: 116px;
  }

  .brand,
  .brand img {
    width: 550px;
    flex-basis: 550px;
  }

  .hero,
  .hero__inner {
    min-height: clamp(820px, calc(100svh - 150px), 1500px);
  }

  .hero__inner {
    padding-top: 148px;
  }

  .hero__copy {
    width: min(1220px, 68vw);
  }

  .hero h1 {
    font-size: clamp(70px, 3.35vw, 88px);
  }

  .hero p {
    font-size: 23px;
  }

  .btn {
    min-height: 62px;
    padding-inline: 36px;
    font-size: 14px;
  }

  .stats__grid {
    min-height: 150px;
  }

  .stats strong {
    font-size: 54px;
  }

  .stats p {
    font-size: 13px;
  }
}

/* Large-format and television displays. */
@media (min-width: 3000px) and (min-height: 1500px) {
  .shell {
    width: min(2920px, calc(100% - 260px));
  }

  .topbar,
  .topbar__inner {
    height: 72px;
    font-size: 20px;
  }

  .site-header {
    top: 72px;
    height: 150px;
  }

  .nav-shell {
    height: 150px;
  }

  .brand,
  .brand img {
    width: 720px;
    flex-basis: 720px;
    max-height: 112px;
  }

  .main-nav a {
    font-size: 21px;
  }

  .hero,
  .hero__inner {
    min-height: calc(100svh - 190px);
  }

  .hero__inner {
    padding-top: 190px;
  }

  .hero__copy {
    width: min(1680px, 69vw);
  }

  .hero h1 {
    font-size: clamp(104px, 3.2vw, 132px);
  }

  .hero p {
    font-size: 31px;
  }

  .hero__actions {
    gap: 34px;
    margin-top: 46px;
  }

  .btn {
    min-height: 80px;
    padding-inline: 48px;
    font-size: 19px;
  }

  .stats__grid {
    min-height: 190px;
  }

  .stat-icon {
    width: 65px;
    height: 65px;
  }

  .stats strong {
    font-size: 72px;
  }

  .stats p {
    font-size: 18px;
  }
}

/* New team portraits: keep faces framed consistently with existing cards. */
.team-card img[alt="René Amauris Nolasco"] {
  object-position: center 24%;
}

.team-card img[alt="Ámbar Pacheco"] {
  object-position: center 20%;
}

@media (max-width: 560px) {
  .team-card img[alt="René Amauris Nolasco"],
  .team-card img[alt="Ámbar Pacheco"] {
    object-position: center 18%;
  }
}