/* Former H1s keep the H1 size; their own classes still win. */
h2:where(.is-h1) { font-size: 4.0625rem; }
:where(.as-h1) { display: block; min-height: 1rem; margin-top: 0; margin-bottom: 0; font-size: 4.0625rem; font-weight: 500; line-height: 1.2; }
@media screen and (max-width: 991px) { h2:where(.is-h1), :where(.as-h1) { font-size: 3.25rem; } }
@media screen and (max-width: 767px) { h2:where(.is-h1), :where(.as-h1) { font-size: 2.5rem; } }

/* Menu bar: transparent over the hero, fading to solid Dark Blue over the first 200px of scrolling
   (--owp-head-a, set below), the same way the Pack Tech site does it. The logo and links stay
   white, so Webflow's light/dark inversion is switched off. */
.new-nav_component { background-color: rgba(21, 57, 98, var(--owp-head-a, 0)) !important; box-shadow: none !important; min-height: 0; }
.new-nav_component .navbar_brand, .new-nav_component .menu-icon { filter: none !important; }
/* A compact bar: logo, links and button share one centre line. */
.new-nav_component .new-nav_container { height: 5.5rem; padding-top: 0; padding-bottom: 0; align-items: center; }
.new-nav_component .navbar_brand { display: flex; align-items: center; }
/* The logo never fades out (Webflow faded it on parts of the homepage). */
.new-nav_component .navbar_logo { width: 4.5rem; opacity: 1 !important; visibility: visible !important; }
@media screen and (max-width: 767px) {
  .new-nav_component .new-nav_container { height: 4.5rem; }
  .new-nav_component .navbar_logo { width: 3.75rem; }
}
#team { scroll-margin-top: 6rem; }

/* Desktop menu bar: logo on the left, links centred in the space between, "Contact us" on the
   right, the same as the Pack Tech site (and from the same width, 1181px). */
