:root { 
 --pale: #afeeee; 
 --cyan: #00ced1; 
 --teal: #20b2aa; 
 --cadet: #5f9ea0; 
 --steel: #4682b4; 
 --ink: #102433; 
 --paper: #f4fbfb; 
 --white: #ffffff; 
 --max: 72rem; 
 --ui: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif; 
 --display: "Cormorant Garamond", Georgia, serif; 
} 
 
*, 
*::before, 
*::after { 
 box-sizing: border-box; 
} 
 
html { 
 scroll-behavior: smooth; 
} 
 
body { 
 margin: 0; 
 font-family: var(--ui); 
 font-size: 1rem; 
 line-height: 1.6; 
 color: var(--ink); 
 background: var(--white); 
 overflow-x: hidden; 
 -webkit-font-smoothing: antialiased; 
} 
 
img { 
 max-width: 100%; 
 display: block; 
} 
 
a { 
 color: inherit; 
 text-decoration: none; 
} 
 
button { 
 font: inherit; 
 color: inherit; 
 background: none; 
 border: 0; 
 cursor: pointer; 
} 
 
.skip-link { 
 position: absolute; 
 left: -9999px; 
 top: 0; 
 z-index: 200; 
 padding: 0.7rem 1rem; 
 background: var(--ink); 
 color: var(--white); 
} 
 
.skip-link:focus { 
 left: 1rem; 
 top: 1rem; 
} 
 
/* ── Header ─────────────────────────────────────────── */ 
 
.site-header { 
 position: fixed; 
 inset: 0 0 auto; 
 z-index: 80; 
 display: grid; 
 grid-template-columns: 1fr auto; 
 align-items: center; 
 padding: 1.35rem 2rem; 
 color: var(--white); 
 mix-blend-mode: normal; 
 transition: color 0.3s, background 0.3s; 
} 
 
.site-header.is-light { 
 color: var(--ink); 
 background: rgba(255, 255, 255, 0.92); 
 backdrop-filter: blur(10px); 
} 
 
.brand { 
 display: flex; 
 flex-direction: row; 
 align-items: center; 
 gap: 0.7rem; 
 letter-spacing: 0.18em; 
 font-size: 0.78rem; 
 font-weight: 500; 
 text-transform: uppercase; 
} 
 
.brand-logo { 
 width: 1.85rem; 
 height: 1.85rem; 
 object-fit: contain; 
 filter: invert(1); 
} 
 
.site-header.is-light .brand-logo { 
 filter: none; 
} 
 
.menu-toggle { 
 justify-self: end; 
 display: flex; 
 align-items: center; 
 gap: 0.7rem; 
 letter-spacing: 0.28em; 
 font-size: 0.68rem; 
 text-transform: uppercase; 
} 
 
.menu-toggle__bars { 
 display: flex; 
 flex-direction: column; 
 gap: 6px; 
 width: 22px; 
} 
 
.menu-toggle__bars i { 
 display: block; 
 height: 1px; 
 background: currentColor; 
 transition: transform 0.25s, opacity 0.25s; 
} 
 
body.menu-open .menu-toggle__bars i:first-child { 
 transform: translateY(3.5px) rotate(45deg); 
} 
 
body.menu-open .menu-toggle__bars i:last-child { 
 transform: translateY(-3.5px) rotate(-45deg); 
} 
 
/* ── Menu overlay ───────────────────────────────────── */ 
 
.menu { 
 position: fixed; 
 inset: 0; 
 z-index: 70; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 background: var(--ink); 
 color: var(--pale); 
 opacity: 0; 
 pointer-events: none; 
 transition: opacity 0.35s; 
} 
 
body.menu-open .menu { 
 opacity: 1; 
 pointer-events: auto; 
} 
 
.menu nav { 
 display: flex; 
 flex-direction: column; 
 gap: 0.35rem; 
 text-align: center; 
} 
 
.menu a { 
 font-family: var(--display); 
 font-size: clamp(2rem, 5vw, 3.4rem); 
 font-weight: 400; 
 letter-spacing: -0.02em; 
 color: var(--pale); 
} 
 
.menu a:hover { 
 color: var(--cyan); 
} 
 
.menu a em { 
 font-style: normal; 
 font-family: var(--ui); 
 font-size: 0.7rem; 
 letter-spacing: 0.28em; 
 margin-right: 0.8rem; 
 opacity: 0.55; 
 vertical-align: middle; 
} 
 
/* ── Progress ───────────────────────────────────────── */ 
 
