/* src/css/framework/variables.css */
@layer variables {
  :root {
    --primary-color: #fff;
    --blue-color: #2b3990;
    --red-color: #ed1c24;
    --orange-color: #97884e;
    --navy-color: #141346;
    --light-green-color: #d6d1c4;
    --grey-color: #7c7c7b;
    --ia-grey-color: #eef9fe;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-13: 3.25rem;
    --spacing-14: 3.5rem;
    --spacing-15: 3.75rem;
    --spacing-16: 4rem;
    --spacing-17: 4.25rem;
    --spacing-18: 4.5rem;
    --spacing-19: 4.75rem;
    --spacing-20: 5rem;
    --spacing-21: 5.25rem;
    --spacing-22: 5.5rem;
    --spacing-23: 5.75rem;
    --spacing-24: 6rem;
    --spacing-25: 6.25rem;
    --spacing-26: 6.5rem;
    --spacing-27: 6.75rem;
    --spacing-28: 7rem;
    --spacing-29: 7.25rem;
    --spacing-30: 7.5rem;
    --spacing-31: 7.75rem;
    --spacing-32: 8rem;
    --min-page-margin: 5vw;
    --gap-custom: 0;
    --basis-custom: 0;
    --spacing-custom: 0;
    --input-outline-color: #8888FF;
    --input-border-color: #333;
    --input-border-radius: 0.5rem;
    --input-border: solid 0.0625rem var(--input-border-color);
    --input-height: 2.5rem;
    --input-padding: 1rem;
    --basic-transition-time: 120ms;
    --card-radius: var(--spacing-2);
  }
}

/* src/css/framework/animations.css */
@layer animations {
  :root {
    --slide-offset: 2rem;
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes slide-in-from-top {
    0% {
      opacity: 0;
      translate: 0 calc(var(--slide-offset) * -1);
    }
    100% {
      opacity: 1;
      translate: 0;
    }
  }
  @keyframes slide-in-from-right {
    0% {
      translate: var(--slide-offset) 0;
    }
    100% {
      translate: 0;
    }
  }
  @keyframes slide-in-from-bottom {
    0% {
      translate: var(--translate-h, 0) var(--slide-offset);
    }
    100% {
      translate: var(--translate-h, 0) 0;
    }
  }
  @keyframes slide-in-from-left {
    0% {
      translate: calc(var(--slide-offset) * -1) 0;
    }
    100% {
      translate: 0;
    }
  }
  @keyframes slide-out-to-top {
    0% {
      translate: 0;
    }
    100% {
      translate: 0 calc(var(--slide-offset) * -1);
    }
  }
  @keyframes slide-out-to-right {
    0% {
      translate: 0;
    }
    100% {
      translate: var(--slide-offset) 0;
    }
  }
  @keyframes slide-out-to-bottom {
    0% {
      translate: 0;
    }
    100% {
      translate: 0 var(--slide-offset);
    }
  }
  @keyframes slide-out-to-left {
    0% {
      translate: 0;
    }
    100% {
      translate: calc(var(--slide-offset) * -1) 0;
    }
  }
  @keyframes button-hover {
    0% {
      opacity: 0;
      scale: 1;
    }
    1% {
      opacity: 0.75;
      scale: 1;
    }
    100% {
      opacity: 0;
      scale: 1.5;
    }
  }
}

/* src/css/framework/reset.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :root {
    line-height: 1.15;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    line-height: 1.5;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  hr,
  figure,
  p,
  ol,
  ul,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.15;
  }
  ol[class],
  ul[class] {
    list-style: none;
    padding: 0;
  }
  ol:not([class]),
  ul:not([class]) {
    margin: 0 0 0 1.25em;
    padding: 0;
    list-style-type: none;
  }
  ul:not([class]) li {
    list-style-type: disc;
  }
  ol:not([class]) li {
    list-style-type: decimal;
  }
  svg,
  video,
  canvas,
  iframe,
  embed,
  object,
  picture,
  img {
    display: block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
  }
  a[class] {
    color: currentColor;
    text-decoration: none;
    outline: none;
  }
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline-color: var(--input-outline-color);
  }
  button {
    cursor: pointer;
  }
  textarea:not([rows]) {
    min-height: 10em;
  }
  img,
  picture {
    display: block;
    max-width: 100%;
  }
  address {
    font-style: normal;
  }
}

/* src/css/framework/framework.css */
@layer framework {
  .content {
    --content-width: 85rem;
    margin: 0 auto;
    max-width: var(--content-width);
    width: 100%;
    &.content--ia {
      max-width: 48rem;
      @media only screen and (max-width: 48rem) {
        padding: 0 var(--min-page-margin);
      }
    }
    &.content--wide {
      max-width: 100rem;
      @media only screen and (max-width: 100rem) {
        padding: 0 var(--min-page-margin);
      }
    }
    &.content--smaller {
      max-width: 65rem;
      @media only screen and (max-width: 75rem) {
        padding: 0 var(--min-page-margin);
      }
    }
    &.content--small {
      max-width: 41.25rem;
      @media only screen and (max-width: 45rem) {
        padding: 0 var(--min-page-margin);
      }
    }
    &.content--very-small {
      max-width: 34.5rem;
      @media only screen and (max-width: 34.5rem) {
        padding: 0 var(--min-page-margin);
      }
    }
    @media only screen and (max-width: 86rem) {
      &:not([class*=--]) {
        padding: 0 var(--min-page-margin);
      }
    }
  }
  .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    &.tablet-column {
      @media only screen and (max-width: 980px) {
        flex-direction: column;
      }
    }
    @media only screen and (max-width: 680px) {
      flex-direction: column;
      &.mobile-row {
        flex-direction: row;
      }
    }
  }
  .row-reverse {
    flex-direction: row-reverse;
    @media only screen and (max-width: 980px) {
      flex-direction: column;
    }
  }
  .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }
  .align-end {
    align-items: flex-end;
  }
  .align-center {
    align-items: center;
  }
  .stretch {
    align-items: stretch;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .space-between {
    justify-content: space-between;
  }
  .space-around {
    justify-content: space-around;
  }
  .space-evenly {
    justify-content: space-evenly;
  }
  .center {
    justify-content: center;
    align-items: center;
  }
  .wrap {
    flex-wrap: wrap;
  }
  .wrap-responsive {
    @media only screen and (max-width: 1308px) {
      flex-wrap: wrap;
    }
  }
  .full-width {
    width: 100%;
  }
  .basis-fit {
    flex: 1 1 100%;
  }
  .basis-100 {
    flex: 0 0 100%;
  }
  .w-100 {
    width: 100%;
  }
  .basis-75 {
    flex: 0 0 75%;
  }
  .w-75 {
    width: 75%;
  }
  .basis-66 {
    flex: 0 0 66.66%;
  }
  .w-66 {
    width: 66.66%;
  }
  .basis-50 {
    flex: 0 0 50%;
  }
  .w-50 {
    width: 50%;
  }
  .basis-33 {
    flex: 0 0 33.33%;
  }
  .w-33 {
    width: 33.33%;
  }
  .basis-25 {
    flex: 0 0 25%;
  }
  .w-25 {
    width: 25%;
  }
  .basis-20 {
    flex: 0 0 20%;
  }
  .w-20 {
    width: 20%;
  }
  .basis-custom {
    flex: 0 0 var(--basis-custom, 0);
  }
  @media only screen and (max-width: 680px) {
    [class*=w-] {
      width: 100%;
    }
  }
  .grow {
    flex-grow: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .band {
    --band-background: #fff;
    padding: var(--spacing-32) 0;
    position: relative;
    z-index: 10;
    background: var(--band-background);
    @media only screen and (max-width: 1024px) {
      padding: var(--spacing-16) 0;
    }
    @media only screen and (max-width: 980px) {
      padding: var(--spacing-14) 0;
    }
    &.band--min-full-screen {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media only screen and (max-width: 980px) {
        min-height: 0;
      }
    }
    &.band--off-white {
      color: #f3f3f6;
    }
    &.band--light-grey {
      background: #f7f5ec;
    }
    &.band--grey {
      background: #e8e8eb;
    }
    &.band--navy {
      background: #2b2a58;
    }
    &.band--pad-small {
      padding: var(--spacing-19) 0;
    }
    &.band--small-pad-bottom {
      padding: var(--spacing-32) 0 var(--spacing-19);
    }
    &.band--no-pad-bottom {
      padding-bottom: 0;
    }
    &.band--no-pad-top {
      padding-top: 0;
    }
  }
}

/* src/css/framework/utility.css */
@layer utility {
  body[data-scroll-lock=true] {
    overflow: hidden;
  }
  .mobile-only {
    display: none;
  }
  @media only screen and (max-width: 680px) {
    .desktop-only {
      display: none;
    }
    .mobile-only {
      display: block;
      &.row,
      &.column {
        display: flex;
      }
    }
  }
  .gap {
    --gap-size: 0;
    --gap-size-v: var(--gap-size);
    --gap-size-h: var(--gap-size);
    --tablet-gap-size: calc(var(--gap-size) * 0.8);
    --mobile-gap-size: calc(var(--gap-size) * 0.7);
    --tablet-gap-size-v: var(--gap-size-v, var(--tablet-gap-size));
    --tablet-gap-size-h: var(--gap-size-h, var(--tablet-gap-size));
    --mobile-gap-size-v: var(--gap-size-v, var(--mobile-gap-size));
    --mobile-gap-size-h: var(--gap-size-h, var(--mobile-gap-size));
    gap: var(--gap-size-v) var(--gap-size-h);
    @media only screen and (max-width: 1024px) {
      --gap-size-v: var(--tablet-gap-size);
      --gap-size-h: var(--tablet-gap-size);
      gap: var(--tablet-gap-size-v) var(--tablet-gap-size-h);
    }
    @media only screen and (max-width: 680px) {
      --gap-size-v: var(--mobile-gap-size);
      --gap-size-h: var(--mobile-gap-size);
      gap: var(--mobile-gap-size-v) var(--mobile-gap-size-h);
    }
  }
  .margin-none {
    margin: 0;
  }
  .margin-auto {
    margin: 0 auto;
  }
  [class*=margin] {
    --margin-size: 0;
    --tablet-margin-size: var(--margin-size);
    --mobile-margin-size: var(--margin-size);
    --margin-size-v: var(--margin-size);
    --tablet-margin-size-v: var(--margin-size-v, var(--tablet-margin-size));
    --mobile-margin-size-v: var(--margin-size-v, var(--mobile-margin-size));
    --margin-size-h: var(--margin-size);
    --tablet-margin-size-h: var(--margin-size-h, var(--tablet-margin-size));
    --mobile-margin-size-h: var(--margin-size-h, var(--mobile-margin-size));
    --margin-size-t: var(--margin-size-v);
    --tablet-margin-size-t: var(--margin-size-t, var(--tablet-margin-size-v));
    --mobile-margin-size-t: var(--margin-size-t, var(--mobile-margin-size-v));
    --margin-size-r: var(--margin-size-h);
    --tablet-margin-size-r: var(--margin-size-r, var(--tablet-margin-size-h));
    --mobile-margin-size-r: var(--margin-size-r, var(--mobile-margin-size-h));
    --margin-size-b: var(--margin-size-v);
    --tablet-margin-size-b: var(--margin-size-b, var(--tablet-margin-size-v));
    --mobile-margin-size-b: var(--margin-size-b, var(--mobile-margin-size-v));
    --margin-size-l: var(--margin-size-h);
    --tablet-margin-size-l: var(--margin-size-l, var(--tablet-margin-size-h));
    --mobile-margin-size-l: var(--margin-size-l, var(--mobile-margin-size-h));
    @media only screen and (max-width: 1024px) {
      --margin-size-v: var(--tablet-margin-size);
      --margin-size-h: var(--tablet-margin-size);
    }
    @media only screen and (max-width: 680px) {
      --margin-size-v: var(--mobile-margin-size);
      --margin-size-h: var(--mobile-margin-size);
    }
  }
  .margin {
    margin: var(--margin-size-t) var(--margin-size-r) var(--margin-size-b) var(--margin-size-l);
    @media only screen and (max-width: 1024px) {
      margin: var(--tablet-margin-size-t) var(--tablet-margin-size-r) var(--tablet-margin-size-b) var(--tablet-margin-size-l);
    }
    @media only screen and (max-width: 680px) {
      margin: var(--mobile-margin-size-t) var(--mobile-margin-size-r) var(--mobile-margin-size-b) var(--mobile-margin-size-l);
    }
  }
  .margin-top {
    margin-top: var(--margin-size-t);
    @media only screen and (max-width: 1024px) {
      margin-top: var(--tablet-margin-size-t);
    }
    @media only screen and (max-width: 680px) {
      margin-top: var(--mobile-margin-size-t);
    }
  }
  .margin-right {
    margin-right: var(--margin-size-r);
    @media only screen and (max-width: 1024px) {
      margin-right: var(--tablet-margin-size-r);
    }
    @media only screen and (max-width: 680px) {
      margin-right: var(--mobile-margin-size-r);
    }
  }
  .margin-bottom {
    margin-bottom: var(--margin-size-b);
    @media only screen and (max-width: 1024px) {
      margin-bottom: var(--tablet-margin-size-b);
    }
    @media only screen and (max-width: 680px) {
      margin-bottom: var(--mobile-margin-size-b);
    }
  }
  .margin-left {
    margin-left: var(--margin-size-l);
    @media only screen and (max-width: 1024px) {
      margin-left: var(--tablet-margin-size-l);
    }
    @media only screen and (max-width: 680px) {
      margin-left: var(--mobile-margin-size-l);
    }
  }
  .padding-none {
    padding: 0;
  }
  [class*=padding] {
    --pad-size: 0;
    --tablet-pad-size: var(--pad-size);
    --mobile-pad-size: var(--pad-size);
    --pad-size-v: var(--pad-size);
    --tablet-pad-size-v: var(--pad-size-v, var(--tablet-pad-size));
    --mobile-pad-size-v: var(--pad-size-v, var(--mobile-pad-size));
    --pad-size-h: var(--pad-size);
    --tablet-pad-size-h: var(--pad-size-h, var(--tablet-pad-size));
    --mobile-pad-size-h: var(--pad-size-h, var(--mobile-pad-size));
    --pad-size-t: var(--pad-size-v);
    --tablet-pad-size-t: var(--pad-size-t, var(--tablet-pad-size-v));
    --mobile-pad-size-t: var(--pad-size-t, var(--mobile-pad-size-v));
    --pad-size-r: var(--pad-size-h);
    --tablet-pad-size-r: var(--pad-size-r, var(--tablet-pad-size-h));
    --mobile-pad-size-r: var(--pad-size-r, var(--mobile-pad-size-h));
    --pad-size-b: var(--pad-size-v);
    --tablet-pad-size-b: var(--pad-size-b, var(--tablet-pad-size-v));
    --mobile-pad-size-b: var(--pad-size-b, var(--mobile-pad-size-v));
    --pad-size-l: var(--pad-size-h);
    --tablet-pad-size-l: var(--pad-size-l, var(--tablet-pad-size-h));
    --mobile-pad-size-l: var(--pad-size-l, var(--mobile-pad-size-h));
  }
  .padding {
    padding: var(--pad-size-t) var(--pad-size-r) var(--pad-size-b) var(--pad-size-l);
    @media only screen and (max-width: 1024px) {
      padding: var(--tablet-pad-size-t) var(--tablet-pad-size-r) var(--tablet-pad-size-b) var(--tablet-pad-size-l);
    }
    @media only screen and (max-width: 680px) {
      padding: var(--mobile-pad-size-t) var(--mobile-pad-size-r) var(--mobile-pad-size-b) var(--mobile-pad-size-l);
    }
  }
  .pad-top {
    padding-top: var(--pad-size-t);
    @media only screen and (max-width: 1024px) {
      padding-top: var(--tablet-pad-size-t);
    }
    @media only screen and (max-width: 680px) {
      padding-top: var(--mobile-pad-size-t);
    }
  }
  .pad-right {
    padding-right: var(--pad-size-r);
    @media only screen and (max-width: 1024px) {
      padding-right: var(--tablet-pad-size-r);
    }
    @media only screen and (max-width: 680px) {
      padding-right: var(--mobile-pad-size-r);
    }
  }
  .pad-bottom {
    padding-bottom: var(--pad-size-b);
    @media only screen and (max-width: 1024px) {
      padding-bottom: var(--tablet-pad-size-b);
    }
    @media only screen and (max-width: 680px) {
      padding-bottom: var(--mobile-pad-size-b);
    }
  }
  .pad-left {
    padding-left: var(--pad-size-l);
    @media only screen and (max-width: 1024px) {
      padding-left: var(--tablet-pad-size-l);
    }
    @media only screen and (max-width: 680px) {
      padding-left: var(--mobile-pad-size-l);
    }
  }
  .text-align-left {
    text-align: left;
  }
  .text-align-right {
    text-align: right;
  }
  .text-align-center {
    text-align: center;
  }
  .absolute-center {
    position: absolute;
    inset: 50% 0 0 50%;
    translate: -50% -50%;
  }
  .white-text {
    color: #fff;
  }
  .ui-hover {
    position: relative;
    overflow: hidden;
    z-index: 10;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: opacity var(--basic-transition-time) ease-out;
      z-index: -10;
      pointer-events: none;
    }
    &.ui-hover--light::before {
      background: rgba(255, 255, 255, 0.1);
    }
    &:hover::before,
    &:focus::before {
      opacity: 1;
    }
  }
  .thin-scroll-bar {
    --max-height: 100vh;
    overflow-y: scroll;
    scrollbar-width: thin;
    max-height: var(--max-height);
    &::-webkit-scrollbar {
      width: 0.25rem;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(155, 155, 155, 0.5);
      border-radius: 0.5rem;
    }
  }
  .img-radius {
    --radius: 1.25rem;
    overflow: hidden;
    border-radius: var(--radius);
    & img {
      display: block;
      width: 100%;
    }
    &.img-radius--hover {
      & img {
        transition: scale 150ms ease-out;
      }
      &:hover img {
        scale: 1.1;
      }
    }
  }
}

