@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/bodoni-moda-latin-ext-opsz-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Liberation Sans');size-adjust:102.6%;ascent-override:97.5%;descent-override:25.3%;line-gap-override:0%}
@font-face{font-family:'Bodoni Fallback';font-style:italic;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Times New Roman'),local('Liberation Serif Italic');size-adjust:114%;ascent-override:98.7%;descent-override:35.1%;line-gap-override:0%}
@font-face{font-family:'BD Icons Brands';font-style:normal;font-weight:400;font-display:block;src:url(data:font/woff2;base64,d09GMgABAAAAAATQAAoAAAAACKAAAASHAwUDAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAVMqJRgE2AiQDGMsOBCAFgzQHIBvtBwCeBXbD9YaNbUkZIhdpuX3IIP/8ZvZhA34aR6tyC6JiTeXUJsiEWxJhqBfD/+/SNde1cpkd3EraS2H/GwlzqbE0Hj0sD6ExEqswAknZvv+0n6u3JfUmXurSYnz3/d1UEE2iiUVMIt6SVhFrixAKIaKbiLgOz3/GNVVrWzd+A6h8z23QALZwDIB67Psv0KpxAU2BSHJoU+V1t+Lmx+Dfk/nUA+BTNAEIAKziSQARAEAAUAD4UECyqqj4HwsMEFA/Brs2uQ64nv2e7PGA5W+BH+1z7OPtWYN9IMSDBILfxU/chgCRwGydNzMlaDDQROiwJQeJVSdWuZei1fVi/wPntkz9rD92fPvot8CF+On/SR5uO+navv3q+9Wr3RvY5j4NqIDnNW/yIAJFydUPGJkkqqn7+sCkyBPInC19KEyqUXSuS8iBG2UA0rJwNs+kkA2pR9f9io1EYxn256Ahmmq0jYhpTV900L2My6hgM4qKjbju/lRF3uoo3D3I4XfMpNnkREGOh1HXAsctyeoK6g48Bow9HjSarO5lVpMRqwmG5qtXf0dzOfJOrL/t7zgf4nt0YPH6KrCazAwJ1t5BwHNbgDdRDLEzALrYkKzxk5ly2aCLqdyYwjHTpQBK5YVmfDPf58ADo9TuznVD4a5SSOTa59wSLbE6ccfkEw2sPfba4eVH3s0QIbx1UHW1/0+b+hLi6HpabWFLNydtdXWjsLL4h3TxIqZpKgU9GGWs4ylbIKTIe+m0vA1fJq1CBCX+RhicQGkTvRm1s/IW7FKj+9IIlRHHAP1e5GJksr19EadbRqOq6Dp1x9BnR2vE5NXTjqTlvjWgSSqCVKSuhQXlRrCE6CcS2jWrqmYiI2jfQioKqetSCpWiPnkVpVZqNeAyunmez2z18v2un6hZDAamrJ6WmwUS1NaDYLrUU3TVbNBUxWR34NUo9hgyXc+jCNFi9cY44HHViad+20QGTYKg52BsGHJ4cJdcnK8G7Vk+1kusLAPtAu+KcvuVqpjmt365LRzLf0uPM5PPOrwUJUnTp/s3fJkiMYoRhSwfV3e2bKRIm8oWoxUZTKorC4OzdBAlgxSWpg9H8Wu+zoxYeTUGbIk5d/ny+H7fSsDYM0iL2SDZEmssm89mc2oXcyQEbTpHLcyaczOjH8aUWmpLaQxRCQ/7kiSlx8QTnWJEjAtKZs8t4tz1r0jKnasgAs8haTCHuGnERZRmzNIkeenYbL2/cwquJKZeVwEBRVNwO/P05Bd7yZ/BLAAAbzZP/MDHe/56iG18CsCAkE4C/7kFsexD7gFCHKVzGSCA4NzEFtAFfbHdJNUh37ldjAQB6Go74nNzepZ8J0kMoICqEUAO9MNEkZywgA1TwgrqLFquxoU1jHL7q3TkJK5Sbapp5pthvLHGmSVCgpESRagz1RTr5EpzjTaTlcl4XXxwYJ5urTLDcFOMOqwRuuLHmm2S4TMtS5Vrcqo8aXL1UZn6GG2GmcZnBMZ8GZ8tTYZMzNdYgFju3tZp1pVzMu0sEjFLNnHsbLwyb52JUjeuQAAAAAA=) format('woff2')}
@font-face{font-family:'BD Icons Solid';font-style:normal;font-weight:900;font-display:block;src:url(data:font/woff2;base64,d09GMgABAAAAAAJwAAoAAAAABJwAAAIpAwUDAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAPMqCCgE2AiQDDMsIBCAFgxgHIBvrA1GUy0EM8FUBT4aPMoSKd+qVWR0OT4SquWnGdxyRColDc9OLi4enY/+dO/OjkrIwKjkKP8iWtuqK7II1v4NzrcR3uKgGKZD1Z1ib/nfGV3AxD7gaE8q1GVM6jQ6onf/391fb474/dbx29r9OkYgCjLwIAgybNejwlg5sQic+1frp1egDy4b1ez9R2k9ZaRTQDAOeuatM/HTM7mblgaKU8wfFxF4MEJvr9D98SMozwHXYsXx5uu/x60ezgsR3uxABsRx/9EGQkNEEF2hCGIQoUSSkLOHTwqXafuOWJ0RaLMcbzUZpLJEBJDmKY4gQgeJEJtLK4RJGcRS3QJHiAjJIfUfIPrBMlvVWv3H1gjWt4G+G5+Xss7PBY9f65tBd2TdBKrHeVca7JhFZj4PIEdlz31e1+ZIo1Dc/YIjWeQTYxQocSa5JQm8+IH8ULoXgF0jxlw+QuuI4Su8nmue4qiYk1yxLSwbf8/zhFJ3bI14uG5bA1sf8bTy2hmEwXoPs6+sNe0eQi7M339q31vtfVpnAz48vmTcLbWoMZRII/sdObxioEQHoHG9IsF+BFV+BHJ81QxAI9VWpG7goKscsxIcwTYOkwj1kC3blIh4Uu/XjtxKj0SC1tXN3MBtNTgClRQOFrY0TELvqHW2t9TEXGErrwBfnVGlrZdZ5eet5lWcQ6ASyRu/gaLa1AUwmlUAik5lkFpMOUK9VL5n6DnjFoLVxwzTqI/n6OAAA) format('woff2')}

.fa-brands, .fa-solid {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}
.fa-brands { font-family: 'BD Icons Brands' !important; font-weight: 400 !important; }
.fa-solid  { font-family: 'BD Icons Solid' !important;  font-weight: 900 !important; }
.fa-instagram:before    { content: "\f16d"; }
.fa-facebook:before     { content: "\f09a"; }
.fa-x-twitter:before    { content: "\e61b"; }
.fa-linkedin:before     { content: "\f08c"; }
.fa-pinterest:before    { content: "\f0d2"; }
.fa-location-dot:before { content: "\f3c5"; }
.fa-envelope:before     { content: "\f0e0"; }

:root {
  --h-deep:   #0b3a47;
  --h-teal:   #17606e;
  --h-aqua:   #4fb3d4;
  --h-foam:   #e8f4f6;
  --h-silver: #b9c4c8;
  --h-orange: #f28c1b;
  --h-ink:    #0a2229;
  --h-orange-ink: #a85100;
  --h-orange-lt:  #ffc680;
  --h-serif: 'Bodoni Moda', 'Bodoni Fallback', 'Times New Roman', serif;
  --h-sans:  'Outfit', 'Outfit Fallback', system-ui, 'Segoe UI', Arial, sans-serif;
  --hh: 60px;
}

body { background: var(--h-foam) !important; color: var(--h-ink); font-family: var(--h-sans); }
.h2o { overflow-x: clip; padding-bottom: 110px; }
.h2o img { display: block; max-width: 100%; }

.header {
  background: rgba(11, 58, 71, .35) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: 1px solid rgba(79, 179, 212, .25) !important;
  box-shadow: 0 6px 30px rgba(11, 58, 71, .25), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.header.glass {
  background: rgba(11, 58, 71, .55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) !important;
  backdrop-filter: blur(18px) saturate(200%) !important;
}
.header::before { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)) !important; }
.header .menu-text, .header .close-text,
.header.glass .menu-text, .header.glass .close-text { color: #e8f4f6 !important; }
.header .spinner, .header.glass .spinner { background: #e8f4f6 !important; }

.header .back-button .back-link,
.header.glass .back-button .back-link {
  background: rgba(11, 58, 71, .5) !important;
  color: #e8f4f6 !important;
  border: 1px solid rgba(79, 179, 212, .45) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header .back-button .back-link:hover,
.header.glass .back-button .back-link:hover {
  background: rgba(23, 96, 110, .75) !important;
  border-color: rgba(79, 179, 212, .8) !important;
  transform: none !important;
}
#logo-container svg text { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }

.openSidebarMenu {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important;
}
.openSidebarMenu:checked ~ .sidebarIconToggle .menu-text { opacity: 0; }
.openSidebarMenu:checked ~ .sidebarIconToggle .close-text { opacity: 1; }

.drop {
  position: fixed;
  top: var(--hh);
  left: 0; right: 0;
  z-index: 9990;
  max-height: calc(100svh - var(--hh));
  overflow-y: auto;
  padding: clamp(22px, 4vw, 44px) 6vw 76px;
  background: linear-gradient(180deg, rgba(11, 58, 71, .62), rgba(11, 58, 71, .5));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V14Q90 28 60 14T0 14Z'/%3E%3C/svg%3E") bottom / 120px 28px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V14Q90 28 60 14T0 14Z'/%3E%3C/svg%3E") bottom / 120px 28px repeat-x;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .9s cubic-bezier(.2, .8, .2, 1), visibility 0s .9s;
}
body.menu-open .drop {
  clip-path: inset(0 0 -40px 0);
  visibility: visible;
  transition: clip-path .9s cubic-bezier(.2, .8, .2, 1), visibility 0s 0s;
}
.drop ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .2rem 2.2rem;
  max-width: 1200px;
}
.drop li {
  min-width: 0;
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1);
}
body.menu-open .drop li {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 70ms + 180ms);
}
.drop a {
  position: relative; display: block;
  padding: .7rem 0 .8rem;
  color: #e8f4f6; text-decoration: none;
  font: italic 600 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--h-serif);
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(79, 179, 212, .25);
  transition: color .3s;
}
.drop a small {
  display: block; margin-bottom: .4rem;
  font: 400 .72rem/1 var(--h-sans); letter-spacing: .16em; color: var(--h-aqua);
}
.drop a::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--h-aqua); transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.drop a:hover, .drop a:focus-visible { color: var(--h-aqua); outline: none; }
.drop a:hover::after, .drop a:focus-visible::after { width: 100%; }
.drop a[aria-current] { color: var(--h-orange); }

