/* Piau Kee — mobile type scale (phones, ≤600px). Loaded after every other stylesheet so these sizes win.
   H1 40px · H2 30px · H3 18px · eyebrow 20px · paragraph 16px. Desktop / tablet sizes are untouched. */
@media (max-width:600px){
  /* paragraph */
  body{font-size:16px}
  p,.section-lead,.supply .section-lead,.au-lead,.au-spirit .au-lead,.au-spirit__body p,.au-spirit__pledge,.brandcard p,.obj-col__text,
  .mvo-card>p,.dnote p,.dnote--long p,.au-group__sub,.gcard p,.pcard__bio,.au-cta__copy,
  .ct-band__intro,.ct-card__company,.ct-row__value,.ct-formcard__sub,
  .evp-hero__intro,.evp-card__text,.evp-detail__text,.gt-text,.ju-card__text,
  .nws-hero__intro,.nws-card__excerpt,.nws-empty,.nws-content,.pol-lang,
  #pkcat,#pkcat .phero p,.sp-intro__p,.sp-card p,.ind__intro,.ind-row__desc p,
  .expertise__copy p,.promise__text,.cert p,.valcard__body p,.fan__caption p,.cs-hero__text,.footer__col p,.pol-switch{font-size:16px}

  /* H1 */
  h1,.hero__title,body.home .hero__title,.au-hero__title,.ct-band__title,.evp-hero__title,.gt-hero__title,
  .nws-hero__title,.pol-hero__title,#pkcat .phero h1,#pkcat .pvinfo h1,.cs-hero__title,.pg-hero__title{font-size:40px}

  /* H2 */
  h2,.section-title,.supply .section-title,.au-h2,.au-journey__title,.au-cta__title,.expertise__title,.promise__title,
  .progress__text h2,body.home .progress__text h2,.ind__heading,.ct-formcard__title,.ju-card__title,.evp-detail__title,
  .pol-h2,#pkcat .related h2,.fan__caption h3,.pg-item h2{font-size:30px}

  /* H3 (card / sub-section titles) */
  h3,.valcard__body h3,body.home .valcard__body h3,.mvo-card__label,.indcard h3,body.home .indcard h3,.brandcard h3,.gcard h3,.pcard__id h3,.obj-col__title,
  .sp-card__title,.ind-row__title,.ind-photo__cap-title,.evp-card__title,.nws-card__title,.nws-side__title,
  .ct-card__title,.gt-text h2,.nws-content h2,.nws-content h3,.pol-lang h3,#pkcat .cb h3,#pkcat .rel h3{font-size:18px}

  /* eyebrow */
  .eyebrow,.hero__eyebrow,body.home .hero__eyebrow,.au-hero__eyebrow,.au-eyebrow,.cs-hero__eyebrow,#pkcat .related .eyebrow{font-size:20px}
}

/* phones: Home + From Source to Service heroes, and Home's Symbol of Quality + Promise screens, fill the whole screen. lvh = the large viewport. On iPhone Safari the floating address bar
   area still lies outside lvh, so iOS gets +64px to run the hero under the bar (otherwise the next section shows there). The Home
   brand row is lifted by the same amount so it stays clear of the bar. */
@media (max-width:600px){
  .hero{min-height:100vh;min-height:100lvh}
  .stats__stage,.scene__sticky{height:100vh;height:100lvh}
  .hero__brands{bottom:calc(47px + 100lvh - 100svh)}
}
@media (max-width:600px){
  @supports (-webkit-touch-callout:none){
    .hero{min-height:calc(100lvh + 64px)}
    .stats__stage,.scene__sticky{height:calc(100lvh + 64px)}
    .hero__brands{bottom:calc(47px + 100lvh - 100svh + 64px)}
  }
}

/* phones: one covering background (Seafood-Background-041F38-2-web.webp, no repeat) under a 55% white overlay — same look as About Us' Group Overview.
   Home: Symbol of Quality Seafood + Quality You Can Trust; From Source to Service: Industries We Serve; Contact Us: cards/form area */