/* src/css/fonts.css */
@layer fonts {
  :root {
    --primary-font-color: #7c7c7b;
    --secondary-font-color: var(--navy-color);
    font-size: 1em;
    font-weight: 300;
    font-family: "Poppins", sans-serif;
    color: var(--primary-font-color);
  }
  @media only screen and (min-width: 156.25rem) {
    :root {
      font-size: calc(1em + 0.1vw);
    }
  }
  @media only screen and (min-width: 187.5rem) {
    :root {
      font-size: calc(1em + 0.5vw);
    }
  }
  @media only screen and (max-width: 86rem) {
    :root {
      font-size: calc(1em - 0.2vw);
    }
  }
  body {
    line-height: 1.5;
  }
  [class^=heading] {
    display: block;
    width: 100%;
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy-color);
    &.white-text {
      color: #fff;
    }
    &.orange-text {
      color: var(--orange-color);
    }
    &.lighter-blue {
      color: var(--blue-color);
    }
  }
  .heading-1 {
    font-size: 2.75em;
    font-weight: 600;
    @media only screen and (max-width: 680px) {
      font-size: 2em;
    }
  }
  .heading-2 {
    font-size: 2em;
    margin-bottom: 2.5rem;
    @media only screen and (max-width: 680px) {
      font-size: 1.5em;
    }
  }
  .heading-3 {
    font-size: 1.5em;
    @media only screen and (max-width: 680px) {
      font-size: 1.25em;
    }
  }
  .heading-4 {
    font-size: 1.25em;
    @media only screen and (max-width: 680px) {
      font-size: 1.125em;
    }
  }
  p,
  span {
    color: var(--secondary-font-color);
    &.white-text {
      color: #fff;
    }
    &.orange-text {
      color: var(--orange-color);
    }
    &.grey-text {
      color: #7c7c7b;
    }
    &.dark-grey-text {
      color: #4a4a49;
    }
  }
  .body-text {
    font-size: 1.2em;
    @media only screen and (max-width: 980px) {
      font-size: 1em;
    }
  }
  .column > p,
  .row > p {
    width: 100%;
  }
  .section-header {
    color: var(--orange-color);
    font-weight: 600;
    font-size: 1.875em;
    @media only screen and (max-width: 980px) {
      font-size: 1.25em;
    }
  }
}

