/* SeafoodMeNow V283 — tablet navigation + Pakistan Canadian-hero handoff */

/* Tablet navigation: always provide the app-style menu button when the full
   desktop navigation no longer fits. This final authority intentionally comes
   after legacy responsive rules. */
@media (min-width:721px) and (max-width:1180px){
  .site-header .desktop-nav,.site-header .header-contact{display:none!important}
  .site-header .header-actions{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .site-header .menu-toggle{
    display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    place-items:center!important;width:48px!important;min-width:48px!important;height:48px!important;
  }
  .mobile-nav{display:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .mobile-nav.open{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
}

/* The Pakistan entry hero is the Canadian homepage hero laid directly over
   frame 1 of the existing cinematic. It does not create another page/section. */
.pk-cinema-stage{isolation:isolate!important}
.pk-entry-hero{
  position:absolute!important;inset:0!important;z-index:40!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  opacity:var(--pk-entry-opacity,1)!important;
  visibility:visible!important;pointer-events:auto!important;
  will-change:opacity;transition:none!important;background:#01111e!important;
}
.pk-cinema.entry-done .pk-entry-hero{pointer-events:none!important;visibility:hidden!important}
.pk-cinema.entry-active .pk-cinema-top,
.pk-cinema.entry-active .pk-cinema-copy,
.pk-cinema.entry-active .pk-cinema-side,
.pk-cinema.entry-active .pk-cinema-bottom,
.pk-cinema.entry-active .pk-cinema-scrollcue{opacity:0!important;pointer-events:none!important}
.pk-cinema:not(.entry-active) .pk-cinema-top,
.pk-cinema:not(.entry-active) .pk-cinema-copy,
.pk-cinema:not(.entry-active) .pk-cinema-side,
.pk-cinema:not(.entry-active) .pk-cinema-bottom,
.pk-cinema:not(.entry-active) .pk-cinema-scrollcue{transition:opacity .18s ease!important}

/* Desktop/tablet copy the Canadian hero composition exactly inside the same
   visible cinematic viewport. */
@media (min-width:721px){
  .pk-entry-hero .reference-hero-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:-5!important}
  .pk-entry-hero .reference-hero-media img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
  .pk-entry-hero .reference-hero-copy{position:absolute!important}
  .pk-entry-hero .reference-benefits{position:absolute!important}
}

/* Mobile: the Canadian mobile artwork remains the full first view. The
   cinematic beneath uses its existing half-screen film composition, so the JS
   deliberately performs a visible dissolve instead of a hard swap. */
@media (max-width:720px){
  .pk-entry-hero{
    display:block!important;height:100%!important;min-height:0!important;max-height:none!important;padding:0!important;
  }
  .pk-entry-hero .reference-hero-media{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;z-index:1!important;
  }
  .pk-entry-hero .reference-hero-media img{
    content:url('/assets/hero-first-section-mobile-v143.webp?v=255')!important;
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:top center!important;filter:none!important;
  }
  .pk-entry-hero .reference-hero-copy{display:none!important}
  .pk-entry-hero .reference-benefits{display:none!important}
  .pk-entry-hero .reference-hero-wash,.pk-entry-hero .reference-hero-sparkle{display:none!important}
  .pk-entry-hero .mobile-hero-hotspots{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;z-index:60!important}
}

/* V284 — native cinematic shell + reference-text theme sync */

/* Keep the Pakistan opening hero inside the exact same 16:9 cinematic shell on
   desktop and tablet so the handoff never stretches, crops differently, or
   leaves dead gutter space around the video stage. */
@media (min-width:721px){
  .pk-entry-hero{
    inset:auto!important;
    width:var(--pc-native-w)!important;
    height:var(--pc-native-h)!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    min-height:0!important;
    max-height:none!important;
  }
  .pk-entry-hero .reference-hero-copy{
    left:clamp(36px,3.7vw,68px)!important;
    top:50%!important;
    transform:translateY(-48%)!important;
    width:min(560px,48%)!important;
    text-shadow:0 10px 24px rgba(255,255,255,.14)!important;
  }
  .pk-entry-hero .reference-benefits{
    left:clamp(36px,3.7vw,68px)!important;
    width:calc(100% - clamp(72px,7.4vw,136px))!important;
    bottom:clamp(16px,2.8vh,28px)!important;
  }
  .pk-entry-hero .reference-hero-media img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* Tablet keeps the same cinematic shell height discipline for a cleaner fit. */
@media (min-width:721px) and (max-width:1180px){
  .pk-entry-hero .reference-hero-copy{width:min(500px,52%)!important}
  .pk-entry-hero .reference-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ======================================================================
   V286 — Pakistan full-bleed generated opening hero, desktop/tablet only
   ====================================================================== */

/* The opening hero must fill the complete sticky stage. The cinematic media
   underneath remains native 16:9 and untouched. This override intentionally
   supersedes V284's entry-hero-to-native-film-box constraint, which caused
   the visible empty bands above/below the first view on taller displays. */
@media (min-width:721px){
  .pk-entry-hero{
    position:absolute!important;
    inset:0!important;
    left:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    background:#ddecf7!important;
  }
  .pk-entry-hero .reference-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    background:#ddecf7!important;
  }
  .pk-entry-hero .reference-hero-media:before{display:none!important;content:none!important}
  .pk-entry-hero .reference-hero-media img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    filter:none!important;
  }
  .pk-entry-hero .reference-hero-copy{
    left:clamp(34px,3.3vw,68px)!important;
    top:50%!important;
    transform:translateY(-48%)!important;
    width:min(570px,43vw)!important;
  }
  .pk-entry-hero .reference-benefits{
    left:clamp(34px,3.3vw,68px)!important;
    width:calc(100% - clamp(68px,6.6vw,136px))!important;
    bottom:clamp(18px,2.5vh,30px)!important;
  }
}

/* Tablet uses the purpose-generated 4:3 artwork, letting object-fit cover
   crop only the minimum necessary while keeping all proportions intact. */
@media (min-width:721px) and (max-width:1180px){
  .pk-entry-hero .reference-hero-media img{
    content:url('/assets/hero-pk-v286-tablet.webp?v=286')!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .pk-entry-hero .reference-hero-copy{width:min(500px,51vw)!important}
}

/* Desktop gets the dedicated 16:9 generated image. */
@media (min-width:1181px){
  .pk-entry-hero .reference-hero-media img{
    content:url('/assets/hero-pk-v286-desktop.webp?v=286')!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* Mobile stays exactly on the existing mobile artwork and layout. */
@media (max-width:720px){
  .pk-entry-hero .reference-hero-media img{
    content:url('/assets/hero-first-section-mobile-v143.webp?v=143')!important;
  }
}
\n\n/* ======================================================================\n   V289 — exact opening-copy replica + seamless desktop/tablet handoff\n   ====================================================================== */\n\n/* Desktop and tablet: the hero copy and cinematic scene-0 copy intentionally\n   share the exact same geometry and typography, so the copy does not jump\n   when the background crossfades into the cinematic. */\n@media (min-width:721px){\n  .pk-entry-hero .reference-hero-copy,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy{\n    position:absolute!important;\n    left:clamp(46px,3.25vw,70px)!important;\n    top:50%!important;\n    right:auto!important;\n    bottom:auto!important;\n    transform:translateY(-48%)!important;\n    width:min(520px,40vw)!important;\n    max-width:min(520px,40vw)!important;\n    padding:0!important;\n    margin:0!important;\n    text-align:left!important;\n    color:#061d43!important;\n    background:transparent!important;\n    border:0!important;\n    box-shadow:none!important;\n  }\n  .pk-entry-hero .reference-hero-copy::before,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy::before{\n    content:""!important;\n    position:absolute!important;\n    left:-24px!important;\n    top:-22px!important;\n    width:122%!important;\n    height:calc(100% + 44px)!important;\n    min-height:500px!important;\n    border-radius:42px!important;\n    z-index:-1!important;\n    pointer-events:none!important;\n    background:radial-gradient(ellipse at 29% 30%,rgba(255,255,255,.76) 0%,rgba(255,255,255,.54) 30%,rgba(255,255,255,.21) 54%,rgba(255,255,255,.05) 69%,rgba(255,255,255,0) 81%)!important;\n    filter:blur(6px)!important;\n    opacity:1!important;\n  }\n  .pk-entry-hero .reference-kicker,\n  .pk-cinema[data-scene="0"] .pk-cinema-eyebrow{\n    display:block!important;\n    margin:0 0 12px!important;\n    padding:0!important;\n    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;\n    font-size:clamp(.70rem,.82vw,.82rem)!important;\n    line-height:1.15!important;\n    font-weight:800!important;\n    letter-spacing:.20em!important;\n    text-transform:uppercase!important;\n    color:#2d77d5!important;\n    text-shadow:0 1px 0 rgba(255,255,255,.65)!important;\n  }\n  .pk-cinema[data-scene="0"] .pk-cinema-eyebrow::before{display:none!important}\n  .pk-entry-hero .reference-hero-copy h1,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy h2{\n    display:block!important;\n    margin:0!important;\n    max-width:10.4ch!important;\n    font-family:'Oswald','Arial Narrow',sans-serif!important;\n    font-size:clamp(3.45rem,5.05vw,5.25rem)!important;\n    line-height:.87!important;\n    letter-spacing:-.035em!important;\n    font-weight:700!important;\n    text-transform:uppercase!important;\n    color:#041d44!important;\n    text-shadow:0 1px 0 rgba(255,255,255,.45)!important;\n  }\n  .pk-entry-hero .reference-hero-copy h1 span,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy h2{color:#041d44!important}\n  .pk-entry-hero .reference-hero-copy h1 strong,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy h2 em{\n    display:block!important;\n    margin-top:7px!important;\n    font-family:'Caveat',cursive!important;\n    font-size:clamp(2.8rem,4.1vw,4.3rem)!important;\n    line-height:.94!important;\n    font-style:normal!important;\n    font-weight:700!important;\n    letter-spacing:-.025em!important;\n    text-transform:none!important;\n    color:#2a82e5!important;\n    -webkit-text-fill-color:#2a82e5!important;\n    background:none!important;\n    transform:none!important;\n    text-shadow:0 1px 1px rgba(255,255,255,.6)!important;\n  }\n  .pk-entry-hero .reference-script,\n  .pk-cinema[data-scene="0"] .pk-cinema-script{\n    display:block!important;\n    margin:9px 0 8px!important;\n    font-family:'Caveat',cursive!important;\n    font-size:clamp(1.65rem,2.35vw,2.3rem)!important;\n    line-height:1!important;\n    font-weight:700!important;\n    color:#061f48!important;\n    text-shadow:0 1px 1px rgba(255,255,255,.7)!important;\n  }\n  .pk-entry-hero .reference-lead,\n  .pk-cinema[data-scene="0"] #pkCinemaBody{\n    display:block!important;\n    margin:0!important;\n    max-width:38ch!important;\n    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;\n    font-size:clamp(.82rem,1.05vw,.98rem)!important;\n    line-height:1.5!important;\n    font-weight:700!important;\n    color:#112f59!important;\n    text-shadow:0 1px 1px rgba(255,255,255,.55)!important;\n  }\n  .pk-entry-hero .reference-promise,\n  .pk-cinema[data-scene="0"] .pk-cinema-promise{\n    display:block!important;\n    margin:14px 0 0!important;\n    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;\n    font-size:clamp(.68rem,.8vw,.78rem)!important;\n    line-height:1.2!important;\n    font-weight:800!important;\n    letter-spacing:.055em!important;\n    text-transform:uppercase!important;\n    color:#2a82e5!important;\n    text-shadow:0 1px 0 rgba(255,255,255,.55)!important;\n  }\n  .pk-entry-hero .reference-actions,\n  .pk-cinema[data-scene="0"] .pk-cinema-hero-actions{\n    display:flex!important;\n    flex-direction:row!important;\n    align-items:center!important;\n    justify-content:flex-start!important;\n    flex-wrap:nowrap!important;\n    gap:12px!important;\n    margin-top:18px!important;\n  }\n  .pk-entry-hero .reference-order,\n  .pk-cinema[data-scene="0"] .pk-cinema-order{\n    display:inline-flex!important;\n    align-items:center!important;\n    justify-content:center!important;\n    gap:18px!important;\n    min-width:160px!important;\n    height:50px!important;\n    min-height:50px!important;\n    padding:0 20px!important;\n    border-radius:13px!important;\n    border:1px solid #55a7ff!important;\n    background:linear-gradient(135deg,#2f93ff,#1766d6)!important;\n    color:#fff!important;\n    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;\n    font-size:.76rem!important;\n    font-weight:800!important;\n    letter-spacing:.04em!important;\n    text-decoration:none!important;\n    box-shadow:0 14px 30px rgba(23,102,214,.22)!important;\n  }\n  .pk-entry-hero .reference-story,\n  .pk-cinema[data-scene="0"] .pk-cinema-watch{\n    display:inline-flex!important;\n    align-items:center!important;\n    justify-content:center!important;\n    gap:10px!important;\n    min-width:186px!important;\n    height:50px!important;\n    min-height:50px!important;\n    padding:0 18px!important;\n    border-radius:13px!important;\n    border:1px solid rgba(145,186,221,.9)!important;\n    background:rgba(255,255,255,.94)!important;\n    color:#103255!important;\n    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;\n    font-size:.74rem!important;\n    font-weight:800!important;\n    letter-spacing:.035em!important;\n    text-decoration:none!important;\n    box-shadow:0 12px 28px rgba(14,45,84,.10)!important;\n  }\n  .pk-entry-hero .reference-story .play-ring,\n  .pk-cinema[data-scene="0"] .pk-cinema-watch .play-ring{\n    display:grid!important;place-items:center!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;border:1px solid #91badd!important;color:#176bd3!important;background:rgba(245,251,255,.96)!important;\n  }\n  .pk-cinema[data-scene="0"] .pk-cinema-chips,\n  .pk-cinema[data-scene="0"] .pk-cinema-compare{display:none!important}\n\n  /* Keep the four-benefit rail present during the opening cinematic chapter so\n     the hero handoff does not drop a major visual element mid-transition. */\n  .pk-cinema[data-scene="0"].entry-done .pk-cinema-benefits{\n    display:grid!important;\n    position:absolute!important;\n    left:clamp(46px,3.25vw,70px)!important;\n    right:clamp(46px,3.25vw,70px)!important;\n    bottom:clamp(18px,2.4vh,26px)!important;\n    width:auto!important;\n    min-height:82px!important;\n    grid-template-columns:repeat(4,minmax(0,1fr))!important;\n    gap:0!important;\n    padding:0!important;\n    border:1px solid rgba(129,192,233,.22)!important;\n    border-radius:18px!important;\n    background:linear-gradient(180deg,rgba(3,25,43,.82),rgba(2,18,31,.90))!important;\n    backdrop-filter:blur(13px)!important;\n    -webkit-backdrop-filter:blur(13px)!important;\n    box-shadow:0 22px 50px rgba(0,0,0,.22)!important;\n    overflow:hidden!important;\n    z-index:8!important;\n  }\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article{\n    min-height:82px!important;padding:12px 16px!important;border-radius:0!important;background:transparent!important;border:0!important;grid-template-columns:40px 1fr!important;gap:10px!important;\n  }\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article+article{border-left:1px solid rgba(144,199,235,.18)!important}\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article i{width:36px!important;height:36px!important;min-width:36px!important}\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article svg{width:21px!important;height:21px!important}\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article b{font-size:.68rem!important;color:#fff!important}\n  .pk-cinema[data-scene="0"] .pk-cinema-benefits article span{font-size:.59rem!important;color:#c9d8e3!important;line-height:1.3!important}\n}\n\n/* Tablet scales the exact same shared composition rather than switching to a\n   different typography system. */\n@media (min-width:721px) and (max-width:1180px){\n  .pk-entry-hero .reference-hero-copy,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy{\n    left:clamp(28px,3.5vw,44px)!important;\n    width:min(430px,48vw)!important;\n    max-width:min(430px,48vw)!important;\n  }\n  .pk-entry-hero .reference-hero-copy h1,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy h2{font-size:clamp(2.85rem,6vw,4.1rem)!important}\n  .pk-entry-hero .reference-hero-copy h1 strong,\n  .pk-cinema[data-scene="0"] .pk-cinema-copy h2 em{font-size:clamp(2.35rem,5vw,3.35rem)!important}\n  .pk-entry-hero .reference-script,\n  .pk-cinema[data-scene="0"] .pk-cinema-script{font-size:clamp(1.45rem,3.2vw,2rem)!important}\n  .pk-entry-hero .reference-lead,\n  .pk-cinema[data-scene="0"] #pkCinemaBody{font-size:clamp(.76rem,1.35vw,.9rem)!important;max-width:36ch!important}\n  .pk-entry-hero .reference-promise,\n  .pk-cinema[data-scene="0"] .pk-cinema-promise{font-size:.65rem!important}\n  .pk-entry-hero .reference-benefits,\n  .pk-cinema[data-scene="0"].entry-done .pk-cinema-benefits{\n    left:28px!important;right:28px!important;width:auto!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:74px!important\n  }\n}\n\n/* Mobile keeps the V288 dissolve timing and cinematic layout, but removes the\n   old artwork that had CLEANED / READY baked into the pixels. The same real\n   HTML copy as desktop/tablet is now displayed over a clean hero background. */\n@media (max-width:720px){\n  .pk-entry-hero .reference-hero-media img{\n    content:url('/assets/hero-pk-v286-tablet.webp?v=289')!important;\n    width:100%!important;height:100%!important;object-fit:cover!important;object-position:58% center!important;filter:none!important;\n  }\n  .pk-entry-hero .reference-hero-wash{\n    display:block!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;\n    background:linear-gradient(90deg,rgba(233,245,253,.93) 0%,rgba(233,245,253,.84) 45%,rgba(233,245,253,.34) 68%,rgba(233,245,253,0) 86%)!important;\n  }\n  .pk-entry-hero .reference-hero-copy{\n    display:block!important;position:absolute!important;z-index:10!important;left:20px!important;top:clamp(72px,10.5svh,104px)!important;right:auto!important;bottom:auto!important;transform:none!important;padding:0!important;margin:0!important;width:min(78vw,330px)!important;max-width:min(78vw,330px)!important;text-align:left!important;pointer-events:auto!important;\n  }\n  .pk-entry-hero .reference-hero-copy::before{display:none!important;content:none!important}\n  .pk-entry-hero .reference-kicker{margin:0 0 8px!important;font-size:.58rem!important;letter-spacing:.16em!important;color:#2d77d5!important}\n  .pk-entry-hero .reference-hero-copy h1{margin:0!important;max-width:10ch!important;font-family:'Oswald','Arial Narrow',sans-serif!important;font-size:clamp(2.55rem,12vw,3.45rem)!important;line-height:.87!important;letter-spacing:-.035em!important;text-transform:uppercase!important;font-weight:700!important;color:#041d44!important}\n  .pk-entry-hero .reference-hero-copy h1 span{display:block!important;color:#041d44!important}\n  .pk-entry-hero .reference-hero-copy h1 strong{display:block!important;margin-top:5px!important;font-family:'Caveat',cursive!important;font-size:clamp(2.1rem,10vw,2.85rem)!important;line-height:.94!important;text-transform:none!important;color:#2a82e5!important;-webkit-text-fill-color:#2a82e5!important;background:none!important;transform:none!important}\n  .pk-entry-hero .reference-script{display:block!important;margin:7px 0 7px!important;font-size:clamp(1.42rem,7vw,1.85rem)!important;line-height:1!important;color:#061f48!important}\n  .pk-entry-hero .reference-lead{display:block!important;margin:0!important;max-width:31ch!important;font-size:.78rem!important;line-height:1.42!important;font-weight:700!important;color:#112f59!important}\n  .pk-entry-hero .reference-promise{display:block!important;margin:10px 0 0!important;font-size:.57rem!important;line-height:1.2!important;font-weight:800!important;letter-spacing:.045em!important;color:#2a82e5!important}\n  .pk-entry-hero .reference-actions{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;margin-top:13px!important;pointer-events:auto!important}\n  .pk-entry-hero .reference-order{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:132px!important;height:45px!important;padding:0 14px!important;border-radius:12px!important;background:linear-gradient(135deg,#2f93ff,#1766d6)!important;border:1px solid #55a7ff!important;color:#fff!important;font-size:.68rem!important;font-weight:800!important;text-decoration:none!important}\n  .pk-entry-hero .reference-story{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:144px!important;height:45px!important;padding:0 10px!important;border-radius:12px!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(145,186,221,.9)!important;color:#103255!important;font-size:.66rem!important;font-weight:800!important;text-decoration:none!important}\n  .pk-entry-hero .reference-story .play-ring{width:32px!important;height:32px!important;min-width:32px!important}\n  .pk-entry-hero .reference-benefits{display:none!important}\n  .pk-entry-hero .mobile-hero-hotspots{display:none!important;pointer-events:none!important}\n}\n