@media (max-width:600px){
  .stats__pattern,.quality__panel::before,.ind,.ct-main{
    background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url(../assets/img/Seafood-Background-041F38-2-web.webp);
    background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:scroll
  }
  /* Quality You Can Trust is ~3 screens tall: draw the picture at the same scale as Symbol of Quality Seafood (one screen = the picture's height).
     The mirrored tile is two pictures tall, so it joins up seamlessly where it continues down the section */
  .quality__panel::before{
    background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url(../assets/img/Seafood-Background-041F38-2-web-tile.webp);
    background-size:auto 1400px;background-size:auto 200lvh;background-position:center top;background-repeat:repeat-y
  }
  .ind{background-color:var(--fss-light)}
  .ct-main{background-color:#fff}
}

/* phones: The PIAU KEE Promise is a plain static section (no pinned scroll, no grow-from-the-middle animation, no fade-in on scroll).
   !important beats the inline sizes / opacity that js/main.js still writes while scrolling; tablet and desktop keep the animation. */
@media (max-width:600px){
  .scene{height:auto}
  .scene__sticky{position:relative;top:auto;height:auto;overflow:hidden;background:none;display:block}
  .promise-panel{position:relative;left:auto;top:auto;transform:none;width:100%!important;height:auto!important;min-height:100vh;min-height:100lvh;border-radius:0!important;box-shadow:none}
  @supports (-webkit-touch-callout:none){.promise-panel{min-height:calc(100lvh + 64px)}}  /* iPhone Safari: run under the floating address bar, same as the hero */
  .promise__scrim{opacity:1!important}
  .promise__content{opacity:1!important;transform:none!important}
}

/* phones: Supplier Practices cards (Direct from Source / Agriculture-Based Raw Materials / Industrial Audit) are as tall as their own text,
   with 20px under the last paragraph — not stretched to the tallest card. Tablet and desktop keep their current layout. */
@media (max-width:600px){
  .sp-cards__grid{grid-auto-rows:auto;align-items:start}
  .sp-card{padding-bottom:20px}
}

/* phones: Join Us / Policies / language switch inside the hamburger menu (the desktop top bar that holds them is hidden below 981px).
   Hidden everywhere else — tablet keeps its current menu. */
.nav__menu .nav__extra{display:none}
@media (max-width:600px){
  .nav__menu .nav__extra{display:block;font-size:.95rem;opacity:.85}
  .nav__menu .nav__extra--first{margin-top:6px;border-top:1px solid rgba(255,255,255,.15)}
}

/* phones: the Food Safety / Halal / Quality policy pictures run edge to edge inside their white card (cancels the card's 20px side padding), so the text in them is a little bigger */
@media (max-width:600px){
  .pol-img{width:calc(100% + 40px);max-width:none;margin-left:-20px;border-radius:0}
}

/* phones: "Let's Talk Seafood" — the seafood photo's top edge cuts the salmon off in the picture file itself, which showed as a hard line on a phone.
   A 90px white-to-clear fade over the picture's top edge softens it (the picture is 150% of the width wide, so 83.52vw tall, bottom-anchored). */
@media (max-width:600px){
  .contact{
    background-image:linear-gradient(#fff,rgba(255,255,255,0)),url(../assets/img/lets-talk-seafood.webp);
    background-repeat:no-repeat;
    background-size:100% 90px,150% auto;
    background-position:left 0 bottom calc(83.52vw - 90px),right 0 bottom 0
  }
}

/* laptops only (1025-1536px wide): every page's hero title (the page <h1>) is 80px — Home, About Us, From Source to Service, Certifications / Blogs / Terms (were 90px), and Products, Events, News, Contact Us, Join Us, Policies, General / Sales Terms (were 64px).
   (Last stylesheet, so it wins over each page's own rule; desktop above 1536px and tablets keep 90px.) */
@media (min-width:1025px) and (max-width:1536px){
  body.home .hero__title,.fss .hero__title,.au-hero__title,.cs-hero__title,
  #pkcat .phero h1,.evp-hero__title,.nws-hero__title,.ct-band__title,.pol-hero__title,.gt-hero__title{font-size:80px}
}