/* src/css/modal/modal.css */
@layer modal {
  .modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    padding: 10vh 0;
    animation: fade-in 150ms ease-out both;
    @media only screen and (max-width: 680px) {
      overflow: hidden;
      padding: 0;
    }
    .modal__window {
      background: #fff;
      border: solid 0.0625rem rgba(255, 255, 255, 0.5);
      padding: var(--spacing-12) var(--spacing-12);
      border-radius: 1.25rem;
      min-width: 20rem;
      animation: slide-in-from-bottom 150ms ease-out both, fade-in 150ms ease-out both;
      @media only screen and (max-width: 680px) {
        padding: 5rem 5vw;
        border-radius: 0;
        height: 100vh;
        overflow-y: auto;
      }
    }
    .modal__close {
      position: absolute;
      inset: 1rem 1rem auto auto;
      width: 2rem;
      height: 2rem;
      z-index: 1000;
      border-radius: 0.25rem;
      background: none;
      &::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        width: 1.5rem;
        height: 1.5rem;
        background: url(/img/svg/close.svg) no-repeat center /60%;
      }
    }
    &[aria-hidden=true] {
      animation: fade-out 150ms ease-out both;
      pointer-events: none;
      .modal__window {
        animation: slide-out-to-bottom 150ms ease-out both, fade-out 150ms ease-out both;
      }
    }
  }
}

/* src/css/components/button.css */
@layer components {
  .button {
    border-radius: 5rem;
    height: 3.5rem;
    border: solid 0.25rem var(--orange-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0 2.125rem;
    font-size: 1.375em;
    font-weight: 500;
    &.button--navy-text {
      color: var(--navy-color);
    }
    &::before {
      content: "";
    }
  }
}

/* src/css/components/cookies.css */
@layer components {
  .cookies-banner {
    position: fixed;
    z-index: 50000;
    bottom: 1rem;
    right: 1rem;
    background: #fff;
    padding: var(--spacing-6);
    border: solid 0.0625rem var(--primary-font-color);
    border-radius: var(--input-border-radius);
    max-width: 25rem;
    width: 100%;
    animation: slide-in-from-bottom 150ms ease-out both, fade-in 150ms ease-out both;
    animation-delay: 1000ms, 1000ms;
    @media only screen and (max-width: 680px) {
      inset: auto 1rem 1rem 1rem;
      width: auto;
      padding: var(--spacing-4);
    }
    & p {
      margin-bottom: var(--spacing-5);
      font-size: 0.8125em;
    }
    .button {
      padding: 0.75rem 1.25rem;
      font-size: 0.75rem;
    }
  }
  .cookies-preferences {
    max-width: 50rem;
    padding-right: var(--spacing-8);
    padding-bottom: var(--spacing-6);
    max-height: 60vh;
    @media only screen and (max-width: 680px) {
      max-height: none;
      padding-right: 0;
    }
    .button {
      &::before,
      &::after {
        display: none;
      }
      &:hover,
      &:focus {
        scale: 1;
      }
    }
    .button#accept-all {
      background: #03a855;
      border-color: #03a855;
      &:hover {
        background: #fff;
        color: #03a855;
      }
    }
    .button#save-preferences:hover,
    .button#save-preferences:focus {
      background: #fff;
      color: var(--primary-color);
    }
  }
  .modal__window:has(.cookies-preferences) {
    padding-right: var(--spacing-4);
    padding-bottom: var(--spacing-6);
  }
  .consent-toggles {
    width: 100%;
  }
  .consent-toggle {
    border-top: solid 0.0625rem rgba(0, 0, 0, 0.25);
    padding: var(--spacing-4) 0 var(--spacing-8);
    width: 100%;
    &:last-of-type {
      border-bottom: solid 0.0625rem rgba(255, 255, 255, 0.15);
    }
    & p {
      max-width: 40rem;
      padding: 0 1rem;
      font-size: 0.875em;
      opacity: 0.75;
    }
  }
}

/* src/css/components/nav.css */
@layer components {
  nav {
    position: relative;
    .nav-button {
      position: absolute;
      top: 3.125rem;
      right: 3.125rem;
      width: 3.313rem;
      z-index: 1000000;
      display: inline-block;
      @media only screen and (max-width: 980px) {
        top: 1.5rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
      }
      .line {
        display: block;
        height: 0.375rem;
        width: 100%;
        background: #fff;
        margin: 0.5rem 0;
        transition: all 150ms ease-in-out;
        @media only screen and (max-width: 980px) {
          height: 0.25rem;
          margin: 0.375rem 0;
          background: var(--navy-color);
        }
      }
      &[data-light-mode=true] {
        .line {
          background: var(--navy-color);
        }
      }
    }
    .nav-menu-container {
      width: 100%;
      height: 100vh;
      background: var(--navy-color);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      translate: 0 -100vh;
      transition: all 300ms ease-in-out;
      .nav-menu {
        .nav-link {
          color: #fff;
          font-size: 3.125em;
          font-weight: 500;
          line-height: 90px;
          & a {
            text-decoration: none;
            transition: color 150ms ease-in-out;
            &:hover {
              opacity: 1 !important;
              color: var(--orange-color);
            }
          }
          @media only screen and (max-width: 980px) {
            font-size: 1.5rem;
            line-height: 4rem;
          }
        }
      }
      .nav-footer {
        position: absolute;
        color: #fff;
        font-size: 1em;
        bottom: 4.375rem;
        @media only screen and (max-width: 980px) {
          text-align: center;
          padding: 0 2rem;
        }
      }
    }
  }
  body[data-nav-open=true] {
    .nav-button {
      translate: 0 -0.8125rem;
      @media only screen and (max-width: 980px) {
        translate: 0;
      }
      .line:nth-child(1) {
        rotate: 45deg;
        translate: 0 1.625rem;
        @media only screen and (max-width: 980px) {
          translate: 0 0.625rem;
        }
      }
      .line:nth-child(2) {
        opacity: 0;
      }
      .line:nth-child(3) {
        rotate: -45deg;
        @media only screen and (max-width: 980px) {
          translate: 0 -0.625rem;
        }
      }
      &[data-light-mode=true] {
        .line {
          background: #fff;
        }
      }
    }
    .nav-menu-container {
      translate: 0;
    }
  }
}

/* src/css/components/footer.css */
@layer components {
  footer {
    padding: 4.75rem 0;
    background: var(--navy-color);
    .row {
      @media only screen and (max-width: 1308px) {
        flex-direction: column;
        align-items: center;
      }
    }
    @media only screen and (max-width: 980px) {
      padding: 3rem 0;
    }
    .content {
      position: relative;
    }
    .basis-33:not(:last-child) {
      border-right: solid 0.0625rem #43426b;
      @media only screen and (max-width: 1308px) {
        border-right: 0 none;
        border-bottom: solid 0.0625rem #43426b;
        padding-bottom: 2.5rem;
      }
    }
    .logo {
      width: 18.75rem;
      margin-bottom: auto;
    }
    .footer-text {
      color: #fff;
      font-size: 0.875em;
      max-width: 20rem;
    }
    .footer-heading {
      font-size: 1.125em;
      color: #fff;
      font-weight: 600;
      margin-bottom: 1.25rem;
    }
    address {
      font-size: 1.125em;
      color: #fff;
      margin-bottom: auto;
    }
    .copy {
      font-size: 0.75em;
      color: #fff;
    }
    li[role=menuitem] {
      margin-bottom: 0.5rem;
    }
    .footer-address {
      p,
      a {
        color: #fff;
      }
      a:hover {
        text-decoration: underline;
      }
    }
    .footer-link {
      overflow: visible;
      &::before {
        border-radius: 0.625rem;
        inset: -0.25rem -0.625rem;
      }
      .name {
        line-height: 1;
        color: #fff;
        font-weight: 600;
        font-size: 1.125rem;
        padding-right: 0.875rem;
        margin-right: 0.875rem;
        border-right: solid 0.125rem #43426b;
        white-space: nowrap;
        @media only screen and (max-width: 1308px) {
          border-right: none;
          margin-right: unset;
          padding-right: unset;
        }
      }
      .location {
        color: #fff;
        font-size: 1.125rem;
        line-height: 1;
        white-space: nowrap;
      }
    }
    .social {
      margin-left: 0.5rem;
      @media only screen and (max-width: 980px) {
        margin-left: 0;
        position: relative;
        inset: auto;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
      }
      a {
        display: block;
        width: 2.75rem;
        height: 2.75rem;
        line-height: 1;
        transition: scale 150ms ease-out;
        &:hover {
          scale: 1.1;
        }
        img {
          width: 100%;
          user-select: none;
        }
      }
    }
    @media only screen and (max-width: 980px) {
      .basis-33 {
        align-items: center;
      }
    }
    .footer-logo {
      width: 100%;
      max-width: 27.375rem;
      border-right: solid 0.125rem #43426b;
      padding-right: 4.5rem;
    }
    .footer-address {
      width: 100%;
      max-width: 21.25rem;
      border-right: solid 0.125rem #43426b;
      @media only screen and (max-width: 980px) {
        text-align: center;
      }
    }
    .footer-logo,
    .footer-address,
    .footer-businesses,
    .footer-menu {
      @media only screen and (max-width: 980px) {
        align-items: center;
        border-right: none;
        padding-right: 0;
      }
    }
    .footer-businesses .copy {
      @media only screen and (max-width: 980px) {
        margin-top: 2rem;
      }
    }
  }
  .footer-documents {
    @media only screen and (max-width: 680px) {
      .footer-link {
        text-align: center;
      }
    }
  }
}