.progress { 
 position: fixed; 
 right: 1.35rem; 
 top: 50%; 
 z-index: 60; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 gap: 0.55rem; 
 transform: translateY(-50%); 
} 
 
.progress a { 
 width: 0.45rem; 
 height: 0.45rem; 
 border-radius: 999px; 
 background: transparent; 
 border: 1px solid rgba(255, 255, 255, 0.7); 
 transition: height 0.25s, background 0.25s, border-color 0.25s; 
} 
 
.progress a.is-active { 
 height: 1.15rem; 
 background: var(--pale); 
 border-color: var(--pale); 
} 
 
.site-header.is-light ~ .progress a, 
body.is-light-page .progress a { 
 border-color: rgba(16, 36, 51, 0.35); 
} 
 
.site-header.is-light ~ .progress a.is-active, 
body.is-light-page .progress a.is-active { 
 background: var(--ink); 
 border-color: var(--ink); 
} 
 
/* ── Cinematic slides ───────────────────────────────── */ 
 
.slide { 
 position: relative; 
 min-height: 100vh; 
 display: flex; 
 align-items: center; 
 overflow: hidden; 
 color: var(--white); 
} 
 
.slide__media { 
 position: absolute; 
 inset: 0; 
 z-index: 0; 
} 
 
.slide__media img { 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
} 
 
.slide--terrain .slide__media img { 
 transform: scale(1.12); 
 filter: hue-rotate(168deg) saturate(0.9) contrast(1.08) brightness(0.72); 
} 
 
.slide--dark .slide__media img { 
 object-position: 50% 40%; 
 transform: scale(1.12); 
 filter: blur(16px) saturate(0.5) brightness(0.28) hue-rotate(22deg) contrast(1.04); 
} 
 
.slide--dark .slide__tint { 
 background: 
 linear-gradient( 
 110deg, 
 rgba(16, 36, 51, 0.82) 0%, 
 rgba(16, 36, 51, 0.66) 46%, 
 rgba(16, 36, 51, 0.5) 100% 
 ); 
} 
 
.slide--platform .slide__media img { 
 object-fit: cover; 
 object-position: center; 
 transform: scale(1.28); 
 filter: blur(22px) saturate(0.4) brightness(0.48); 
} 
 
.slide--platform .slide__tint { 
 background: linear-gradient( 
 100deg, 
 rgba(16, 36, 51, 0.55) 0%, 
 rgba(16, 36, 51, 0.28) 48%, 
 rgba(32, 178, 170, 0.18) 100% 
 ); 
} 
 
.slide__copy--platform { 
 display: grid; 
 gap: 2rem; 
 align-items: center; 
 width: min(76rem, calc(100% - 5rem)); 
} 
 
@media (min-width: 960px) { 
 .slide__copy--platform { 
 grid-template-columns: minmax(16rem, 0.9fr) minmax(22rem, 1.2fr); 
 } 
 
 .slide--platform h1 { 
 font-size: clamp(2.8rem, 6vw, 5.2rem); 
 } 
} 
 
.product-shots { 
 position: relative; 
 display: grid; 
 gap: 1rem; 
 min-height: 0; 
} 
 
.product-shot { 
 margin: 0; 
 display: flex; 
 flex-direction: column; 
 background: #fff; 
 border-radius: 12px; 
 overflow: hidden; 
 box-shadow: 0 22px 55px rgba(8, 18, 28, 0.38); 
 border: 1px solid rgba(255, 255, 255, 0.35); 
} 
 
.product-shot img { 
 width: 100%; 
 height: auto; 
 display: block; 
 object-fit: contain; 
 background: #fff; 
} 
 
.product-shot figcaption { 
 padding: 0.85rem 1rem 1rem; 
 background: #102433; 
 color: #fff; 
} 
 
.product-shot figcaption strong { 
 display: block; 
 font-size: 0.62rem; 
 font-weight: 600; 
 letter-spacing: 0.16em; 
 text-transform: uppercase; 
 color: var(--pale); 
} 
 
.product-shot figcaption p { 
 margin: 0.35rem 0 0; 
 font-size: 0.82rem; 
 font-weight: 400; 
 line-height: 1.45; 
 letter-spacing: 0; 
 text-transform: none; 
 color: rgba(255, 255, 255, 0.88); 
} 
 
.product-links { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 0.35rem 1.6rem; 
 margin-top: 1.35rem; 
} 
 
.product-links .read-more { 
 margin-top: 0; 
} 
 