.desktop-nav { display: none; align-items: center; column-gap: 2rem; }
.desktop-nav_link { color: var(--white); font-size: 1rem; font-weight: 400; line-height: 1.2; text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
.desktop-nav_link:hover, .desktop-nav_link.w--current { border-bottom-color: currentColor; }
.desktop-nav .button.desktop-nav_cta { padding: .625rem 1.5rem; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
@media screen and (min-width: 1181px) {
  .new-nav_component .new-nav_wrapper { flex: 1; }
  .desktop-nav { display: flex; flex: 1; padding-left: 2rem; }
  .desktop-nav_link:first-child, .desktop-nav .button.desktop-nav_cta { margin-left: auto; }
  .new-nav_component .new-nav_wrapper .navbar_menu-button.w-nav-button { display: none !important; }
}

/* Page width: the same as the Pack Tech site. Its content is 80rem wide on its own (fluid) type
   scale, with at least 5% on each side; --owp-wrap is that width in px and vw, so both sites line
   up exactly whatever this site's own type scale is. Menu, sections and footer all use it. */
:root { --owp-wrap: calc(560px + 50vw); }
@media screen and (max-width: 1440px) { :root { --owp-wrap: calc(510.29px + 53.452vw); } }
@media screen and (max-width: 991px) { :root { --owp-wrap: calc(970.35px + 31.25vw); } }
:root {
  --owp-side: max(5%, calc((100% - var(--owp-wrap)) / 2));
  --global--page-padding: var(--owp-side);
  --global--container-large: var(--owp-wrap);
}
.new-nav_component { padding-left: var(--owp-side) !important; padding-right: var(--owp-side) !important; }
/* Sections with their own side padding (the sticky image sections and the horizontal process row). */
@media screen and (min-width: 992px) {
  .scroll-image_component, .process_banner { padding-left: var(--owp-side); padding-right: var(--owp-side); }
}
.landing-navbar .padding-global { padding-left: var(--owp-side); padding-right: var(--owp-side); }

/* Buttons: the same size as on the Pack Tech site everywhere (page buttons, menu, contact page,
   landing page form, footer). Pack Tech's buttons are .75rem 1.5rem with 1rem text on its own type
   scale; --pt-rem is that scale's rem in px and vw, so both sites match exactly. */
:root { --pt-rem: calc(7px + .625vw); }
@media screen and (max-width: 1440px) { :root { --pt-rem: calc(6.3786px + .66815vw); } }
@media screen and (max-width: 991px) { :root { --pt-rem: calc(12.129px + .390625vw); } }
@media screen and (max-width: 479px) { :root { --pt-rem: calc(11.9916px + .83682vw); } }
.button.button, .desktop-nav .button.desktop-nav_cta, .contact-us_page .contact-us_btn, .form-button.lp.lp, .sf .sf-btn {
  padding: calc(.75 * var(--pt-rem)) calc(1.5 * var(--pt-rem)); font-size: var(--pt-rem); line-height: 1.2; font-weight: 300; min-height: 0;
}
.button.button > .button-text { font-size: inherit; line-height: 1.2; margin: 0; padding: 0; }
.form-button.lp.lp { border: 1px solid #fff; }

/* Buttons are text only (no icons inside), centred. */
.button > .button-icon { display: none !important; }
.button > .button-text { margin: 0; }

/* Headings and paragraphs: no single stray word on the last line. Headings that sit side by
   side get the same height (LOCAL_JS), so the text under them starts on the same line. */
h1, h2, h3, h4, .heading-display, .heading-large, .heading-medium, .heading-small { text-wrap: balance; }
p { text-wrap: pretty; }

/* Branding page, "Official OWP logos": the photo keeps its size but sits behind the text, so the
   text can be selected (the photo is a new file without the faint edges, see brand_photo()). */
.uneven_image-wrapper.branding-4 { pointer-events: none; }
.uneven_col-2.branding-4 { position: relative; z-index: 1; }

/* Process page: a shorter "The raw material" band (the granulate falls into the lower part of the
   video), and less space before the HDPE section. */
@media screen and (min-width: 992px) {
  .raw_section { aspect-ratio: 16 / 5; overflow: hidden; }
  .raw_section .raw_video video { object-position: 50% 85%; }
  .hdpe_section .hdpe_layout { padding-top: 3rem; }
}

/* Documentation page, "The highest of standards": the points two by two, with smaller icons.
   "Tracking through blockchain" stays a section of its own, full width with its own drawing. */
@media screen and (min-width: 992px) {
  .doc_component { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5rem; }
  .doc_component > :not(.compliance_layout) { grid-column: 1 / -1; }
  .doc_component > .compliance_image { justify-self: center; }
  .doc_component > .compliance_layout:has(.blockhain-embed) { grid-column: 1 / -1; }
  .doc_component > .compliance_layout:not(:has(.blockhain-embed)) { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.75rem; margin-top: 4.5rem; align-items: start; }
  .doc_component > .compliance_layout:not(:has(.blockhain-embed)) .comp_col-1 { justify-content: flex-start; }
  .doc_component .doc_icon { width: 4.5rem; height: auto; }
  .doc_component > .compliance_layout:not(:has(.blockhain-embed)) .doc_max-width { max-width: none; }
  .doc_component > .compliance_layout:not(:has(.blockhain-embed)) h3 { font-size: 2.75rem; line-height: 1.15; }
}

/* Packaging page, "Base color of OWP raw material": readable colors on the light grey. */
.apperance_section .heading-large, .apperance_section h2 { color: var(--owp-dark-blue); }
.apperance_section p, .apperance_section .text-size-medium { color: var(--owp-dark-blue); }
.apperance_tab-link { color: var(--owp-light-blue); opacity: 1; }
.apperance_tab-link p { color: inherit; }
.apperance_tab-link.w--current { color: var(--owp-dark-blue); opacity: 1; }

/* Corners, the same on both sites: 8px on buttons and form fields, 16px on form boxes. */
.button, .button-dark, .button-3, .button-5, .form-button, .form-button-2, .form-button.lp, .w-button, .desktop-nav .button.desktop-nav_cta { border-radius: 8px; }
.w-input, .w-select, .form-input, .form-input-standard, .form-input-2 { border-radius: 8px; }

/* Hero text over video or photo: a soft shadow keeps it readable on light frames. */
.hero_component .heading-display, .hero_component .hero_paragraph-wrapper { text-shadow: 0 2px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3); }
.hero_component .hero-light_scroll-text { text-shadow: 0 1px 6px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4); }
.hero_component .hero-light_scroll-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 4px rgba(0, 0, 0, .35)); }
/* Cookie banner, settings window and cookie policy tables (assets/local/consent.js) */
.owp-cc { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 2147483000; box-sizing: border-box; width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; color: #1a1a1a; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(21, 57, 98, .22); font-family: Gotham, Arial, sans-serif; }
.owp-cc[hidden], .owp-cc-modal[hidden], .owp-cc-id[hidden] { display: none; }
.owp-cc-h { margin: 0 0 .5rem; color: #153962; font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.owp-cc-t { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.55; }
.owp-cc a { color: #153962; text-decoration: underline; }
.owp-cc-modal a { color: #153962; text-decoration: underline; }
.owp-cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.owp-cc-btn { padding: .75rem 1.25rem; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1; border: 1px solid #153962; border-radius: 8px; cursor: pointer; transition: background-color .2s, color .2s; }
.owp-cc-dark { color: #fff; background: #153962; }
.owp-cc-dark:hover { background: #4c748b; border-color: #4c748b; }
.owp-cc-ghost { color: #153962; background: #fff; }
.owp-cc-ghost:hover { background: #e8ebef; }
.owp-cc-link { padding: .5rem .25rem; font: inherit; font-size: .875rem; color: #153962; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.owp-cc-btn:focus-visible, .owp-cc-link:focus-visible, .owp-cc-x:focus-visible, .owp-cc-switch input:focus-visible + span { outline: 2px solid #75c3c9; outline-offset: 2px; }
.owp-cc-modal { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(21, 57, 98, .45); font-family: Gotham, Arial, sans-serif; }
.owp-cc-box { position: relative; box-sizing: border-box; width: min(36rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 2rem; color: #1a1a1a; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.owp-cc-box .owp-cc-h { padding-right: 2rem; font-size: 1.375rem; }
.owp-cc-x { position: absolute; top: 1.25rem; right: 1.25rem; display: flex; width: 2rem; height: 2rem; padding: .3rem; color: #153962; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.owp-cc-x:hover { background: #e8ebef; }
.owp-cc-cat { padding: 1rem 0; border-top: 1px solid #e8ebef; }
.owp-cc-cat p { margin: .375rem 0 0; font-size: .8125rem; line-height: 1.5; color: #4c4c4c; }
.owp-cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.owp-cc-cat-title { color: #153962; font-size: .9375rem; font-weight: 500; }
.owp-cc-switch { position: relative; flex: none; width: 2.75rem; height: 1.5rem; }
.owp-cc-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.owp-cc-switch input:disabled { cursor: not-allowed; }
.owp-cc-switch span { position: absolute; inset: 0; background: #c9d0d8; border-radius: 1rem; transition: background-color .2s; }
.owp-cc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; }
.owp-cc-switch input:checked + span { background: #153962; }
.owp-cc-switch input:disabled + span { opacity: .55; }
.owp-cc-switch input:checked + span::after { transform: translateX(20px); }
.owp-cc-id { margin: 0 0 1rem; padding-top: 1rem; border-top: 1px solid #e8ebef; font-size: .75rem; color: #4c748b; word-break: break-all; }
.owp-cc-box .owp-cc-row { padding-top: .5rem; }
html.owp-cc-lock { overflow: hidden; }
@media (max-width: 479px) {
  .owp-cc { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: 1.25rem; }
  .owp-cc-row .owp-cc-btn { flex: 1 1 auto; }
  .owp-cc-box { padding: 1.5rem 1.25rem; }
}
.owp-cookie-policy h2 { margin: 2.5rem 0 1rem; }
.owp-cookie-policy h3 { margin: 2rem 0 .5rem; }
.owp-cookie-table-wrap { overflow-x: auto; margin: 1rem 0 0; }
.owp-cookie-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .875rem; line-height: 1.45; }
.owp-cookie-table th, .owp-cookie-table td { padding: .625rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e8ebef; }
.owp-cookie-table th { color: #153962; font-weight: 500; background: #e8ebef; }
.owp-cookie-table td:first-child { font-weight: 500; overflow-wrap: anywhere; }


.sf { background: var(--owp-dark-blue, #153962); color: #fff; font-family: Gotham, "Helvetica Neue", Arial, sans-serif; font-weight: 300; line-height: 1.5; font-size: calc(7px + .625vw); }
@media screen and (max-width: 1440px) { .sf { font-size: calc(6.3786px + .66815vw); } }
@media screen and (max-width: 991px) { .sf { font-size: calc(12.129px + .390625vw); } }
@media screen and (max-width: 479px) { .sf { font-size: calc(11.9916px + .83682vw); } }
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf :where(p, ul, li) { margin: 0; padding: 0; font-size: 1em; line-height: 1.5; }
.sf-in { padding: 4.5em max(5%, calc((100% - 80em) / 2)) 2.5em; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 4em; }
.sf-col { min-width: 0; padding: 0 3em; border-left: 1px solid rgba(255, 255, 255, .45); overflow-wrap: anywhere; }
.sf-col:first-child { padding-left: 0; border-left: 0; }
.sf-col:last-child { padding-right: 0; }
.sf-h { margin: 0 0 1.75em; font-size: 1em; font-weight: 300; line-height: 1.3; letter-spacing: .25em; text-transform: uppercase; }
.sf-h.is-next { margin-top: 2.5em; }
.sf-sub { margin: 0 0 .35em; font-size: .8125em; font-weight: 500; letter-spacing: .04em; opacity: .65; }
.sf-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.sf-list:last-child { margin-bottom: 0; }
.sf-list li { margin: 0 0 .3em; }
.sf a { color: #fff; text-decoration: none; transition: opacity .2s; }
.sf a:hover { opacity: .6; }
.sf-social { display: flex; align-items: center; gap: 1.25em; margin-top: 1.25em; }
.sf-social a { display: block; width: 1.5em; height: 1.5em; }
.sf-social svg { display: block; width: 100%; height: 100%; }
.sf-news { display: grid; gap: 1em; max-width: 26em; margin: 0; }
.sf-news-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; }
.sf-news input[type="text"], .sf-news input[type="email"] { display: block; width: 100%; height: 2.75em; margin: 0; padding: .25em 0; font: inherit; font-size: 1em; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); border-radius: 0; box-shadow: none; }
.sf-news input::placeholder { color: #fff; opacity: .75; }
.sf-news input:focus { outline: none; border-bottom-color: #fff; }
.sf-check { display: flex; gap: .6em; align-items: flex-start; margin: .5em 0 0; font-size: .875em; font-weight: 300; line-height: 1.4; cursor: pointer; }
.sf-check input { flex: none; width: 1.1em; height: 1.1em; margin: .1em 0 0; accent-color: #fff; }
.sf-fine { font-size: .75em; line-height: 1.5; opacity: .8; }
.sf-fine a { text-decoration: underline; }
.sf-err { font-size: .8em; color: #ffb4a8; }
.sf-btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; margin-top: .25em; padding: .75em 1.75em; font: inherit; font-size: 1em; font-weight: 400; line-height: 1.2; color: #000; background: #fff; border: 1px solid #fff; border-radius: 8px; cursor: pointer; transition: background-color .15s; }
.sf-btn:hover { background: #e9e8e4; }
.sf-btn[disabled] { opacity: .6; cursor: wait; }
.sf-done { font-size: 1em; }
.sf-sr, .sf-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-base { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5em 2.5em; padding-top: 2.5em; border-top: 1px solid rgba(255, 255, 255, .45); }
.sf-logos { display: flex; align-items: center; gap: 2em; flex: none; }
.sf-logos img { display: block; max-width: none; }
.sf-logo-pt { width: 9.5em; height: auto; }
.sf-logo-owp { width: auto; height: 3.25em; }
.sf-copy { flex: 1 1 14em; font-size: .875em; text-align: right; }
.sf-linkbtn { padding: 0; margin: 0; font: inherit; color: #fff; background: none; border: 0; cursor: pointer; transition: opacity .2s; }
.sf-linkbtn:hover { opacity: .6; }
.sf :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media screen and (max-width: 991px) {
  .sf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 3em; }
  .sf-col:first-child { grid-column: 1 / -1; padding: 0 0 3em; border-bottom: 1px solid rgba(255, 255, 255, .45); }
  .sf-col:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media screen and (max-width: 767px) {
  .sf-in { padding-top: 3.5em; }
  .sf-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 3em; }
  .sf-col, .sf-col:last-child { padding: 0; border-left: 0; }
  .sf-col:first-child { padding-bottom: 3em; }
  .sf-base { flex-direction: column; align-items: flex-start; }
  .sf-copy { flex: none; text-align: left; }
}
@media screen and (max-width: 479px) {
  .sf-news-names { grid-template-columns: minmax(0, 1fr); }
}