/* src/css/components/icon.css */
@layer components {
  .icon {
    width: var(--icon-width);
  }
}

/* src/css/components/contact-form.css */
@layer components {
  .contact-form {
    min-height: 20rem;
    max-height: 30rem;
    max-width: 30rem;
    min-width: 15rem;
    display: inline-block;
    .cf-input {
      margin: 0.5rem 0;
      padding: 0.25rem 0;
    }
    & a {
      color: black;
      text-decoration: underline;
      font-weight: 500;
      transition: all 200ms ease;
      &:hover,
      &:focus {
        background: var(--primary-color);
        color: black;
      }
    }
    & button {
      display: flex;
      margin-inline: auto;
    }
  }
}

/* src/css/components/input.css */
@layer components {
  .input {
    position: relative;
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    border: solid 0.12rem #333;
    background: #fff;
    &:not(:last-child) {
      margin-bottom: 0.375rem;
    }
    & label {
      position: absolute;
      inset: 50% auto auto var(--input-padding);
      translate: 0 -50%;
      color: #000000;
      text-transform: capitalize;
      transition: translate 150ms ease-out, scale 150ms ease-out;
      transform-origin: left center;
    }
    & input {
      width: 100%;
      height: var(--input-height);
      padding: 0.25rem var(--input-padding) 0;
      outline: none;
      color: #000000;
      font-size: 0.9375em;
    }
  }
  .input[data-focus=true] {
    border-color: var(--primary-color);
  }
  .input[data-focus=true],
  .input[data-has-value=true] {
    & label {
      scale: 0.7;
      translate: 0 -100%;
    }
  }
  .file-input {
    width: 100%;
    .label {
      font-size: 0.875rem;
      margin-bottom: 8px;
      color: #6a7282;
    }
    & input {
      width: 100%;
      padding: 0.875rem 1rem;
      border: 1px solid #d1d5dc;
      border-radius: .375rem;
      font-size: .875rem;
      &::file-selector-button {
        padding: 8px 16px;
        font-size: .875rem;
        background: var(--blue-color);
        font-weight: 500;
        color: #fff;
        border: none;
        margin-right: 1rem;
        border-radius: .375rem;
      }
    }
  }
}

/* src/css/components/textarea.css */
@layer components {
  .textarea {
    margin: 1rem 0;
    & label {
      top: 1.5rem;
    }
    & input {
      min-height: 8rem;
    }
    & textarea {
      width: 100%;
      resize: vertical;
      padding: 1rem var(--input-padding);
      outline: none;
      color: #000000;
      font-size: 0.9375em;
    }
  }
}

/* src/css/components/select.css */
@layer components {
  .select {
    position: relative;
    z-index: 200;
    & input {
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
    }
    .select__value {
      border: 1px solid #D1D5DB;
      border-radius: .375rem;
      background: #fff;
      padding: 0 var(--input-padding);
      height: 55px;
      width: 100%;
      user-select: none;
      gap: 1rem;
      & span {
        color: #364153;
        font-size: .875rem;
      }
      & img {
        margin-left: auto;
        width: 1rem;
      }
    }
    .select__dropdown {
      position: absolute;
      inset: 100% 0 auto 0;
      background: #fff;
      border-radius: var(--input-border-radius);
      overflow: hidden;
      border: #d1d5db;
      opacity: 0;
      translate: 0 -1rem;
      transition: opacity var(--basic-transition-time) ease-out, translate var(--basic-transition-time) ease-out;
      box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.2);
      pointer-events: none;
      visibility: hidden;
      & button {
        width: 100%;
        text-align: left;
        cursor: pointer;
        padding: calc(var(--input-padding) / 2) var(--input-padding);
        color: #364153;
        font-size: 0.875rem;
        outline-color: var(--input-outline-color);
        user-select: none;
      }
      &[aria-hidden=false] {
        opacity: 1;
        translate: 0;
        pointer-events: all;
        visibility: visible;
      }
    }
  }
}

/* src/css/components/toggle.css */
@layer components {
  .toggle {
    width: 100%;
    position: relative;
    cursor: pointer;
    border-radius: var(--input-border-radius);
    display: block;
    & input {
      opacity: 0;
      visibility: hidden;
      width: 0;
      height: 0;
      tab-index: -1;
      display: none;
    }
    .label {
      flex: 1 1 100%;
      text-align: left;
      font-size: 1.125em;
    }
    .toggle__rail {
      display: block;
      flex: 0 0 3rem;
      position: relative;
      z-index: 10;
      user-select: none;
      &::before {
        content: "";
        position: absolute;
        inset: 50% 0 auto 0;
        translate: 0 -50%;
        height: 1.5rem;
        border-radius: 2rem;
        background: #ccc;
        z-index: -10;
      }
    }
    .toggle__container {
      padding: 0.5rem 1rem;
    }
    .toggle__switch {
      display: block;
      width: 2rem;
      height: 2rem;
      border: solid 0.0625rem #eee;
      border-radius: 50%;
      background: #efefef;
      box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25);
      transition: translate 150ms ease-out;
      user-select: none;
    }
    & input:checked + span {
      .toggle__switch {
        translate: 50% 0;
        background: #fff;
      }
    }
  }
}

/* src/css/components/carousel.css */
@layer components {
  .carousel__viewport {
    width: 100%;
    overflow: hidden;
  }
  .carousel [data-rwdx-carousel-clone] {
    pointer-events: none;
    user-select: none;
  }
  .carousel__controls {
    margin-top: 2.625rem;
    gap: 0.5rem;
  }
  .carousel__pager {
    display: none;
  }
  .carousel__dot {
    width: 3.5rem;
    max-width: 0.5rem;
    height: 0.5rem;
    background: var(--primary-font-color);
    border-radius: 0.5rem;
    transition: all 150ms ease-out;
    &[aria-current=true] {
      max-width: 3.5rem;
    }
  }
  .carousel__arrow {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: solid 0.25rem var(--orange-color);
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      width: 100%;
      aspect-ratio: 1;
      z-index: 10;
    }
    &[disabled=true] {
      opacity: 0.5;
      pointer-events: none;
    }
    &.carousel__arrow--prev::after {
      background: url(/img/svg/arrow-left-navy.svg) no-repeat 40% /40%;
    }
    &.carousel__arrow--next::after {
      background: url(/img/svg/arrow-right-navy.svg) no-repeat 60% /40%;
    }
  }
}

/* src/css/components/gallery.css */
@layer components {
  .gallery-modal {
    padding: 0;
    justify-content: center;
  }
  .gallery-modal__window {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.625rem;
    width: 10rem;
    min-height: 10rem;
    min-width: 0;
    transition: all 300ms ease-out;
    & img {
      animation: fade-in 150ms ease-out both;
    }
  }
  .gallery-modal__control {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 3rem;
    height: 3rem;
    border-radius: 0.25rem;
    background: #fff;
    &::before {
      content: "";
      position: absolute;
      inset: 50% 0 0 50%;
      translate: -50% -50%;
      width: 0.625rem;
      height: 1.5rem;
    }
    &.gallery-modal__control--prev {
      left: -5rem;
      &::before {
      }
    }
    &.gallery-modal__control--next {
      right: -5rem;
      &::before {
      }
    }
  }
}

/* src/css/components/scene.css */
@layer components {
  [data-rwdx-scene-default] {
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 150ms ease-out, translate 150ms ease-out;
    &[data-rwdx-scene-visible] {
      opacity: 1;
      translate: 0;
    }
  }
}

/* src/css/components/notification.css */
@layer components {
  .rwdx-notification {
    position: fixed;
    inset: auto auto 4rem 50%;
    z-index: 30000;
    --translate-h: -50%;
    animation: slide-in-from-bottom 150ms ease-out forwards, fade-in 150ms ease-out forwards;
    background: #fff;
    padding: var(--spacing-5) var(--spacing-8);
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.2);
    border-radius: var(--input-border-radius);
    & p {
      color: var(--primary-font-color);
      font-size: 1.25em;
    }
  }
}

/* src/css/components/blog-thumb.css */
@layer components {
  .blog-thumb {
  }
}

/* src/css/components/frc-styles.css */
@layer components {
  form[data-rwdx-form] .captcha {
    width: 100%;
    margin-bottom: var(--spacing-3);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1rem 1rem 1rem;
    min-height: 5.5rem;
    border-radius: var(--input-border-radius);
    background: white;
    position: relative;
    .frc-container {
      min-height: 0;
      gap: 1rem;
      width: 100%;
    }
    .frc-icon {
      flex: 0 0 2rem;
      fill: #fff;
      stroke: #fff;
      margin: 0;
    }
    .frc-content {
      flex: 1 1 100%;
      align-items: flex-start;
      margin: 0;
    }
    .frc-text {
      font-size: 0.875em;
    }
    .frc-button {
      padding: 0.25rem 0.5rem;
      background-color: #fff;
      border: 0 none;
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 0.875em;
      text-transform: none;
      border-radius: 0.25rem;
    }
    .frc-banner {
      position: absolute;
      inset: auto 0.25rem 0.25rem auto;
      line-height: 1;
      margin-top: 0.25rem;
    }
  }
}

/* src/css/components/review.css */
@layer components {
  .review {
  }
}