@media (min-width: 960px) { 
 .product-shot, 
 .product-shot--bio, 
 .product-shot--spyn { 
 position: relative; 
 width: 100%; 
 top: auto; 
 right: auto; 
 bottom: auto; 
 left: auto; 
 } 
} 
 
@media (max-width: 959px) { 
 .product-shots { 
 display: grid; 
 gap: 1rem; 
 min-height: 0; 
 } 
 
 .product-shot { 
 position: relative; 
 } 
} 
 
.slide--pipeline { 
 overflow: visible; 
 color: var(--ink); 
 background: 
 radial-gradient(ellipse 80% 60% at 88% 8%, rgba(0, 206, 209, 0.2), transparent 55%), 
 radial-gradient(ellipse 70% 50% at 6% 92%, rgba(70, 130, 180, 0.18), transparent 50%), 
 linear-gradient(165deg, #f3fbfb 0%, #e4f4f5 52%, #d4e8ee 100%); 
} 
 
.slide.slide--pipeline h1 { 
 font-size: clamp(2.4rem, 5vw, 4rem); 
 line-height: 1.2; 
 margin-bottom: 3.5rem; 
} 
 
.slide.slide--pipeline h1 .fill { 
 color: #102433; 
} 
 
.slide--pipeline .slide__lede { 
 color: var(--cadet); 
} 
 
.slide__copy--pipeline { 
 width: min(76rem, calc(100% - 4.5rem)); 
 padding-block: 7.5rem 4.25rem; 
} 
 
.pipeline { 
 margin-top: 0.4rem; 
} 
 
.pipeline__axis, 
.pipeline__row { 
 display: grid; 
 grid-template-columns: minmax(6.5rem, 9rem) minmax(7rem, 9rem) minmax(10rem, 1fr); 
 gap: 0.75rem 1rem; 
 align-items: center; 
} 
 
.pipeline__stages { 
 display: grid; 
 grid-template-columns: repeat(5, 1fr); 
 font-size: 0.62rem; 
 font-weight: 600; 
 letter-spacing: 0.08em; 
 text-transform: uppercase; 
 color: var(--cadet); 
 padding-bottom: 1rem; 
} 
 
.pipeline__group { 
 margin-top: 1.15rem; 
} 
 
.pipeline__head { 
 display: flex; 
 align-items: center; 
 gap: 1rem; 
 margin: 0 0 0.65rem; 
} 
 
.pipeline__head img { 
 height: 2.35rem; 
 width: auto; 
} 
 
.pipeline__head p { 
 margin: 0; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.16em; 
 text-transform: uppercase; 
 color: var(--cadet); 
} 
 
.pipeline__row { 
 min-height: 3.15rem; 
 margin-bottom: 0.45rem; 
 padding: 0.45rem 1rem; 
 background: rgba(255, 255, 255, 0.86); 
 border: 1px solid rgba(70, 130, 180, 0.14); 
 border-radius: 999px; 
 box-shadow: 0 8px 24px rgba(16, 36, 51, 0.04); 
} 
 
.pipeline__row h3 { 
 margin: 0; 
 font-family: var(--ui); 
 font-size: 0.92rem; 
 font-weight: 600; 
 letter-spacing: 0.01em; 
} 
 
.pipeline__row > p { 
 margin: 0; 
 font-size: 0.72rem; 
 color: var(--cadet); 
} 
 
.pipeline__track { 
 position: relative; 
 height: 0.72rem; 
 border-radius: 999px; 
 background: 
 repeating-linear-gradient( 
 90deg, 
 transparent, 
 transparent calc(20% - 1px), 
 rgba(95, 158, 160, 0.22) calc(20% - 1px), 
 rgba(95, 158, 160, 0.22) 20% 
 ), 
 #e7eef1; 
 overflow: hidden; 
} 
 
.pipeline__bar { 
 display: block; 
 width: var(--fill, 16%); 
 height: 100%; 
 border-radius: 999px; 
 background: linear-gradient(90deg, var(--cyan), var(--steel)); 
} 
 
.slide__tint { 
 position: absolute; 
 inset: 0; 
 background: 
 linear-gradient( 
 105deg, 
 rgba(16, 36, 51, 0.55) 0%, 
 rgba(70, 130, 180, 0.28) 48%, 
 rgba(32, 178, 170, 0.22) 100% 
 ); 
} 
 
.slide--terrain .slide__tint { 
 background: 
 linear-gradient( 
 160deg, 
 rgba(16, 36, 51, 0.5) 0%, 
 rgba(95, 158, 160, 0.28) 100% 
 ); 
} 
 
.slide__grid { 
 position: absolute; 
 inset: 0; 
 background-image: 
 linear-gradient(rgba(175, 238, 238, 0.07) 1px, transparent 1px), 
 linear-gradient(90deg, rgba(175, 238, 238, 0.07) 1px, transparent 1px); 
 background-size: 22% 100%, 100% 18%; 
 pointer-events: none; 
} 
 
.slide__copy { 
 position: relative; 
 z-index: 1; 
 width: min(var(--max), calc(100% - 6rem)); 
 margin-inline: auto; 
 padding-block: 6rem 4rem; 
} 
 
.slide__lede { 
 max-width: 42rem; 
 margin: 0 0 1.25rem; 
 font-size: 0.68rem; 
 font-weight: 500; 
 letter-spacing: 0.18em; 
 line-height: 1.7; 
 text-transform: uppercase; 
 color: rgba(255, 255, 255, 0.82); 
} 
 
.slide h1 { 
 margin: 0; 
 font-family: var(--display); 
 font-weight: 400; 
 font-size: clamp(3.2rem, 8.4vw, 7.2rem); 
 line-height: 0.92; 
 letter-spacing: -0.03em; 
} 
 
#hero h1 { 
 font-size: clamp(2.6rem, 6.8vw, 5.6rem); 
} 
 