.gauge {
  position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%);
  width: 10px; height: 38vh;
  border: 1.5px solid var(--h-teal); border-radius: 10px;
  z-index: 40; overflow: hidden; background: rgba(255, 255, 255, .5);
}
.gauge i {
  position: absolute; inset: auto 0 0; height: var(--lvl, 0%);
  background: linear-gradient(var(--h-aqua), var(--h-teal));
}
.gauge-t {
  position: fixed; right: clamp(2px, 1.2vw, 18px); top: calc(50% + 19vh + 10px);
  z-index: 40; font: 500 .68rem/1 var(--h-sans); letter-spacing: .06em;
  color: var(--h-teal); background: rgba(232, 244, 246, .8);
  padding: 3px 6px; border-radius: 6px; font-variant-numeric: tabular-nums;
}

.bubbles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.hero2 {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  color: #fff; isolation: isolate; overflow: hidden; cursor: crosshair;
}
.hero2 > picture { position: absolute; inset: 0; z-index: -2; }
.hero2 > picture img { width: 100%; height: 100%; object-fit: cover; }
.hero2::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 58, 71, .15), rgba(11, 58, 71, .15) 40%, rgba(11, 58, 71, .82));
}
.hero2__in { padding: 0 5vw clamp(48px, 9vh, 90px); max-width: 1200px; }
.hero2 h1 { font: italic 800 clamp(5rem, 19vw, 17rem)/.8 var(--h-serif); letter-spacing: -.04em; margin: 0 0 .12em; color: #fff; }
.hero2 h1 sub { font-size: .42em; vertical-align: baseline; position: relative; top: .1em; }
.hero2 p { font: 300 clamp(1.05rem, 2vw, 1.5rem)/1.45 var(--h-sans); max-width: 34ch; margin: 0 0 1.4rem; color: #fff; }
.hero2 .meta { font: 400 .85rem/1.6 var(--h-sans); letter-spacing: .08em; opacity: .9; }

.mol {
  filter: drop-shadow(0 0 4px rgba(11, 58, 71, .9));
  position: absolute; right: 6vw; top: 14vh; width: min(34vw, 380px); z-index: 1; color: #fff;
}
.mol path, .mol line { stroke: currentColor; stroke-width: 2.2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s .6s forwards; }
.mol circle { fill: rgba(11, 58, 71, .6); stroke: currentColor; stroke-width: 2; }
.mol text { fill: currentColor; font: 600 17px var(--h-sans); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.ring {
  position: fixed; width: 20px; height: 20px; margin: -10px;
  border: 2px solid rgba(255, 255, 255, .95); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(23, 96, 110, .55), 0 0 14px rgba(79, 179, 212, .6);
  pointer-events: none; z-index: 9000;
  animation: rip 1.8s ease-out both;
}
.ring.r2 { animation-delay: .22s; }
.ring.s  { --sc: 6; width: 14px; height: 14px; margin: -7px; border-width: 1.5px; animation-duration: 1s; }
@keyframes rip {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(var(--sc, 18)); opacity: 0; }
}

.wave {
  display: block; width: 100%; height: clamp(40px, 7vw, 90px);
  margin: -1px 0; fill: var(--c, var(--h-foam));
}
.wave g { animation: sway 14s linear infinite; }
.wave .g2 { animation-duration: 23s; animation-direction: reverse; opacity: .45; }
@keyframes sway { to { transform: translateX(-50%); } }
.js .wave:not(.on) g,
.js .lvl--2:not(.on)::before,
.js .award:not(.on)::before,
.js .press:not(.on) .mag { animation-play-state: paused; }

.award { position: relative; background: var(--h-deep); color: #fff; text-align: center; padding: clamp(40px, 8vw, 90px) 6vw; overflow: hidden; }
.award > * { position: relative; }
.award h2 { font: italic 700 clamp(2rem, 6vw, 5rem)/1 var(--h-serif); margin: 0 0 .4em; color: #fff; }
.award p { max-width: 46ch; margin: 0 auto 1rem; font-weight: 300; line-height: 1.6; }
.award a { color: var(--h-aqua) !important; text-underline-offset: 4px; }

.lvl--2::before, .award::before {
  content: ''; position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 32% at 18% 22%, rgba(79, 179, 212, .28), transparent 62%),
    radial-gradient(ellipse 42% 26% at 82% 58%, rgba(255, 255, 255, .13), transparent 62%),
    radial-gradient(ellipse 36% 22% at 45% 90%, rgba(79, 179, 212, .2), transparent 62%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(5%, 4%, 0) scale(1.08); } }

.concept {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 6vw, 90px); padding: clamp(56px, 10vw, 130px) 7vw; align-items: start;
}
.concept h2 { font: italic 700 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--h-serif); color: var(--h-teal); margin: 0; }
.concept p, .press p { font: 300 1.1rem/1.75 var(--h-sans); margin: 0 0 1.1rem; }
.concept p { max-width: 62ch; }
.concept p:first-of-type { font-size: 1.35rem; color: var(--h-deep); }

.steps { display: block; width: 100%; max-width: 420px; margin-top: 2rem; overflow: visible; }
.steps .outline { fill: none; stroke: var(--h-teal); stroke-width: 2; }
.steps .water {
  fill: var(--h-aqua);
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 2.8s cubic-bezier(.3, .6, .2, 1) .2s;
}
.steps.in .water { transform: scaleY(1); }
.steps text { font: 500 13px var(--h-sans); fill: var(--h-deep); }

.lvl { position: relative; padding: clamp(56px, 9vw, 120px) 4vw; }
.lvl > * { position: relative; }
.lvl > h2 {
  font: italic 700 clamp(2.4rem, 7vw, 6rem)/.95 var(--h-serif);
  color: var(--h-teal); margin: 0 0 clamp(28px, 5vw, 70px) 1vw;
}
.lvl > h2 small {
  display: block; font: 300 1rem/1.5 var(--h-sans); font-style: normal;
  color: var(--h-ink); max-width: 48ch; margin-top: .8rem;
}
.lvl .num {
  position: absolute; right: 3vw; top: clamp(10px, 3vw, 40px);
  font: italic 800 clamp(7rem, 24vw, 22rem)/.8 var(--h-serif);
  color: transparent; -webkit-text-stroke: 1.5px rgba(23, 96, 110, .22);
  pointer-events: none; z-index: 0;
}
.lvl--2 { background: var(--h-teal); color: #fff; overflow: hidden; }
.lvl--2 > h2, .lvl--2 > h2 small { color: #fff; }
.lvl--2 .num { -webkit-text-stroke-color: rgba(255, 255, 255, .22); }

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 3vw, 44px) clamp(14px, 2.2vw, 32px); align-items: start;
}
.item { grid-column: 1 / -1; min-width: 0; }

.shot {
  --mx: 50%; --my: 50%; --sk: 0deg;
  position: relative; margin: 0; overflow: hidden; cursor: zoom-in;
  aspect-ratio: var(--ar, 4/3); border-radius: 3px; background: var(--h-silver);
  box-shadow: 0 34px 60px -34px rgba(11, 58, 71, .55);
  transform: skewY(var(--sk));
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  --s: 1.1;
  transform: scale(var(--s));
  translate: 0 var(--py, 0px);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) { .shot:hover img { --s: 1.17; } }
.shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 240px at var(--mx) var(--my), rgba(255, 255, 255, .42), transparent 70%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
}
@media (hover: hover) { .shot:hover::after { opacity: 1; } }
.shot:focus-visible { outline: 3px solid var(--h-deep); outline-offset: 3px; }
.lvl--2 .shot:focus-visible { outline-color: #fff; }

.cap { margin: .9rem 0 0; max-width: 42ch; font: 400 .85rem/1.5 var(--h-sans); letter-spacing: .03em; opacity: .85; }
.cap b { margin-right: .7em; font: italic 600 1.15rem var(--h-serif); color: var(--h-orange-ink); }
.lvl--2 .cap b { color: var(--h-orange-lt); }

.q {
  grid-column: 1 / -1; align-self: center;
  font: italic 600 clamp(1.7rem, 3.4vw, 3rem)/1.15 var(--h-serif); color: var(--h-teal);
}
.lvl--2 .q { color: #fff; }
.q span { display: block; margin-top: 1rem; font: 300 .95rem/1.5 var(--h-sans); font-style: normal; opacity: .8; }

@media (min-width: 861px) {
  .l1 .a { grid-column: 1 / 9; }
  .l1 .b { grid-column: 9 / 13; margin-top: 14vw; --ar: 4/5; }
  .l1 .c { grid-column: 1 / 6;  --ar: 4/5; }
  .l1 .d { grid-column: 6 / 13; margin-top: 9vw; --ar: 16/10; }
  .l1 .e { grid-column: 1 / 8; }
  .l1 .q { grid-column: 8 / 13; }

  .l2 .w  { grid-column: 1 / -1; --ar: 16/9; }
  .l2 .st { grid-column: span 4; --ar: 4/5; }
  .l2 .st1 { margin-top: 18vw; }
  .l2 .st2 { margin-top: 9vw; }
  .l2 .p1 { grid-column: 1 / 8; }
  .l2 .p2 { grid-column: 8 / 13; --ar: 4/5; margin-top: 6vw; }
  .l2 .q  { grid-column: 3 / 11; text-align: center; padding: 4vw 0; }
}

.js .item, .js .q, .js .stats > div {
  opacity: 0; transform: translateY(50px);
  transition: opacity 1s, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.js .item .shot { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.2, .7, .2, 1) .1s; }
.js .item.in, .js .q.in, .js .stats.in > div { opacity: 1; transform: none; }
.js .item.in .shot { clip-path: inset(0 0 0 0); }
.js .stats.in > div:nth-child(2) { transition-delay: .12s; }
.js .stats.in > div:nth-child(3) { transition-delay: .24s; }
.js .stats.in > div:nth-child(4) { transition-delay: .36s; }

body.moving .shot.vis { filter: url(#liquid); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;
  padding: clamp(40px, 7vw, 90px) 7vw 0; text-align: center;
}
.stats b { display: block; font: italic 800 clamp(3.4rem, 9vw, 7.5rem)/1 var(--h-serif); color: var(--h-teal); font-variant-numeric: tabular-nums; }
.stats b em { font-size: .45em; font-style: italic; color: var(--h-orange-ink); margin-left: .12em; }
.stats > div > span { display: block; margin-top: .4rem; font: 400 .8rem/1 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-teal); }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;
  padding: clamp(40px, 7vw, 90px) 7vw;
}
.facts dt { font: 400 .8rem/1 var(--h-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--h-teal); margin-bottom: .5rem; }
.facts dd { margin: 0; font: italic 600 1.5rem/1.25 var(--h-serif); }

.end {
  display: block; text-align: center; padding: clamp(48px, 9vw, 110px) 5vw;
  font: italic 700 clamp(2.4rem, 8vw, 7rem)/1 var(--h-serif);
  color: var(--h-teal); text-decoration: none; transition: color .3s, letter-spacing .6s;
}
.end:hover { color: var(--h-orange-ink); letter-spacing: .02em; }

.h-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: rgba(11, 58, 71, .55) !important; color: #fff !important;
  border: 0; border-radius: 50%; width: 48px; height: 48px;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.h-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.h-nav.p { left: 12px; }
.h-nav.n { right: 12px; }

@media (max-width: 860px) {
  .concept { grid-template-columns: 1fr; }
  .mol { width: 46vw; top: 11vh; }
  .lvl .shot { --ar: 4/3; }
  .lvl .num { opacity: .6; }
}
@media (max-width: 1100px) { .gauge, .gauge-t { display: none; } }
@media (max-height: 520px) and (orientation: landscape) { .mol { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .wave g, .mol *, .ring, .lvl--2::before, .award::before { animation: none !important; }
  .mol path, .mol line { stroke-dashoffset: 0; }
  .shot img { transition: none; }
  .js .item, .js .q, .js .stats > div { opacity: 1; transform: none; transition: none; }
  .js .item .shot { clip-path: none; transition: none; }
  .steps .water { transform: none; transition: none; }
  .drop, body.menu-open .drop { transition-duration: .01s; }
}

.header #logo-container text,
.header.glass #logo-container text { fill: url(#logoGradGlass) !important; }
.header #logo-container text.tagline,
.header.glass #logo-container text.tagline {
  fill: #e8f4f6 !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: .3px !important;
  font-family: "Outfit", "Outfit Fallback", system-ui, sans-serif !important;
}

.press {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 6vw, 90px); align-items: center;
  padding: clamp(48px, 8vw, 110px) 7vw 0;
}
.press h2 { font: italic 700 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--h-serif); color: var(--h-teal); margin: 0 0 .5em; }
.press p { max-width: 52ch; }
.press p i { font-family: var(--h-serif); font-weight: 600; }
.press__mags { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 40px); }
.mag { flex: 1 1 0; max-width: 300px; min-width: 0; }
.mag--1 { rotate: -3deg;  animation: bob 7s ease-in-out infinite; }
.mag--2 { rotate: 2.5deg; animation: bob 8.5s -3s ease-in-out infinite reverse; }
@keyframes bob { 50% { translate: 0 -12px; rotate: 0deg; } }
.press .shot img { --s: 1.03; translate: none; }
@media (hover: hover) { .press .shot:hover img { --s: 1.07; } }
@media (max-width: 860px) {
  .press { grid-template-columns: 1fr; }
  .mag--2 { margin-top: 12vw; }
}
@media (prefers-reduced-motion: reduce) { .mag { animation: none !important; } }