/* src/css/components/scrollable-content.css */
@layer components {
  .scrollable-content .scrollable-content__viewport-container {
    position: relative;
    width: 100%;
  }
  .scrollable-content .scrollable-content__viewport {
    position: absolute;
    inset: 0 auto auto 0;
  }
  .scrollable-content__controls {
    gap: 0.625rem;
    button {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      border: solid 0.25rem var(--orange-color);
      text-align: center;
      img {
        user-select: none;
      }
      &:first-child img {
        translate: -15% 0;
      }
      &:last-child img {
        translate: 15% 0;
      }
      &:hover {
        background: var(--orange-color);
      }
    }
  }
  .scrollable-content[data-index="0"] .scrollable-content__controls button:first-child {
    opacity: 0.5;
    pointer-events: none;
  }
  .scrollable-content[data-max=true] .scrollable-content__controls button:last-child {
    opacity: 0.5;
    pointer-events: none;
  }
  .scrollable-content__viewport {
    overflow: hidden;
    @media only screen and (max-width: 1308px) {
      width: 100% !important;
    }
    @media only screen and (max-width: 980px) {
      overflow: hidden;
    }
  }
  .scrollable-content__item {
    transition: translate 300ms ease-out;
    &.placeholder {
      background: #ececec;
      min-height: 31.4375rem;
      min-width: 17.9375rem;
      &[data-brand="1"] {
        background: url(/img/webp/european-operations/brands-1.webp) no-repeat center / cover;
      }
      &[data-brand="2"] {
        background: url(/img/webp/european-operations/brands-2.webp) no-repeat center / cover;
      }
      &[data-brand="3"] {
        background: url(/img/webp/european-operations/brands-3.webp) no-repeat center / cover;
      }
      &[data-brand="4"] {
        background: url(/img/webp/european-operations/brands-4.webp) no-repeat center / cover;
      }
      &[data-brand="5"] {
        background: url(/img/webp/european-operations/brands-5.webp) no-repeat center / cover;
      }
      &[data-brand="6"] {
        background: url(/img/webp/european-operations/brands-6.webp) no-repeat center / cover;
      }
      &[data-brand="7"] {
        background: url(/img/webp/european-operations/brands-7.webp) no-repeat center / cover;
      }
    }
  }
  .scrollable-content__track {
    position: relative;
    height: 0.25rem;
    border-top: solid 0.0625rem var(--orange-color);
    margin-top: 5rem;
    @media only screen and (max-width: 980px) {
      margin-top: 2.5rem;
    }
    &.scrollable-content__track--white {
      border-color: #fff;
      .scrollable-content__track__thumb {
        background: #fff;
      }
    }
    .scrollable-content__track__thumb {
      position: absolute;
      width: 100%;
      height: 0.25rem;
      inset: 0 auto auto 0;
      background: var(--orange-color);
      transition: translate 300ms ease-out;
    }
  }
}

/* src/css/components/page-header.css */
@layer components {
  .page-header {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    overflow: hidden;
    &[data-page=about-us] {
      background: url(/img/webp/about-us/about-page-heading.webp) no-repeat center / cover;
    }
    &[data-page=european-operations] {
      background: url(/img/webp/european-operations/european-operations-header.webp) no-repeat center / cover;
      .page-header--band {
        padding: 1.5rem 0;
      }
    }
    &[data-page=sustainability] {
      background: url(/img/webp/sustainability/sustainability-page-heading.webp) no-repeat center / cover;
    }
    &[data-page=newsroom] {
      background: url(/img/webp/newsroom/news-room-page-heading.webp) no-repeat center / cover;
    }
    .page-header--band {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 1.5rem 0;
      background: rgba(20, 19, 70, 0.85);
      animation: fade-in 300ms ease-out, slide-in-from-bottom 300ms ease-out;
      animation-fill-mode: forwards;
      animation-delay: 300ms;
      opacity: 0;
      @media only screen and (max-width: 680px) {
        padding: 3rem 0;
      }
      .heading-1 {
        text-align: center;
        font-size: 2.75em;
        color: #fff;
        z-index: 1000;
        @media only screen and (max-width: 61.25rem) {
          font-size: 2em;
        }
      }
      .button {
        margin-top: auto;
        z-index: 1000;
      }
    }
  }
  @keyframes background-blur {
    from {
      filter: blur(8rem);
    }
    to {
      filter: blur(0);
    }
  }
}

/* src/css/components/keep-reading.css */
@layer components {
  .keep-reading-section {
    background: #f3f3f6;
  }
  .keep-reading-section .blog-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--spacing-6);
    width: 100%;
  }
  .keep-reading-section .blog-link {
    height: 9.375rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--orange-color);
  }
  .keep-reading-section .blog-link .category {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--red-color);
    margin-bottom: var(--spacing-1);
  }
  .keep-reading-section .blog-link .title {
    font-size: 1.563rem;
    font-weight: 600;
    color: var(--navy-color);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.3s ease;
  }
  .keep-reading-section .blog-link .title:hover {
    color: var(--red-color);
  }
  @media only screen and (max-width: 1200px) {
    .keep-reading-section .blog-links-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, auto);
    }
    .navigable-content.keep-reading-navigable {
      min-height: 36rem !important;
    }
  }
  @media only screen and (max-width: 768px) {
    .keep-reading-section .heading-2 {
      font-size: 2.5rem;
    }
    .keep-reading-section .blog-links-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .navigable-content.keep-reading-navigable {
      min-height: 45rem !important;
    }
    .keep-reading-section .blog-link .title {
      font-size: 1.25rem;
    }
  }
}

/* src/css/components/radio.css */
@layer components {
  .radio,
  .checkbox {
    cursor: pointer;
    gap: 0.5rem;
    .radio-button,
    .checkbox-button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border: 2px solid #D1D5DB;
      border-radius: .25rem;
      transition: color 150ms ease-in-out;
      & input {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden;
      }
      & img {
        display: none;
      }
    }
    .radio-button:has(input:checked),
    .checkbox-button:has(input:checked) {
      & img {
        display: block;
      }
    }
    &:hover {
      .radio-button,
      .checkbox-button {
        border-color: var(--blue-color);
      }
    }
    .label {
      font-size: .875rem;
      color: #364153;
    }
  }
}