#hero .slide__lede, 
.slide--platform .slide__lede { 
 color: #fff; 
 text-shadow: 0 1px 14px rgba(8, 18, 28, 0.55); 
} 
 
.slide h1 .fill { 
 display: block; 
 color: var(--pale); 
} 
 
.slide h1 .outline { 
 display: block; 
 color: transparent; 
 -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.82); 
 text-stroke: 1.2px rgba(255, 255, 255, 0.82); 
} 
 
.slide--dark h1 .fill, 
.slide--platform h1 .fill, 
.slide--dark h1 .outline, 
.slide--platform h1 .outline { 
 color: #fff; 
 -webkit-text-stroke: 0; 
 text-shadow: 0 2px 22px rgba(8, 18, 28, 0.45); 
} 
 
.read-more { 
 display: inline-flex; 
 align-items: center; 
 gap: 0.85rem; 
 margin-top: 2rem; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.28em; 
 text-transform: uppercase; 
 color: var(--white); 
} 
 
.read-more::before { 
 content: ""; 
 width: 2.2rem; 
 height: 1px; 
 background: currentColor; 
} 
 
.read-more:hover { 
 color: var(--pale); 
} 
 
/* ── Editorial ──────────────────────────────────────── */ 
 
.editorial { 
 position: relative; 
 padding: clamp(5.5rem, 12vw, 8rem) 0 4.5rem; 
 overflow: hidden; 
 background: var(--white); 
} 
 
.wrap { 
 width: min(var(--max), calc(100% - 3rem)); 
 margin-inline: auto; 
} 
 
.ghost { 
 position: relative; 
} 
 
.ghost::before { 
 content: attr(data-ghost); 
 position: absolute; 
 top: -0.42em; 
 left: -0.04em; 
 z-index: 0; 
 font-size: clamp(4.8rem, 16vw, 11rem); 
 font-weight: 700; 
 letter-spacing: -0.05em; 
 line-height: 1; 
 color: rgba(70, 130, 180, 0.09); 
 pointer-events: none; 
 white-space: nowrap; 
} 
 
.eyebrow { 
 position: relative; 
 z-index: 1; 
 margin: 0 0 0.85rem; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.22em; 
 text-transform: uppercase; 
 color: var(--cadet); 
} 
 
.editorial h2 { 
 position: relative; 
 z-index: 1; 
 max-width: 18ch; 
 margin: 0 0 2.5rem; 
 font-size: clamp(2.4rem, 5.4vw, 4.25rem); 
 font-weight: 700; 
 line-height: 1.05; 
 letter-spacing: -0.035em; 
} 
 
.split { 
 display: grid; 
 gap: 1.5rem 3.5rem; 
} 
 
@media (min-width: 860px) { 
 .split { 
 grid-template-columns: minmax(12rem, 0.7fr) 1.3fr; 
 } 
} 
 
.split__label { 
 margin: 0; 
 font-size: 0.78rem; 
 font-weight: 700; 
 letter-spacing: 0.16em; 
 text-transform: uppercase; 
} 
 
.split p { 
 margin: 0 0 1rem; 
 font-size: 1.05rem; 
 line-height: 1.75; 
 color: #2a4454; 
} 
 
.split p:last-child { 
 margin-bottom: 0; 
} 
 
