/* PEK Automotive v269 — adaptive phone safeguards.
   Loaded only up to 760px. It preserves the existing visual design while
   improving scaling, safe areas, short screens and very narrow phones. */

@media (max-width: 760px) {
  :root {
    --pek-safe-top: env(safe-area-inset-top, 0px);
    --pek-safe-right: env(safe-area-inset-right, 0px);
    --pek-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pek-safe-left: env(safe-area-inset-left, 0px);
    --pek-phone-gutter: clamp(16px, 4.6vw, 24px);
    --pek-mobile-header-height: calc(70px + var(--pek-safe-top));
    --home-mobile-header: calc(70px + var(--pek-safe-top));
    --pek-tech-mobile-header-height: calc(70px + var(--pek-safe-top));
    --home-mobile-gutter: var(--pek-phone-gutter);
    --pek-mobile-menu-gutter: var(--pek-phone-gutter);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: var(--pek-mobile-header-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip !important;
  }

  main, section, article, aside, header, footer, nav,
  div, form, fieldset, ul, ol, li {
    min-width: 0;
  }

  img, picture, video, canvas, svg, iframe {
    max-width: 100%;
  }

  p, li, address, label, a {
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  input, textarea, select {
    max-width: 100%;
    font-size: 16px !important;
  }

  textarea { resize: vertical; }

  /* Safe-area aware fixed header. */
  html body #siteFixedHeader,
  html body #siteFixedHeader.is-scrolled,
  html body #siteFixedHeader.is-light,
  html body #siteFixedHeader.media-static-header {
    height: var(--pek-mobile-header-height) !important;
    min-height: var(--pek-mobile-header-height) !important;
    max-height: var(--pek-mobile-header-height) !important;
    padding-top: var(--pek-safe-top) !important;
    padding-right: max(var(--pek-phone-gutter), var(--pek-safe-right)) !important;
    padding-left: max(var(--pek-phone-gutter), var(--pek-safe-left)) !important;
  }

  html body #siteFixedHeader .main-nav {
    top: var(--pek-mobile-header-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: var(--pek-mobile-header-height) 0 0 !important;
    height: calc(var(--pek-vh, 1vh) * 100 - var(--pek-mobile-header-height)) !important;
    min-height: 0 !important;
    padding-right: max(var(--pek-phone-gutter), var(--pek-safe-right)) !important;
    padding-bottom: max(28px, calc(var(--pek-safe-bottom) + 18px)) !important;
    padding-left: max(var(--pek-phone-gutter), var(--pek-safe-left)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    html body #siteFixedHeader .main-nav {
      height: calc(100dvh - var(--pek-mobile-header-height)) !important;
    }
  }

  /* Fluid horizontal containment without changing section design. */
  .premium-container,
  .services-shell,
  .media-center-shell,
  .legal-shell,
  .technologies-shell,
  .careers-hero-inner,
  .careers-section-head,
  .contact-hero-inner,
  .contact-section-head,
  .contact-form-layout,
  .about-story-grid {
    max-width: 100% !important;
  }

  .legal-shell {
    width: calc(100% - (2 * var(--pek-phone-gutter))) !important;
  }

  /* Prevent mobile sliders from widening the document while preserving swipe. */
  [data-mobile-slider],
  [data-about-slider],
  [data-contact-slider],
  [data-service-slider],
  .product-line-grid,
  .values-grid,
  .careers-grid,
  .contact-cards,
  .service-carousel,
  .media-archive-grid {
    max-width: 100%;
  }

  /* Cookie notice remains usable on short and notched phones. */
  .cookie-banner {
    right: max(12px, var(--pek-safe-right)) !important;
    bottom: max(12px, calc(var(--pek-safe-bottom) + 8px)) !important;
    left: max(12px, var(--pek-safe-left)) !important;
    width: auto !important;
    max-width: 470px !important;
    max-height: min(78dvh, 620px) !important;
    padding: clamp(17px, 4.6vw, 22px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .cookie-actions {
    gap: 8px !important;
  }

  .cookie-actions button {
    min-height: 44px !important;
  }

  /* Back-to-top button stays clear of device safe areas. */
  .mobile-back-to-top {
    right: max(16px, calc(var(--pek-safe-right) + 10px)) !important;
    bottom: max(18px, calc(var(--pek-safe-bottom) + 12px)) !important;
  }

  /* Long contact details must never push the page sideways. */
  .contact-card a,
  .contact-quick-card a,
  .contact-form-section a,
  .legal-copy a,
  .footer-col a {
    overflow-wrap: anywhere;
  }

  /* Modal and accordion content follows the available viewport. */
  .technology-modal-dialog {
    width: min(100% - (2 * var(--pek-phone-gutter)), 1120px) !important;
    max-height: calc(var(--pek-vh, 1vh) * 100 - 24px) !important;
  }

  @supports (height: 100dvh) {
    .technology-modal-dialog { max-height: calc(100dvh - 24px) !important; }
  }

  .technology-modal-scroll {
    max-height: inherit !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep tap controls comfortable without changing their appearance. */
  .nav-toggle,
  .mobile-back-to-top,
  .product-line-slider-dot,
  .about-slider-dots button,
  .career-slider-dots button,
  .contact-slider-dots button,
  .service-slider-dots button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Very narrow phones: only scale typography and gutters enough to prevent
   mid-word breaks. The visual hierarchy remains unchanged. */
@media (max-width: 359px) {
  :root {
    --pek-phone-gutter: 15px;
    --home-mobile-gutter: 15px;
    --pek-mobile-menu-gutter: 15px;
  }

  html body #siteFixedHeader .brand-logo {
    height: 35px !important;
    max-height: 35px !important;
  }

  html body #siteFixedHeader .nav-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  body.home-page .hero h1 {
    font-size: clamp(39px, 13vw, 44px) !important;
  }

  body.careers-page .careers-hero h1 {
    font-size: clamp(38px, 12.2vw, 44px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal !important;
  }

  body.careers-page .careers-section-head h2 {
    font-size: clamp(36px, 11.7vw, 42px) !important;
    overflow-wrap: normal !important;
  }

  body.contact-page .contact-hero-copy h1 {
    font-size: clamp(43px, 14vw, 50px) !important;
    white-space: normal !important;
  }

  body.subpage .about-hero-new .about-hero-content h1,
  body.media-page .media-center-intro h1,
  body.legal-page .legal-hero h1 {
    font-size: clamp(42px, 13.5vw, 50px) !important;
  }

  body.services-page .services-intro-editorial h1 {
    font-size: clamp(39px, 12vw, 46px) !important;
  }

  body.technologies-page .technologies-title span:first-child {
    font-size: clamp(42px, 14vw, 48px) !important;
  }

  body.technologies-page .technologies-title span:last-child {
    font-size: clamp(32px, 10.5vw, 38px) !important;
  }

  .footer-links-col {
    grid-template-columns: 1fr !important;
  }

  .footer-inner,
  .footer-bottom {
    padding-right: var(--pek-phone-gutter) !important;
    padding-left: var(--pek-phone-gutter) !important;
  }
}

/* Wide phones and small portrait tablets: keep lines readable and centered. */
@media (min-width: 480px) and (max-width: 760px) and (orientation: portrait) {
  .premium-container,
  .services-shell,
  .media-center-shell,
  .legal-shell,
  .technologies-shell,
  .careers-hero-inner,
  .contact-hero-inner,
  .contact-form-layout,
  .about-story-grid {
    width: min(100% - 48px, 680px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.home-page .hero-copy {
    max-width: 540px !important;
  }
}

/* Short phones and landscape mode: remove viewport-height traps and keep all
   content reachable. */
@media (max-width: 760px) and (max-height: 620px) {
  html body #siteFixedHeader,
  html body #siteFixedHeader.is-scrolled,
  html body #siteFixedHeader.is-light,
  html body #siteFixedHeader.media-static-header {
    --pek-mobile-header-height: calc(60px + var(--pek-safe-top));
    height: var(--pek-mobile-header-height) !important;
    min-height: var(--pek-mobile-header-height) !important;
    max-height: var(--pek-mobile-header-height) !important;
  }

  :root {
    --pek-mobile-header-height: calc(60px + var(--pek-safe-top));
    --home-mobile-header: calc(60px + var(--pek-safe-top));
    --pek-tech-mobile-header-height: calc(60px + var(--pek-safe-top));
  }

  html body #siteFixedHeader .brand-logo {
    height: 32px !important;
    max-height: 32px !important;
  }

  html body #siteFixedHeader .nav-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  html body #siteFixedHeader .main-nav {
    padding-top: 10px !important;
  }

  .cookie-banner {
    top: max(10px, var(--pek-safe-top)) !important;
    bottom: auto !important;
    max-height: calc(100dvh - var(--pek-safe-top) - var(--pek-safe-bottom) - 20px) !important;
  }

  body.legal-page .legal-hero,
  body.careers-page .careers-hero,
  body.contact-page .contact-hero,
  body.media-page .media-center-intro,
  body.services-page .services-intro-editorial,
  body.subpage .about-hero-new,
  body.technologies-page .technologies-index {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .cookie-banner {
    right: max(10px, var(--pek-safe-right)) !important;
    left: auto !important;
    width: min(430px, calc(100% - var(--pek-safe-left) - var(--pek-safe-right) - 20px)) !important;
  }

  body.home-page .hero-inner {
    padding-right: max(var(--pek-phone-gutter), var(--pek-safe-right)) !important;
    padding-left: max(var(--pek-phone-gutter), var(--pek-safe-left)) !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Final narrow-phone text containment. */
@media (max-width: 359px) {
  body.subpage .mission-editorial-head h2 {
    font-size: clamp(38px, 12.3vw, 43px) !important;
    line-height: .94 !important;
  }

  body.contact-page .contact-hero-copy h1 {
    font-size: clamp(41px, 13.4vw, 47px) !important;
  }

  body.contact-page .contact-card h3 {
    font-size: clamp(19px, 6.2vw, 21px) !important;
    letter-spacing: -.025em !important;
  }
}

/* Keep the cookie panel in its familiar bottom position in portrait mode. */
@media (max-width: 760px) and (max-height: 620px) and (orientation: portrait) {
  .cookie-banner {
    top: auto !important;
    bottom: max(12px, calc(var(--pek-safe-bottom) + 8px)) !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .cookie-banner {
    top: max(10px, var(--pek-safe-top)) !important;
    bottom: auto !important;
    max-height: calc(100dvh - var(--pek-safe-top) - var(--pek-safe-bottom) - 20px) !important;
  }
}