/* ==========================================================================
   Perfect Enterprises — RESPONSIVE
   Mobile-first is handled by the component defaults where practical; this
   file carries the breakpoint overrides. Checked at 360 / 390 / 768 / 1024 /
   1440 / 1920.
   ========================================================================== */

/* ============================ HEADER + HERO ==============================
   The header and hero are authored mobile-first (centred logo, burger, no
   nav). Everything below restores the desktop header and re-proportions the
   hero. Checked at 360 / 390 / 768 / 1024 / 1440 / 1920 and landscape phone.
   ========================================================================= */

/* --------------------------------------------- >= 1025px : desktop header */
@media (min-width: 1025px) {
  .pe-header { padding-block: 22px; }
  .pe-header--stuck { padding-block: 12px; }

  /* Back to the standard row: logo left, nav centre, catalogue button right. */
  .pe-header__inner { grid-template-columns: auto 1fr auto; gap: 28px; }
  .pe-header__spacer { display: none; }
  .pe-header__logo { grid-column: 1; justify-self: start; }
  .pe-header__logo img { height: 64px; }
  .pe-header--stuck .pe-header__logo img { height: 48px; }
  .pe-header__wordmark {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: flex;
    flex-direction: column;
    line-height: 1.06;
  }

  .pe-nav { grid-column: 2; display: flex; justify-content: center; }
  .pe-header__actions { grid-column: 3; }
  .pe-header__cta { display: inline-flex; }
  .pe-burger { display: none; }

  .pe-hero { height: 92vh; min-height: 700px; }
  /* 22% + a 2-line Anton headline + the CTA lands just above the 50% mark,
     which is where the bottom-anchored product starts. Any taller and the
     machine's hopper crosses the button. */
  .pe-hero__content { top: 22%; max-width: 900px; }
  .pe-hero__product { width: min(64%, 820px); max-height: 50%; }
  .pe-hero__ground { width: min(46%, 600px); height: 54px; }
}

/* -------------------------------------------- 768-1024px : tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tall portrait tablet: the headline block is at its largest here relative
     to the width, so the product gets 48% to stay clear of the CTA. */
  .pe-hero__content { top: 23%; }
  .pe-hero__product { width: min(78%, 660px); max-height: 48%; }
  .pe-hero__ground { width: min(62%, 520px); }
}

/* ------------------------------- landscape phone: headline vs product fight */
@media (max-height: 560px) {
  /* min-height must not exceed the viewport here, or the dots fall below the
     fold. The header also has to shrink, or the logo lands on the headline. */
  .pe-hero { height: 100vh; min-height: 0; max-height: none; }
  .pe-header { padding-block: 10px; }
  .pe-header__logo img { height: 40px; }
  .pe-hero__content { top: 27%; }
  .pe-hero .pe-hero__title { font-size: clamp(22px, 5vw, 30px); }
  .pe-hero__product { max-height: 36%; }
  .pe-hero__ground { height: 26px; }
  .pe-hero__dots { bottom: 14px; }
  .pe-hero__cta { padding: 11px 24px; }
}

/* 1024x768 landscape specifically: keep the headline clear of the machine. */
@media (min-width: 1024px) and (max-height: 800px) and (orientation: landscape) {
  .pe-hero { height: 100vh; min-height: 560px; }
  .pe-hero__product { max-height: 46%; }
}

/* ------------------------------------------------------ <= 1180px : nav */
@media (max-width: 1180px) {
  .pe-nav__link { padding: 10px 10px; font-size: 13.5px; }
  .pe-header__inner { gap: 18px; }
  .pe-split { gap: 44px; }
  .pe-footer__grid { gap: 32px; }
}

/* ------------------------------------------- <= 1024px : tablet landscape */
@media (max-width: 1024px) {
  .pe-cats { grid-template-columns: repeat(2, 1fr); }
  .pe-products { grid-template-columns: repeat(2, 1fr); }
  .pe-reasons { grid-template-columns: repeat(2, 1fr); }
  .pe-carousel__track { grid-auto-columns: calc((100% - 28px) / 2); }
  .pe-inds { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }

  .pe-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .pe-infra { grid-template-columns: 1fr; }
  .pe-infra__map { min-height: 300px; }

  .pe-founder__inner { grid-template-columns: 0.9fr 1.1fr; gap: 34px; }
  .pe-founder__panel { width: 52%; }
  .pe-filter { top: 66px; }
}