/* ── Full-bleed story ───────────────────────────────── */ 
 
.story { 
 position: relative; 
 min-height: 28rem; 
 display: flex; 
 align-items: center; 
 color: var(--white); 
 overflow: hidden; 
 background: #0a1218; 
} 
 
.story__media { 
 position: absolute; 
 inset: 0; 
} 
 
.story__media img { 
 width: 100%; 
 height: 100%; 
 object-fit: contain; 
 object-position: center; 
 filter: brightness(0.78) saturate(0.8) hue-rotate(8deg); 
} 
 
.story__tint { 
 position: absolute; 
 inset: 0; 
 background: linear-gradient( 
 90deg, 
 rgba(16, 36, 51, 0.55) 8%, 
 rgba(70, 130, 180, 0.28) 100% 
 ); 
} 
 
.story__copy { 
 position: relative; 
 z-index: 1; 
 width: min(var(--max), calc(100% - 3rem)); 
 margin-inline: auto; 
 display: grid; 
 gap: 1.5rem 3rem; 
 padding: 5rem 0; 
} 
 
@media (min-width: 860px) { 
 .story__copy { 
 grid-template-columns: 0.7fr 1.3fr; 
 } 
} 
 
.story h3 { 
 margin: 0; 
 font-size: 1.05rem; 
 font-weight: 600; 
} 
 
.story p { 
 margin: 0; 
 font-size: 1.02rem; 
 line-height: 1.75; 
 color: rgba(255, 255, 255, 0.9); 
} 
 
/* ── Approach band ──────────────────────────────────── */ 
 
.band { 
 position: relative; 
 overflow: hidden; 
 padding: clamp(6.75rem, 12vw, 8.75rem) 0 clamp(4.5rem, 10vw, 7rem); 
 background: var(--steel); 
 color: var(--white); 
} 
 
.band::before { 
 content: attr(data-ghost); 
 position: absolute; 
 top: 3.4rem; 
 left: 4%; 
 font-size: clamp(5rem, 18vw, 12rem); 
 font-weight: 700; 
 letter-spacing: -0.05em; 
 line-height: 1; 
 color: rgba(175, 238, 238, 0.12); 
 pointer-events: none; 
} 
 
.band h2 { 
 position: relative; 
 margin: 0 0 0.85rem; 
 font-size: clamp(2.2rem, 4vw, 3.2rem); 
 font-weight: 700; 
 letter-spacing: -0.03em; 
} 
 
.band-lede { 
 position: relative; 
 max-width: 38rem; 
 margin: 0 0 2.25rem; 
 font-size: 1.02rem; 
 line-height: 1.6; 
 color: rgba(255, 255, 255, 0.88); 
} 
 
.band-grid { 
 position: relative; 
 display: grid; 
 gap: 2rem; 
} 
 
@media (min-width: 800px) { 
 .band-grid { 
 grid-template-columns: repeat(3, 1fr); 
 } 
 
 .band-grid--pair { 
 grid-template-columns: 1fr 1fr; 
 gap: 1.35rem; 
 } 
} 
 
.band-lane { 
 padding: 1.4rem 1.5rem 1.5rem; 
 border: 1px solid rgba(175, 238, 238, 0.22); 
 border-radius: 14px; 
 background: rgba(16, 36, 51, 0.12); 
} 
 
.band-lane__product { 
 margin: 0 0 0.45rem; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.18em; 
 text-transform: uppercase; 
 color: var(--pale); 
} 
 
.band h3 { 
 margin: 0 0 0.85rem; 
 font-size: 1.15rem; 
 letter-spacing: -0.02em; 
 text-transform: none; 
} 
 
.band ul { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
} 
 
.band li { 
 margin-bottom: 0.45rem; 
 font-size: 0.95rem; 
 line-height: 1.55; 
 color: rgba(255, 255, 255, 0.88); 
} 
 
.band-lane__enabled { 
 margin: 1.15rem 0 0; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.16em; 
 text-transform: uppercase; 
 color: var(--pale); 
 opacity: 0.9; 
} 
 
.band-spine { 
 position: relative; 
 margin: 1.75rem 0 0; 
 padding-top: 1.1rem; 
 border-top: 1px solid rgba(175, 238, 238, 0.22); 
 font-size: 0.78rem; 
 letter-spacing: 0.04em; 
 line-height: 1.55; 
 color: var(--pale); 
} 
 
/* ── Team ───────────────────────────────────────────── */ 
 