/* src/css/pages/home.css */
@layer pages {
  .banner {
    height: 100dvh;
    position: relative;
    z-index: 10;
    overflow: hidden;
    &.banner--home::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -10;
      background: url(/img/webp/home/home-video-placeholder.webp) no-repeat center /cover;
    }
    .banner-video {
      position: absolute;
      width: 100%;
      height: 100dvh;
      overflow: hidden;
      video {
        object-fit: cover;
        width: 100vw;
        height: 100dvh;
        z-index: 0;
      }
    }
    .banner-band {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 1.5rem 0;
      background: rgba(20, 19, 70, 0.85);
      opacity: 0;
      animation: fade-in 300ms ease-out, slide-in-from-bottom 300ms ease-out;
      animation-fill-mode: forwards;
      animation-delay: 300ms;
      .heading-1 {
        text-align: center;
        font-size: 2.75em;
        color: #fff;
        z-index: 1000;
        @media only screen and (max-width: 980px) {
          font-size: 2em;
        }
      }
      .button {
        margin-top: auto;
        z-index: 1000;
      }
    }
  }
  .navigable-content {
    width: 100%;
    position: relative;
    aspect-ratio: 1.25;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--navy-color);
    @media only screen and (max-width: 980px) {
      aspect-ratio: 0.8;
    }
    .navigable-content__item {
      width: 100%;
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 600ms ease-out;
      &[aria-selected=true] {
        opacity: 1;
        pointer-events: all;
        .text {
          opacity: 1;
          translate: 0 0;
          transition-delay: 250ms;
        }
      }
      .img {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1.71;
        overflow: hidden;
        position: relative;
        img {
          position: absolute;
          width: 100%;
          inset: 50% auto auto 50%;
          translate: -50% -50%;
        }
        &.img--align-top {
          img {
            inset: unset;
            top: 80%;
            left: 50%;
          }
        }
      }
      .text {
        flex: 1 1 100%;
        justify-content: center;
        padding: 0 13.75rem 0 3.125rem;
        transition: opacity 250ms ease-out, translate 250ms ease-out;
        opacity: 0;
        translate: 0 1rem;
        @media only screen and (max-width: 980px) {
          padding: 1.5rem 2rem 6rem;
          justify-content: flex-start;
        }
        .description {
          & p {
            color: #7a7a8d;
            & b {
              color: #fff;
            }
          }
        }
      }
      .title {
        align-items: center;
        margin-bottom: 1.25rem;
        .number {
          position: relative;
          color: var(--orange-color);
          font-size: 2.25rem;
          line-height: 0.9;
          font-weight: 600;
          padding-right: 1.25rem;
          margin-right: 1.25rem;
          border-right: solid 0.1875rem #62617e;
          @media only screen and (max-width: 980px) {
            font-size: 1.5em;
          }
        }
        .name {
          white-space: nowrap;
          color: #fff;
          font-size: 1.875rem;
          font-weight: 600;
          line-height: 0.9;
          @media only screen and (max-width: 980px) {
            font-size: 1.5em;
            white-space: pre-wrap;
          }
        }
      }
    }
    .navigable-content__controls {
      position: absolute;
      inset: auto 2rem 2rem auto;
      gap: 0.625rem;
      @media only screen and (max-width: 980px) {
        inset: auto 1rem 1rem auto;
        gap: 0.375rem;
      }
      button {
        width: 2.875rem;
        height: 2.875rem;
        border-radius: 50%;
        border: solid 0.25rem var(--orange-color);
        text-align: center;
        @media only screen and (max-width: 980px) {
          width: 2.5rem;
          height: 2.5rem;
        }
        &:first-child img {
          translate: -15% 0;
        }
        &:last-child img {
          translate: 15% 0;
        }
        &:hover {
          background: var(--orange-color);
        }
      }
    }
    &[data-index="0"] .navigable-content__controls button:first-child {
      opacity: 0.5;
      pointer-events: none;
    }
    &[data-max=true] .navigable-content__controls button:last-child {
      opacity: 0.5;
      pointer-events: none;
    }
    .navigable-content__item[aria-selected=true] {
      .img img {
        animation: slow-zoom 30s linear infinite alternate;
      }
    }
  }
  @keyframes slow-zoom {
    0% {
      scale: 1;
    }
    100% {
      scale: 1.3;
    }
  }
  @keyframes zoom-pan {
    0% {
      scale: 1;
      transform: translate(0, 0);
    }
    100% {
      scale: 1.12;
      transform: translate(-5rem, 0);
    }
  }
  @keyframes zoom-pan-reverse {
    0% {
      scale: 1;
      transform: translate(0, 0);
    }
    100% {
      scale: 1.12;
      transform: translate(5rem, 0);
    }
  }
  .european-ops-scrollable .scrollable-content__viewport-container {
    height: 35.625rem;
  }
  .european-ops-scrollable .scrollable-content__item {
    flex: 0 0 15.625rem;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    @media only screen and (max-width: 1308px) {
      flex: 0 0 31%;
      .img img {
        width: 100%;
      }
    }
    @media only screen and (max-width: 980px) {
      flex: 0 0 100%;
      .img img {
        width: 100%;
      }
    }
    .img {
      width: 100%;
      height: 25.5rem;
      position: relative;
      overflow: hidden;
      img {
        transition: scale 6s ease-in;
        position: absolute;
        inset: 50% 0 auto 0;
        translate: 0 -50%;
        animation-name: slow-zoom;
        animation-duration: 20s;
        animation-play-state: paused;
        animation-iteration-count: infinite;
        @media only screen and (max-width: 980px) {
          width: 100%;
        }
      }
    }
    &:hover .img img {
      animation-fill-mode: forwards;
      animation-play-state: running;
    }
    .text {
      height: 10.125rem;
      background: #e3e3e7;
      padding-top: 2rem;
      @media only screen and (max-width: 980px) {
        padding: 2rem 2rem 0;
      }
      span {
        text-align: center;
        font-size: 1.5em;
        color: var(--navy-color);
        font-weight: 600;
        line-height: 1.2;
        @media only screen and (max-width: 980px) {
          font-size: 1.375em;
        }
      }
    }
  }
  .business-item {
    width: calc(25% - 2.125rem);
    flex: 0 0 calc(25% - 2.125rem);
    @media only screen and (max-width: 980px) {
      margin-bottom: 2.5rem;
      width: 100%;
      flex: 0 0 100%;
    }
    @media only screen and (max-width: 1308px) {
      flex: 0 0 31%;
    }
    &:hover {
      .logo {
        scale: 1.05;
      }
    }
    .logo {
      width: 100%;
      height: 10.938rem;
      background: #fff;
      border-radius: 0.625rem;
      position: relative;
      margin-bottom: 2rem;
      transition: scale 150ms ease-in-out;
      img {
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        &[alt="Morliny Foods"],
        &[alt="Pupil Foods"] {
          width: 14.625rem;
        }
        &[alt=Animex] {
          width: 15.375rem;
        }
        &[alt=Mecom] {
          width: 14rem;
        }
        &[alt=Argal] {
          width: 10.813rem;
        }
        &[alt=Elit],
        &[alt=Wolf] {
          width: 7.563rem;
        }
        &[alt=Comtim] {
          width: 13rem;
        }
        &[alt="WH Group"] {
          width: 13.75rem;
        }
      }
    }
    .business-item__company {
      margin-bottom: 2rem;
      .name {
        font-size: 1.125em;
        font-weight: 600;
        color: var(--navy-color);
        padding-right: 0.5rem;
        margin-right: 0.5rem;
        line-height: 1;
        border-right: solid 0.125rem var(--orange-color);
      }
      .location {
        font-size: 1.125em;
        font-weight: 400;
        color: var(--navy-color);
        line-height: 1;
      }
    }
  }
  .sustainability-band[data-rwdx-scene-default] {
    opacity: 1;
    translate: none;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -10;
      background: url(/img/webp/home/sustainability.webp) no-repeat bottom /cover;
      transform: rotateY(180deg);
      scale: 1;
      transition: scale 1s ease-out;
      @media only screen and (max-width: 1308px) {
        filter: brightness(80%);
      }
    }
    &[data-rwdx-scene-visible=true]::before {
      scale: 1.4;
    }
  }
  .sustainability-scrollable .scrollable-content__viewport-container {
    height: 35.625rem;
  }
  .sustainability-scrollable .scrollable-content__item {
    border-radius: 1rem;
    overflow: hidden;
    flex: 0 0 20rem;
    height: 35.625rem;
    position: relative;
    z-index: 10;
    @media only screen and (max-width: 1308px) {
      flex: 0 0 31%;
    }
    @media only screen and (max-width: 980px) {
      flex: 0 0 100%;
    }
    &::before {
      content: "";
      background:
        linear-gradient(
          to bottom,
          rgba(0 0 0 / 0) 0%,
          rgba(0 0 0 / 0) 50%,
          rgba(0 0 0 / 0.2) 100%);
      position: absolute;
      inset: 0;
      z-index: -5;
    }
    .img {
      width: 100%;
      height: 22.688rem;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        position: absolute;
        inset: 50% 0 auto 0;
        translate: 0 -50%;
        animation-name: slow-zoom;
        animation-duration: 20s;
        animation-fill-mode: backwards;
        animation-play-state: paused;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    }
    &:hover .img img {
      animation-fill-mode: forwards;
      animation-play-state: running;
    }
    .text {
      translate: 0 -3px;
      background: var(--navy-color);
      padding: 2rem 2rem 0;
      height: 13rem;
    }
    .number {
      width: 100%;
      display: block;
      color: #fff;
      font-size: 2.125em;
      font-weight: 600;
      margin-bottom: 1.5rem;
      position: relative;
      line-height: 0.8;
      &::after {
        content: "";
        position: absolute;
        inset: auto 0 0.125rem 2rem;
        height: 0.125rem;
        background: var(--orange-color);
      }
    }
    .title {
      display: block;
      text-align: center;
      color: #fff;
      font-size: 1.5em;
      font-weight: 600;
      line-height: 1.3;
    }
  }
  .about-us-content .basis-33-5-rem {
    padding-bottom: 7.125rem;
    @media only screen and (max-width: 980px) {
      padding-bottom: 0;
    }
  }
  .about-us-content,
  .european-ops-scrollable,
  .sustainability-scrollable {
    @media only screen and (max-width: 1308px) {
      flex-direction: column;
      .section-header {
        margin-bottom: 2rem;
      }
      .basis-33-5-rem {
        flex: 0 0 100% !important;
        margin-bottom: 2rem;
      }
    }
  }
  a[title="Discover More About Morliny Foods"],
  a[title="Discover More About European Operations"],
  a[title="Discover More About Sustainability"],
  a[title="View All News"] {
    margin-right: auto;
    white-space: nowrap;
    &:hover {
      background: var(--orange-color);
    }
    @media only screen and (max-width: 680px) {
      font-size: 1em;
    }
  }
  a[title="Discover More About European Operations"],
  a[title="View All News"] {
    color: var(--navy-color);
  }
  a[title="Discover More About Morliny Foods"] {
    margin-top: 3.5rem;
  }
}