/* ------------------------------------------ <= 860px : tablet / big phone */
@media (max-width: 860px) {
  .pe-split,
  .pe-split--even { grid-template-columns: 1fr; gap: 56px; }
  .pe-split--flip .pe-split__body { order: 2; }
  .pe-split--flip .pe-split__media { order: 1; }

  .pe-stack { padding: 26px 30px 34px 26px; }
  .pe-stack__secondary { width: 38%; bottom: -28px; }
  .pe-stack__accent { width: 92px; height: 92px; }

  .pe-stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .pe-stat:nth-child(odd) { border-left: 0; }
  .pe-stat:nth-child(3) { border-left: 0; }

  .pe-steps { grid-template-columns: 1fr; gap: 16px; }
  .pe-step { padding: 26px 18px; }

  .pe-founder__inner { grid-template-columns: 1fr; gap: 0; }
  .pe-founder__panel { inset: auto 0 0 0; width: 100%; height: 58%; clip-path: none; }
  .pe-founder__portrait { max-width: 340px; margin-inline: auto; order: 2; }
  .pe-founder__body { order: 1; padding-bottom: 24px; }
  .pe-founder__quotemark { font-size: 96px; }
}

/* ---------------------------------------------------- <= 720px : phones */
@media (max-width: 720px) {
  :root { --pe-gutter: 18px; }

  .pe-pagehero { height: 260px; }

  .pe-cats,
  .pe-products,
  .pe-reasons,
  .pe-videos { grid-template-columns: 1fr; }

  .pe-carousel__track { grid-auto-columns: 84%; }
  .pe-carousel__nav { display: none; }
  .pe-carousel__foot { justify-content: center; }

  .pe-inds { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pe-ind__badge { width: 62px; height: 62px; }
  .pe-ind__label { font-size: 13px; }

  .pe-review { padding: 26px 22px; }
  .pe-infra__body { padding: 26px 20px 32px; }
  .pe-infra__actions .pe-btn { flex: 1 1 100%; }
  .pe-cta__actions .pe-btn { flex: 1 1 100%; }

  /* Footer becomes an accordion */
  .pe-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .pe-footer__col--acc { border-top: 1px solid var(--pe-rule-faint); }
  .pe-footer__col--acc .pe-footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    cursor: pointer;
  }
  .pe-footer__acc-icon { display: block; transition: transform 260ms var(--pe-ease); }
  .pe-footer__title[aria-expanded="true"] .pe-footer__acc-icon { transform: rotate(45deg); }
  .pe-footer__panel { overflow: hidden; max-height: 0; transition: max-height 300ms var(--pe-ease); }
  .pe-footer__panel > * { padding-bottom: 22px; }
  .pe-footer__col--brand { padding-bottom: 30px; }
  .pe-footer__bottom { flex-direction: column; gap: 8px; text-align: left; }

  /* Keep the floating stack clear of the last footer CTA */
  .pe-footer { padding-bottom: 96px; }

  .pe-fab { right: 16px; bottom: 16px; gap: 12px; }
  .pe-fab__btn { width: 56px; height: 56px; }
  .pe-fab__btn svg { width: 26px; height: 26px; }

  .pe-filter { top: 62px; margin-bottom: 34px; }
  .pe-filter__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .pe-filter__row::-webkit-scrollbar { display: none; }
  .pe-chip { flex: none; }

  .pe-section-head { margin-bottom: 34px; }
  .pe-card__body { padding: 20px 18px 22px; }
}

/* ------------------------------------------------ <= 400px : small phones */
@media (max-width: 400px) {
  /* Logo stays at the specified 56px on mobile; the wordmark is hidden there. */
  .pe-header__wordmark b,
  .pe-header__wordmark span { font-size: 15px; }
  .pe-stats { gap: 26px 12px; }
  .pe-stat { padding-inline: 6px; }
  .pe-rating__score { font-size: 42px; }
  .pe-carousel__track { grid-auto-columns: 90%; }
}

/* ------------------------------------------------------- >= 1600px : wide */
@media (min-width: 1600px) {
  :root { --pe-container: 1320px; }
  .pe-hero__content { max-width: 900px; }
  .pe-hero__product { width: min(60%, 880px); max-height: 52%; }
}

/* -------------------------------------------------------- print + no-js */
@media print {
  .pe-header, .pe-fab, .pe-hero__dots, .pe-mobile, .pe-filter { display: none !important; }
  .pe-page { color: #000; }
}