.team-lede { 
 position: relative; 
 z-index: 1; 
 max-width: 44rem; 
 margin: -1rem 0 2.5rem; 
 font-size: 1.08rem; 
 color: #2a4454; 
} 
 
.team-grid { 
 position: relative; 
 z-index: 1; 
 display: grid; 
 gap: 1.5rem; 
} 
 
@media (min-width: 800px) { 
 .team-grid { 
 grid-template-columns: repeat(2, 1fr); 
 } 
} 
 
.person { 
 display: grid; 
 grid-template-columns: 6.2rem 1fr; 
 gap: 1.15rem; 
 align-items: start; 
} 
 
.person img { 
 width: 6.2rem; 
 height: 6.2rem; 
 object-fit: cover; 
 object-position: center top; 
 border-radius: 50%; 
 border: 1px solid rgba(70, 130, 180, 0.25); 
} 
 
.person__crop { 
 width: 6.2rem; 
 height: 6.2rem; 
 border-radius: 50%; 
 border: 1px solid rgba(70, 130, 180, 0.25); 
 overflow: hidden; 
} 
 
.person__crop img { 
 border: 0; 
 border-radius: 0; 
 object-position: 50% 12%; 
 transform: scale(1.48); 
 transform-origin: 50% 16%; 
 filter: blur(0.2px); 
} 
 
.person h3 { 
 margin: 0 0 0.2rem; 
 font-size: 1.15rem; 
 letter-spacing: -0.02em; 
} 
 
.person .role { 
 margin: 0 0 0.55rem; 
 font-size: 0.68rem; 
 font-weight: 600; 
 letter-spacing: 0.14em; 
 text-transform: uppercase; 
 color: var(--cadet); 
} 
 
.person p { 
 margin: 0; 
 font-size: 0.92rem; 
 line-height: 1.6; 
 color: #2a4454; 
} 
 
/* ── Waves / publication ────────────────────────────── */ 
 
.waves { 
 position: relative; 
 padding: 5.5rem 0 5rem; 
 background: 
 radial-gradient(ellipse at 80% 120%, rgba(0, 206, 209, 0.08), transparent 50%), 
 var(--paper); 
 overflow: hidden; 
} 
 
.waves::before { 
 content: ""; 
 position: absolute; 
 inset: -20% -10%; 
 background: 
 repeating-radial-gradient( 
 circle at 0 50%, 
 transparent 0 28px, 
 rgba(95, 158, 160, 0.12) 29px 30px 
 ); 
 opacity: 0.45; 
 pointer-events: none; 
} 
 
.waves h2 { 
 position: relative; 
 margin: 0 0 1.75rem; 
 font-size: clamp(2.2rem, 5vw, 3.4rem); 
 font-weight: 700; 
 letter-spacing: -0.03em; 
} 
 
.waves .eyebrow { 
 position: relative; 
} 
 
.pub-list { 
 position: relative; 
 margin: 0; 
 padding: 0; 
 list-style: none; 
 display: grid; 
 gap: 0.75rem; 
} 
 
.pub { 
 display: grid; 
 grid-template-columns: 3.6rem 1fr; 
 gap: 1rem 1.25rem; 
 align-items: start; 
 padding: 1.1rem 1.2rem; 
 background: rgba(255, 255, 255, 0.82); 
 border: 1px solid rgba(70, 130, 180, 0.14); 
 border-radius: 12px; 
} 
 
.pub__year { 
 font-size: 0.72rem; 
 font-weight: 600; 
 letter-spacing: 0.14em; 
 color: var(--cadet); 
 padding-top: 0.2rem; 
} 
 
.pub__title { 
 display: block; 
 margin: 0 0 0.35rem; 
 font-size: 1.02rem; 
 font-weight: 600; 
 line-height: 1.35; 
 letter-spacing: -0.02em; 
 color: var(--ink); 
 text-decoration: none; 
} 
 
.pub__title:hover { 
 color: var(--steel); 
} 
 
.pub__authors, 
.pub__venue { 
 margin: 0; 
 font-size: 0.82rem; 
 font-weight: 400; 
 letter-spacing: 0; 
 text-transform: none; 
 max-width: none; 
 line-height: 1.45; 
 color: #3d5a66; 
} 
 
.pub__authors { 
 margin-bottom: 0.28rem; 
} 
 
@media (max-width: 720px) { 
 .pub { 
 grid-template-columns: 1fr; 
 gap: 0.35rem; 
 } 
} 
 
/* ── Contact ────────────────────────────────────────── */ 
 
.contact { 
 padding: clamp(4.5rem, 10vw, 7rem) 0 3rem; 
 background: #e7f7f7; 
} 
 