@media (max-width: 768px) {
  .header { justify-content: flex-start !important; }
  .header #logo-container {
    padding-left: 0 !important; margin: -10px 0 0 -17px !important;
    transform: scale(.82) !important; transform-origin: 0 50% !important;
  }
  .header #logo-container svg { overflow: visible; }
}
@media (max-width: 360px) {
  .header #logo-container { transform: scale(.74) !important; margin-left: -22px !important; }
}

body.pn-page .footer {
  background: rgba(11, 58, 71, .78);
  border-color: rgba(79, 179, 212, .35);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
body.pn-page .footer::before { opacity: .25; }
body.pn-page .footer .contact-details p,
body.pn-page .footer .contact-details a { color: #e8f4f6; }
body.pn-page .footer .copyright { color: rgba(232, 244, 246, .7); }
body.pn-page .footer .social-icons a { border-color: rgba(232, 244, 246, .18); }
body.pn-page .footer .social-icons a i { color: #cfeee5; }
body.pn-page .footer .social-icons a:hover i,
body.pn-page .footer .social-icons a:focus-visible i { color: var(--h-orange-lt); }

.hero2 p, .hero2 .meta { text-shadow: 0 2px 14px rgba(11, 58, 71, .75), 0 1px 2px rgba(11, 58, 71, .6); }
.mol path, .mol line { transition: stroke .3s; }
.mol:hover path { stroke: var(--h-orange-lt); }

.journal { display: grid; gap: clamp(12px, 1.8vw, 20px); max-width: 62ch; }
.note {
  position: relative; overflow: hidden;
  padding: 1.1rem 1.3rem 1.2rem 1.7rem;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(23, 96, 110, .18);
  border-radius: 4px;
}
.note::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: rgba(23, 96, 110, .12); }
.note::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 7px;
  background: linear-gradient(var(--h-aqua), var(--h-teal));
  transform-origin: 50% 100%;
  transition: transform 1.8s cubic-bezier(.3, .6, .2, 1) .25s;
}
.js .note:not(.in)::after { transform: scaleY(0); }

.note h3 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .8em;
  margin: 0 0 .55rem;
  font: 500 .72rem/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--h-orange-ink);
}
.note h3 b { font: italic 600 1.25rem/1 var(--h-serif); letter-spacing: 0; }
.note .tag {
  margin-left: auto; padding: .35em .7em; border: 1px solid currentColor; border-radius: 99px;
  font-size: .62rem; letter-spacing: .14em; color: var(--h-teal);
}
.concept .journal .note p { margin: 0; max-width: none; font: 300 1.05rem/1.65 var(--h-sans); color: var(--h-ink); }
.concept .journal .note--lead p { font-size: 1.3rem; line-height: 1.5; color: var(--h-deep); }