/* src/css/pages/blog.css */
@layer pages {
  .loading {
    width: 5rem;
    aspect-ratio: 1;
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
  }
  .loading svg {
    width: 100%;
    z-index: 10;
  }
  .loading circle {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 9;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    stroke-linecap: round;
    animation: loading 2s linear both infinite;
    animation-delay: .34s;
  }
  @keyframes loading {
    0% {
      stroke-dashoffset: 280;
    }
    100% {
      stroke-dashoffset: -260;
    }
  }
  .blog-breadcrumb {
    background: #f4f3ed;
    padding: 1.375rem 0;
    & span,
    a {
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--orange-color);
      text-decoration: none;
    }
    & a:first-of-type {
      margin-left: 0;
      margin-right: 0.875rem;
    }
    & a:nth-of-type(2) {
      margin-left: 0.875rem;
      margin-right: 0.875rem;
    }
    & a {
      margin-left: 0.875rem;
    }
  }
  .featured-blog-section {
    .latest-featured {
      width: 100%;
      max-width: 56.25rem;
      height: 37rem;
      border-radius: 1.5rem;
      overflow: hidden;
      background: #f2f2f2;
      position: relative;
      @media only screen and (max-width: 980px) {
        max-width: 100%;
      }
      .tags {
        padding: 0.75rem 1.875rem;
        position: absolute;
        top: 0;
        left: 0;
        background: #ed1c24;
        & span {
          color: #fff;
          font-size: 1.25em;
          font-weight: 600;
        }
      }
      .img-radius {
        height: 100%;
        width: 100%;
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .blog-thumb__text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(20, 19, 70, 0.85);
        padding: 1.625rem 2.125rem;
        .title {
          color: #fff;
          font-size: 1.875em;
          font-weight: 600;
        }
      }
    }
    .recent-featured {
      padding-left: 5.938rem;
      @media only screen and (max-width: 980px) {
        padding-left: 0;
      }
      .recent-blogs-list {
        & li a {
          height: 9.375rem;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          justify-content: end;
          border-bottom: 1px solid var(--orange-color);
          padding-bottom: 0.875rem;
          .tag {
            font-size: 1.25em;
            font-weight: 600;
            color: #ed1c24;
          }
          .title {
            font-size: 1.563em;
            font-weight: 600;
            color: var(--navy-color);
          }
        }
        @media only screen and (max-width: 980px) {
          width: 100%;
          & li a {
            width: 100%;
          }
        }
      }
    }
  }
  .blog-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5.375rem;
    padding-bottom: var(--spacing-19);
    padding-top: var(--spacing-19);
    @media only screen and (max-width: 1308px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media only screen and (max-width: 980px) {
      grid-template-columns: 1fr;
    }
    .blog-thumb {
      .img-radius {
        overflow: hidden;
        background: #f2f2f2;
        aspect-ratio: 39/28;
        width: 100%;
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .blog-thumb__text {
        .title {
          font-size: 1.75em;
          font-weight: 600;
          text-decoration: underline;
        }
      }
    }
  }
  .article-heading {
    height: 15.125rem;
  }
  .article {
    padding-top: 3.75rem;
    padding-bottom: 13.25rem;
    .heading-1 {
      font-size: 2.25em;
      @media only screen and (max-width: 980px) {
        font-size: 2.5em;
      }
    }
    .article-main {
      gap: 12.5rem;
    }
    .article-main__content {
      width: 100%;
      gap: 1rem;
      font-size: 1em;
      color: #646363;
      @media only screen and (max-width: 980px) {
        font-size: 1em;
      }
      & li,
      p {
        color: #646363;
      }
      & img {
        min-width: 100%;
        margin-bottom: 1rem;
      }
    }
    .article-main__sidebar {
      gap: 8.125rem;
      .heading-3 {
        color: var(--orange-color);
        font-size: 1.5rem;
      }
      .other-stories {
        width: 100%;
        .blog-thumb {
          flex: 0 0 100% !important;
          width: 100% !important;
          margin-bottom: 3.75rem;
          &:first-of-type {
            margin-top: 3.75rem;
          }
          &:last-of-type {
            margin-bottom: 0;
          }
          .img-radius {
            width: 100% !important;
            & img {
              width: 100% !important;
            }
          }
          .title {
            font-size: 1.25em;
            font-weight: 600;
            text-decoration: underline;
          }
          &:hover {
            .title {
              text-decoration: none;
            }
          }
        }
      }
      .keep-reading-sidebar {
        .heading-3 {
          color: var(--navy-color);
        }
        .keep-reading {
          & li {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-bottom: 1rem;
            height: 9.375rem;
            border-bottom: 1px solid var(--orange-color);
            & a {
              text-decoration: none;
            }
            .tag {
              font-size: 1em;
              color: var(--red-color);
              font-weight: 600;
            }
            .title {
              font-size: 1.25em;
              font-weight: 600;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
  .latest-news {
    .blog-thumb {
      .img-radius {
        overflow: hidden;
        background: #f2f2f2;
        aspect-ratio: 39/28;
        width: 100%;
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .blog-thumb__text {
        .title {
          font-size: 1.75em;
          font-weight: 600;
          text-decoration: underline;
        }
      }
      @media only screen and (max-width: 980px) {
        min-width: 100%;
      }
    }
  }
}

/* src/css/pages/about-us.css */
@layer pages {
  .about-lead {
    background: #2b2a58;
    .heading-2 {
      font-size: 2em;
      @media only screen and (max-width: 980px) {
        font-size: 1.5em;
      }
    }
  }
  .about-section {
    .heading-2 {
      white-space: wrap;
      .number {
        position: relative;
        color: var(--orange-color);
        margin-right: 3rem;
        &::after {
          position: absolute;
          content: "";
          height: 2rem;
          width: 0.1875rem;
          background: #d6cfb4;
          bottom: 50%;
          translate: 0 50%;
          right: -1.5rem;
        }
      }
    }
    .column[data-rwdx-scene] {
      opacity: 0;
      translate: 0 2rem;
      transition: opacity 300ms ease-out 50ms, translate 300ms ease-out 50ms;
      &[data-rwdx-scene-visible] {
        opacity: 1;
        translate: 0 0;
      }
      @media only screen and (max-width: 980px) {
        width: 100%;
        flex: 0 0 100%;
      }
    }
    .body-text {
      color: #7a7a8d;
      padding-right: 5.875rem;
      font-size: 1.2em;
      & b {
        color: var(--navy-color);
      }
      @media only screen and (max-width: 980px) {
        padding-right: 0;
        width: 100%;
        font-size: 1em;
      }
    }
    .image {
      width: 100%;
      height: 100%;
      min-height: 22.5rem;
      background: black;
      border-radius: 1.5rem;
      @media only screen and (max-width: 980px) {
        animation: none;
        width: 100%;
        aspect-ratio: 4/3;
        min-height: unset;
        margin-top: var(--spacing-14);
        background-size: cover;
      }
      &[data-rwdx-scene-visible] {
      }
      &[data-image="people & community well-being"] {
        background: url(/img/webp/about-us/about-community.webp) no-repeat center / cover;
      }
      &[data-image="innovation & continuous improvement"] {
        background: url(/img/webp/about-us/about-us-innovation.webp) no-repeat center / cover;
      }
      &[data-image="sustainable & responsible production"] {
        background: url(/img/webp/about-us/about-us-responsibility.webp) no-repeat center / cover;
      }
      &[data-image="ethical conduct & accountability"] {
        background: url(/img/webp/about-us/about-ethics.webp) no-repeat center / cover;
      }
    }
    &[data-reversed=true] {
      .heading-2 {
        padding-left: 5.875rem;
        @media only screen and (max-width: 980px) {
          padding-left: 0;
        }
      }
      .body-text {
        padding-right: 0;
        padding-left: 5.875rem;
        @media only screen and (max-width: 980px) {
          padding-left: 0;
        }
      }
    }
    @media only screen and (max-width: 980px) {
      flex-direction: column !important;
    }
  }
  @keyframes background-zoom {
    from {
      background-size: 110% 110%;
    }
    to {
      background-size: 100% 100%;
    }
  }
  .directors-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 5.125rem;
    @media only screen and (max-width: 1360px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media only screen and (max-width: 42.5rem) {
      grid-template-columns: 1fr;
      gap: 3rem;
      .director {
        width: 100%;
        .image {
          width: 100%;
          & img {
            width: 100%;
          }
        }
      }
    }
    .director {
      & img {
        border-radius: 1.5rem;
      }
      .heading-2 {
        color: var(--navy-color);
        font-size: 2em;
        font-weight: 600;
        margin-bottom: 1rem;
      }
      .position {
        font-size: 1.25em;
      }
      .image {
        position: relative;
        margin-bottom: 1rem;
        .bio {
          user-select: none;
          opacity: 0;
          padding: 2.125rem 1.375rem;
          width: 100%;
          height: 100%;
          color: #fff;
          font-size: 1.25em;
          background: rgba(20, 19, 70, 0.85);
          border-radius: 1.5rem;
          line-height: 1.25em;
          top: 0;
          position: absolute;
          transition: opacity 300ms ease-in-out;
        }
      }
      &:hover {
        .bio {
          opacity: 1;
        }
      }
    }
  }
}

/* src/css/pages/european-operations.css */
@layer pages {
  .info-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.375rem;
    @media only screen and (max-width: 86rem) {
      gap: 2rem;
    }
    @media only screen and (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media only screen and (max-width: 980px) {
      grid-template-columns: 1fr;
    }
  }
  .info-box {
    .info-box-img {
      overflow: hidden;
      border-radius: 1.5rem 1.5rem 0 0;
      & img {
        width: 100%;
        transform: scale(1.1);
        filter: blur(0.5rem);
        transition: transform 3s ease-out, filter 500ms ease-out;
      }
      &[data-rwdx-scene-visible] img {
        transform: scale(1);
        filter: blur(0);
      }
    }
    .info-box-text {
      width: 100%;
      background: #e3e3e7;
      border-radius: 0 0 1.5rem 1.5rem;
      height: 13.125rem;
      padding: 1.875rem 1rem;
      .title,
      .text {
        text-align: center;
      }
      .title {
        font-size: 1.375em;
        font-weight: 600;
        line-height: 1.875rem;
        margin-bottom: 0.375rem;
      }
      .text {
        font-size: 1.125em;
      }
    }
  }
  .business-descriptions {
    .business-description {
      padding: 2.25rem 0;
      background: #f6f5f0;
      .logo {
        border-radius: 0.5rem;
        background: #fff;
        width: 100%;
        max-width: 19.625rem;
        height: 10.938rem;
        display: flex;
        align-items: center;
        justify-content: center;
        @media only screen and (max-width: 980px) {
          max-width: 100%;
          margin-bottom: var(--spacing-14);
        }
        & img[alt="Morliny Foods"],
        & img[alt="Pupil Foods"] {
          width: 14.625rem;
        }
        & img[alt=Animex] {
          width: 15.375rem;
        }
        & img[alt=Mecom] {
          width: 14rem;
        }
        & img[alt=Argal] {
          width: 10.813rem;
        }
        & img[alt=Monells] {
          width: 12.375rem;
        }
        & img[alt=Elit],
        & img[alt=Wolf] {
          width: 7.563rem;
        }
        & img[alt=Comtim] {
          width: 13rem;
        }
      }
      .text {
        padding-left: 3.875rem;
        @media only screen and (max-width: 980px) {
          padding-left: 0;
        }
        .name,
        .location {
          font-size: 1.5em;
        }
        .name {
          font-weight: 600;
          position: relative;
          &::after {
            position: absolute;
            content: "";
            width: 0.125rem;
            height: 1.25rem;
            background: var(--orange-color);
            top: 50%;
            translate: 0 -50%;
            right: -1.25rem;
          }
        }
        .description {
          line-height: 2rem;
          font-size: 1.125em;
        }
        & a {
          font-size: 1.125em;
          color: var(--navy-color);
          font-weight: 500;
          line-height: 2rem;
          &:hover {
            opacity: 1;
            color: var(--orange-color);
          }
        }
      }
      &:nth-of-type(1),
      &:nth-of-type(3),
      &:nth-of-type(5),
      &:nth-of-type(7),
      &:nth-of-type(9) {
        background: #eeece2;
      }
    }
  }
  .pork-processors {
    .column[data-rwdx-scene] {
      opacity: 0;
      transition: opacity 300ms ease-out 50ms;
      border-radius: 0 !important;
      &[data-rwdx-scene-visible] {
        opacity: 1;
      }
    }
    .w-50[data-rwdx-scene] {
      overflow: hidden;
      position: relative;
      border-radius: 1.5rem;
      @media only screen and (max-width: 980px) {
        width: 100%;
        &:last-of-type {
          margin-top: var(--spacing-14);
        }
      }
      img {
        width: 100%;
        transform: scale(1.1);
        transition: transform 3s ease-out;
      }
      &[data-rwdx-scene-visible] img {
        transform: scale(1);
      }
    }
  }
  .european-operations-lead {
    .content {
      position: relative;
      #interactive-map {
        margin-top: 2rem;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }
    }
  }
  .farm-to-fork {
    background: url(/img/webp/european-operations/white-bkg.webp) no-repeat center / cover;
    .heading-2 {
      margin-bottom: .5rem;
    }
    & img {
      margin-top: 6.125rem;
      @media only screen and (max-width: 680px) {
        margin-top: 0;
      }
    }
    .carousel__controls {
      display: none;
      @media only screen and (max-width: 680px) {
        display: flex;
      }
    }
  }
  #interactive-map {
    width: 45vw;
    @media only screen and (max-width: 680px) {
      display: none;
    }
  }
  #country-details--east,
  #country-details--west {
    width: calc(100vw - 45vw / 2) !important;
    @media only screen and (max-width: 680px) {
      display: none;
    }
  }
  #country-details--east {
    margin-left: var(--spacing-6);
    .company-details {
      transform: translateX(-35rem);
    }
  }
  #country-details--west {
    margin-right: var(--spacing-6);
    .company-details {
      transform: translateX(35rem);
    }
  }
  .company-details {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 17.25em;
    animation: expand 150ms ease-out forwards;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    scale: 0;
    opacity: 0;
    cursor: pointer;
    .company-image {
      object-fit: cover;
      aspect-ratio: 1;
      position: absolute;
      border-radius: 50%;
      border: 3px solid var(--orange-color);
      top: 0;
      left: 0;
    }
    .company-logo-container {
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 100%;
      height: 5rem;
      border: 3px solid var(--orange-color);
      border-radius: 1.5rem;
      padding: 1rem 1.5rem;
      .company-logo {
        height: 100%;
      }
    }
  }
  @keyframes expand {
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: translateX(0);
      scale: 1;
      opacity: 1;
    }
  }
  #UK,
  #Spain,
  #France,
  #Romania,
  #Slovakia,
  #Hungary,
  #Poland {
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      background: var(--orange-color);
      border-radius: 50%;
      z-index: 100000;
    }
  }
  .timeline-item {
    position: relative;
    overflow-x: visible !important;
    padding: 0 1.5rem;
    &::after {
      position: absolute;
      content: "";
      width: 7rem;
      height: 2rem;
      right: -3.5rem;
      top: 28%;
      background: url(/img/svg/red-arrow.svg) no-repeat center / contain;
      z-index: 1000000;
    }
  }
}