.contact-mark { 
 display: flex; 
 align-items: center; 
 gap: 0.7rem; 
 margin-bottom: 1.4rem; 
 letter-spacing: 0.18em; 
 font-size: 0.78rem; 
 text-transform: uppercase; 
} 
 
.contact-mark img { 
 width: 1.8rem; 
 height: 1.8rem; 
 object-fit: contain; 
} 
 
.contact h2 { 
 max-width: 22ch; 
 margin: 0 0 2.5rem; 
 font-family: var(--display); 
 font-size: clamp(2.4rem, 5vw, 3.6rem); 
 font-weight: 400; 
 line-height: 1.1; 
 color: var(--cadet); 
} 
 
.contact-grid { 
 display: grid; 
 gap: 1.5rem; 
} 
 
@media (min-width: 720px) { 
 .contact-grid { 
 grid-template-columns: 1fr 1fr; 
 max-width: 36rem; 
 } 
} 
 
.contact h3 { 
 margin: 0 0 0.55rem; 
 font-size: 0.68rem; 
 letter-spacing: 0.2em; 
 text-transform: uppercase; 
 color: var(--cadet); 
} 
 
.contact p, 
.contact a { 
 margin: 0; 
 font-size: 0.95rem; 
 line-height: 1.6; 
} 
 
.contact a:hover { 
 color: var(--steel); 
} 
 
.contact p.contact-address { 
 margin-top: 0.7rem; 
 font-size: 0.82rem; 
 line-height: 1.55; 
 color: var(--cadet); 
} 
 
.legal { 
 margin: 3rem 0 0; 
 font-size: 0.75rem; 
 color: var(--cadet); 
} 
 
/* ── Spyndle demo ───────────────────────────────────── */ 
 
.slide--pipeline .band-lane { 
 border-color: rgba(16, 36, 51, 0.12); 
 background: rgba(255, 255, 255, 0.72); 
} 
 
.slide--pipeline .band-lane h3 { 
 margin: 0 0 0.65rem; 
 font-size: 1.15rem; 
 letter-spacing: -0.02em; 
} 
 
.slide--pipeline .band-lane p { 
 margin: 0; 
 font-size: 0.95rem; 
 line-height: 1.55; 
 color: #2a4454; 
} 
 
#hero .hero-split { 
 display: grid; 
 gap: 2.5rem; 
 align-items: center; 
 width: min(76rem, calc(100% - 4rem)); 
} 
 
@media (min-width: 960px) { 
 #hero .hero-split { 
 grid-template-columns: 1.15fr 0.85fr; 
 } 
} 
 
.shell-plate { 
 margin: 0; 
 background: #fff; 
 border-radius: 18px; 
 overflow: hidden; 
 box-shadow: 0 24px 60px rgba(8, 18, 28, 0.35); 
} 
 
.shell-plate video { 
 width: 100%; 
 display: block; 
} 
 
.method-stage { 
 display: grid; 
 gap: 1.75rem; 
 align-items: center; 
} 
 
@media (min-width: 980px) { 
 .method-stage { 
 grid-template-columns: 1fr; 
 } 
 
 .method-stage .band-grid { 
 grid-template-columns: repeat(3, 1fr); 
 } 
} 
 
.thread-plate { 
 margin: 0; 
 background: #fff; 
 border-radius: 16px; 
 overflow: hidden; 
 box-shadow: 0 16px 40px rgba(16, 36, 51, 0.08); 
} 
 
.thread-plate video { 
 width: 100%; 
 display: block; 
} 
 
.shell-split { 
 display: grid; 
 gap: 2.5rem; 
 align-items: start; 
} 
 
@media (min-width: 860px) { 
 .shell-split { 
 grid-template-columns: 0.9fr 1.1fr; 
 } 
} 
 
.shell-split img { 
 width: 100%; 
 height: auto; 
 aspect-ratio: 906 / 774; 
 align-self: start; 
 object-fit: contain; 
 border-radius: 18px; 
 background: #fff; 
} 
 
.shell-split h2 { 
 margin-bottom: 0.8rem; 
} 
 
.shell-split p:last-child { 
 margin: 0; 
 font-size: 1.05rem; 
 line-height: 1.75; 
 color: #2a4454; 
} 
 
.demo { 
 padding: clamp(4.5rem, 9vw, 7rem) 1.5rem; 
 background: var(--paper); 
} 
 