.js .note { opacity: 0; transform: translateY(32px); transition: opacity .9s, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .note.in { opacity: 1; transform: none; }
.journal .note:nth-child(2) { transition-delay: .1s; }
.journal .note:nth-child(3) { transition-delay: .2s; }
.journal .note:nth-child(4) { transition-delay: .3s; }

.spec {
  display: inline-flex; align-items: center; gap: .75em;
  margin: 0 0 1.1rem 1vw; padding: .5em 1em .5em .8em;
  font: 500 .72rem/1 var(--h-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--h-teal); border: 1px solid currentColor; border-radius: 99px;
}
.spec::before { content: ''; width: .75em; height: .75em; border-radius: 50%; background: var(--h-aqua); box-shadow: 0 0 0 3px rgba(79, 179, 212, .3); }
.lvl--2 .spec { color: #fff; }

.cap .tag { display: block; margin: .4rem 0 0; font: 500 .66rem/1 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .65; }

@media (prefers-reduced-motion: reduce) {
  .js .note { opacity: 1; transform: none; transition: none; }
  .note::after { transition: none; }
}

.data { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem 1.4rem; margin: 0; }
.data dt { margin: 0 0 .4rem; font: 500 .64rem/1 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-teal); }
.data dd { margin: 0; font: italic 600 1.5rem/1.1 var(--h-serif); color: var(--h-deep); font-variant-numeric: tabular-nums; }
.data dd small { margin-left: .25em; font: 400 .8rem/1 var(--h-sans); font-style: normal; opacity: .7; }
.concept .journal .note p.src { margin-top: 1rem; font-size: .78rem; letter-spacing: .04em; opacity: .65; }

.note h3 b { font: 400 1.2rem/1 var(--h-sans); font-variant-numeric: lining-nums tabular-nums; }
.data dd { font: 500 1.5rem/1.1 var(--h-sans); letter-spacing: -.01em; }
.data dd small { font-weight: 300; }
.data { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 861px) {
  .concept > div:first-child { position: sticky; top: calc(var(--hh) + 28px); align-self: start; }
}

body.publication-page .header .back-button .back-link {
  background: rgba(90, 143, 123, .95) !important; background-image: none !important;
  color: #fff !important; border: 1px solid rgba(140, 200, 175, .55) !important;
  box-shadow: 0 4px 14px rgba(11, 58, 71, .35), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  transform: none !important;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
body.publication-page .header.glass .back-button .back-link {
  background: rgba(74, 122, 105, .75) !important; border-color: rgba(140, 200, 175, .45) !important;
  box-shadow: 0 2px 10px rgba(11, 58, 71, .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
body.publication-page .header .back-button .back-link svg,
body.publication-page .header .back-button .back-link span { color: #fff !important; text-shadow: none !important; }

#logo-container a { display: block; text-decoration: none; }
#logo-container a:focus-visible { outline: 2px solid #e8f4f6; outline-offset: 4px; border-radius: 4px; }

.press__mags .mag--2 .shot { box-shadow: 0 24px 50px -28px rgba(11, 58, 71, .55); }

@media (min-width: 861px) {
  .press__mags { align-items: flex-start; }
}

.press__mags .mag--2 { max-width: 380px; }

@media (min-width: 861px) {
  .l1 .c img   { object-position: 12% 50%; }
  .l2 .st1 img { object-position: 32% 50%; }
  .l2 .p2 img  { object-position: 22% 50%; }
}