/* src/css/pages/sustainability.css */
@layer pages {
  .sustainability-section {
    background: #f6f5f0;
    @media only screen and (max-width: 980px) {
      height: fit-content;
    }
    .content {
      height: 100%;
    }
    .row:not(.mobile-row) {
      height: 100%;
    }
    .text {
      padding-left: 6.25rem;
      opacity: 0;
      transition: opacity 300ms ease-out 50ms;
      &[data-rwdx-scene-visible] {
        opacity: 1;
      }
      @media only screen and (max-width: 980px) {
        width: 100%;
        padding-left: 0;
      }
      .number {
        font-size: 2rem;
        font-weight: 500;
        color: var(--orange-color);
        padding-right: 1.75rem;
        margin-right: 1.625rem;
        border-right: 0.1875rem solid #dfdac4;
        line-height: 1;
      }
      ul {
        color: var(--navy-color);
      }
    }
    .image {
      overflow: hidden;
      position: relative;
      border-radius: 1.5rem;
      width: 41.875rem;
      @media only screen and (max-width: 980px) {
        width: 100%;
        margin-bottom: var(--spacing-14);
      }
    }
    &[data-reversed=true] {
      background: #fff;
      .row:not(.mobile-row) {
        flex-direction: row-reverse;
        @media only screen and (max-width: 980px) {
          flex-direction: column;
        }
      }
      .text {
        padding-left: 0;
        padding-right: 6.25rem;
        @media only screen and (max-width: 980px) {
          padding-right: 0;
        }
      }
    }
    &.brcgs {
      .image {
        width: 41.875rem;
        aspect-ratio: 1;
        background: #fff;
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        @media only screen and (max-width: 980px) {
          width: 100%;
        }
        & img {
          width: 25.25rem;
          border-radius: 0;
          opacity: 0;
          transform: none;
          transition: opacity 500ms ease-out;
          @media only screen and (max-width: 980px) {
            width: 60%;
          }
        }
        &[data-rwdx-scene-visible] img {
          opacity: 1;
        }
      }
    }
  }
  .ceo-statement {
    display: flex;
    flex-direction: column;
    & p {
      margin-bottom: 1rem;
    }
    & b {
      margin-top: 1rem;
    }
  }
  .mission {
    background: #f0eee5;
    .body-text {
      color: var(--orange-color);
    }
  }
}

/* src/css/pages/impact-awards.css */
@layer pages {
  .impact-awards-header {
    height: 12.3125rem;
    position: relative;
    background: var(--ia-grey-color);
    border-bottom: 0.0625rem solid #E5E7EB;
    .row {
      width: 100%;
      max-width: 48rem;
      padding: 3rem 1.5rem;
      margin: 0 auto;
      & img[alt="Morliny Foods Impact Awards"],
      & img[alt=Description] {
        margin-top: 2.5rem;
      }
    }
    @media only screen and (max-width: 680px) {
      height: 140px;
    }
  }
  img[alt="Morliny Foods Impact Awards"] {
    width: 100%;
    max-width: 183px;
    @media only screen and (max-width: 680px) {
      max-width: 100px;
    }
  }
  img[alt="Impact Awards by Morliny Foods"] {
    width: 100%;
    max-width: 186px;
    @media only screen and (max-width: 680px) {
      max-width: 110px;
    }
  }
  img[alt=Description] {
    width: 100%;
    max-width: 286px;
    @media only screen and (max-width: 680px) {
      max-width: 130px;
    }
  }
  .impact-awards-footer {
    background: var(--ia-grey-color);
    border-top: 0.0625rem solid #E5E7EB;
    padding: 3rem 1.5rem;
  }
  .impact-awards-rules-main {
    background: var(--ia-grey-color);
  }
  .impact-awards-rules {
    padding: 6.75rem 0;
    gap: 2rem;
    @media only screen and (max-width: 680px) {
      padding: 4rem 5vw;
    }
  }
  .impact-awards-form-main {
    padding: 6.75rem 0;
    .heading-2 {
      margin-bottom: 1rem;
    }
    & hr {
      border: 0.0625rem solid #e5e7eb;
    }
  }
  .category-checkboxes {
    gap: 1.5rem;
  }
  .secondary-category-checkboxes {
    margin-top: 2rem;
    .checkbox {
      margin-bottom: 0.75rem;
    }
    &[aria-hidden=true] {
      display: none;
    }
  }
  .input-label {
    color: var(--blue-color);
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: 0.75rem;
  }
  .input-subtext {
    font-size: .875rem;
    color: #364153;
    margin-bottom: 0.75rem;
  }
  .ia-input,
  .ia-textarea {
    width: 100%;
    font-size: .875rem;
    padding: 1rem 0.75rem;
    border-radius: .375rem;
    border: 0.0625rem solid #D1D5DB;
  }
  .textarea-wrapper {
    position: relative;
    width: 100%;
  }
  .textarea-char-counter {
    display: block;
    text-align: right;
    font-size: 14px;
    color: #D1D5DB;
    margin-top: 0.25rem;
  }
  div[data-if-yes-field] {
    margin-top: 2rem;
    &[aria-hidden=true] {
      display: none;
    }
  }
  div[data-submitter-type-field] {
    margin-top: 1.5rem;
    &[aria-hidden=true] {
      display: none;
    }
  }
  div[data-supervisor-email-field] {
    margin-top: 1.5rem;
    &[aria-hidden=true] {
      display: none;
    }
  }
  .checkbox-col {
    .checkbox,
    .radio {
      margin-bottom: 0.75rem;
    }
  }
  .ia-list {
    font-size: .875rem;
    color: #364153;
    list-style-type: disc;
    list-style-position: inside;
  }
  .ia-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: .875rem;
    color: var(--blue-color);
    border: 1px solid var(--blue-color);
    font-weight: 500;
    border-radius: .375rem;
    transition: color 150ms ease-in-out;
    margin-top: 38px;
    &:hover {
      background: #f9fafb;
    }
    &.ia-button--submit {
      background: #f3f4f6;
      width: 100%;
      font-size: 1rem;
      &:hover {
        background: #e5e7eb;
      }
    }
  }
  img[alt="Winning categories"] {
    margin: 2.375rem 0;
  }
  .impact-awards-message {
    display: block;
    margin: 0 auto;
    max-width: 800px;
    p {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
      padding: 0 10px;
    }
  }
}

/* src/css/styles.css */
body {
  overflow-x: hidden;
}
a:not([class]) {
  &:hover,
  &:focus {
    opacity: 0.5;
  }
}
.scroll-snap-container {
  height: 100vh;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-snap-type: y proximity;
  scroll-snap-stop: always;
  @media only screen and (max-height: 800px) {
    scroll-snap-type: y proximity;
  }
  @media only screen and (max-width: 980px) {
    scroll-snap-type: none;
  }
  section {
    scroll-snap-align: start;
  }
  .snap-end {
    scroll-snap-align: end;
  }
}
header {
  position: absolute;
  z-index: 200;
  inset: 0 auto auto 50%;
  padding: 1rem 2rem 1.375rem;
  background: #fff;
  border-radius: 0 0 0.625rem 0.625rem;
  translate: -50% 0;
  height: 8.625rem;
  width: 20rem;
  a {
    width: 100%;
    max-width: 15rem;
    img {
      user-select: none;
      width: 100%;
    }
  }
  @media only screen and (max-width: 980px) {
    width: 100vw;
    border-radius: 0;
    height: fit-content;
    a {
      align-self: flex-start;
      max-width: 10rem;
    }
  }
}
.basis-33-5-rem {
  flex: 0 0 33.5rem;
  @media only screen and (max-width: 980px) {
    flex: 0 0 auto;
    margin-bottom: 2.5rem;
  }
}
.blue-gray-text {
  color: #7a7a8d;
}
.blue-bold {
  font-size: 1.2em;
  color: #7a7a8d !important;
  & b {
    color: var(--navy-color);
  }
}
/*# sourceMappingURL=styles.css.map */