.demo__video { 
 width: min(65%, 52rem); 
 margin: 0 auto; 
 border-radius: 14px; 
 overflow: hidden; 
 background: var(--ink); 
 box-shadow: 0 22px 55px rgba(8, 18, 28, 0.18); 
} 
 
.demo__video video { 
 width: 100%; 
 display: block; 
} 
 
@media (max-width: 720px) { 
 .demo__video { 
 width: min(92%, 52rem); 
 } 
} 
 
/* ── 404 ────────────────────────────────────────────── */ 
 
.lost { 
 min-height: 100vh; 
 display: grid; 
 place-items: center; 
 padding: 6rem 1.5rem 3rem; 
 background: var(--ink); 
 color: var(--pale); 
 text-align: center; 
} 
 
.lost h1 { 
 font-family: var(--display); 
 font-size: clamp(3rem, 8vw, 6rem); 
 font-weight: 400; 
 margin: 0 0 0.5rem; 
} 
 
.lost a { 
 display: inline-block; 
 margin-top: 1.5rem; 
 letter-spacing: 0.22em; 
 text-transform: uppercase; 
 font-size: 0.72rem; 
 border-bottom: 1px solid currentColor; 
 padding-bottom: 0.2rem; 
} 
 
/* ── Mobile ─────────────────────────────────────────── */ 
 
@media (max-width: 900px) { 
 .progress { 
 display: none; 
 } 
} 
 
.shot-grid { 
 position: relative; 
 z-index: 1; 
 display: grid; 
 gap: 1.25rem; 
 margin-top: 0.5rem; 
} 
 
@media (min-width: 860px) { 
 .shot-grid { 
 grid-template-columns: repeat(3, 1fr); 
 } 

 .shot-grid--overlap { 
 align-items: center; 
 } 

 .shot-grid--overlap figure { 
 box-shadow: 0 18px 40px rgba(16, 36, 51, 0.12); 
 } 

 .shot-grid--overlap figure:nth-child(1) { 
 z-index: 1; 
 transform: translateY(1.6rem); 
 } 

 .shot-grid--overlap figure:nth-child(2) { 
 z-index: 3; 
 margin-inline: -2.4rem; 
 } 

 .shot-grid--overlap figure:nth-child(3) { 
 z-index: 2; 
 transform: translateY(2.4rem); 
 } 
} 
 
.shot-grid figure { 
 margin: 0; 
 background: #fff; 
 border-radius: 12px; 
 overflow: hidden; 
 border: 1px solid rgba(70, 130, 180, 0.14); 
} 
 
.shot-grid img { 
 width: 100%; 
 height: auto; 
 object-fit: contain; 
 background: #fff; 
} 
 
.shot-grid figcaption { 
 padding: 0.85rem 1rem 1rem; 
} 
 
.shot-grid figcaption strong { 
 display: block; 
 margin-bottom: 0.3rem; 
 font-size: 0.95rem; 
} 
 
.shot-grid figcaption p { 
 margin: 0; 
 font-size: 0.86rem; 
 line-height: 1.5; 
 color: #2a4454; 
} 
 
.thread-plate img { 
 width: 100%; 
 height: auto; 
 display: block; 
 object-fit: contain; 
} 
 
@media (max-width: 720px) { 
 .site-header { 
 padding: 1rem 1.1rem; 
 grid-template-columns: 1fr auto; 
 } 
 
 .slide__copy { 
 width: 100%; 
 padding: 7rem 1.15rem 3rem; 
 } 
 
 .slide__lede { 
 max-width: none; 
 font-size: 0.58rem; 
 letter-spacing: 0.08em; 
 line-height: 1.65; 
 } 
 
 .slide h1 { 
 font-size: clamp(2.6rem, 14vw, 4rem); 
 } 
 
 .person { 
 grid-template-columns: 4.6rem 1fr; 
 } 
 
 .person img { 
 width: 4.6rem; 
 height: 4.6rem; 
 } 
 
 .slide__copy--pipeline { 
 width: 100%; 
 padding: 6.5rem 1rem 2rem; 
 } 
 
 .pipeline__axis { 
 display: none; 
 } 
 
 .pipeline__row { 
 grid-template-columns: 1fr 1fr; 
 border-radius: 1rem; 
 min-height: 0; 
 padding: 0.7rem 0.9rem; 
 } 
 
 .pipeline__track { 
 grid-column: 1 / -1; 
 } 
}

body.menu-open .site-header,
body.menu-open .site-header.is-light {
  color: var(--white);
  background: transparent;
  backdrop-filter: none;
}

#why .shell-split img {
  aspect-ratio: 1917 / 1077;
}