:root{--bg:#f4f3ed;--ink:#253c34;--muted:#607568;--accent:#326953;--line:#344c342b}body{background:var(--bg);color:var(--ink)}html{scroll-padding-top:115px}.white-glass{background:linear-gradient(120deg,#ffffffdf,#ffffffe0 30%,#ffffff9c);border:1px solid #ffffffdd;box-shadow:inset 0 1px 0 #fff,0 5px 20px #263f2910;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#2a3d35;border-radius:12px}.curve-header{position:absolute;z-index:10;top:34px;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between;gap:25px}.curve-header nav{display:flex;align-items:center;gap:6px;padding:5px}.curve-header nav a{font-size:12px;padding:14px 17px;text-transform:uppercase;letter-spacing:.025em}.curve-header nav .nav-cta{background:#263d34;color:#fff;border-radius:9px}.curve-header nav a:hover{opacity:.75}.expansion-track{height:260svh;position:relative}.expansion-stage{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden}.sage-backdrop{position:absolute;inset:10px;border-radius:28px;background:radial-gradient(ellipse at 95% 15%,#dfe5d7 0,transparent 50%),linear-gradient(118deg,#244e3e,#73947c 55%,#d2d0bb);overflow:hidden}.curve-copy{position:absolute;top:clamp(125px,18vh,190px);left:8%;right:8%;color:#fff}.curve-copy .eyebrow{font-size:12px;letter-spacing:.12em}.curve-copy h1{font-size:clamp(42px,4.5vw,72px);line-height:1.05;letter-spacing:-.055em;margin:20px 0}.curve-copy h1 em{font-style:normal;color:#e7edde}.curve-copy>p:last-child{position:absolute;right:0;bottom:5px;color:#eef0e9;font-size:16px;line-height:1.7}.film-card{position:absolute;left:8%;right:8%;top:49%;bottom:22px;overflow:hidden;border-radius:26px;background:#10241e;box-shadow:0 25px 70px #19342622;will-change:inset,border-radius}.film-card>img,.film-card>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 52%}.film-card>video{opacity:0}.film-card>video.ready{opacity:1}.film-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0317108c,transparent 30%,transparent 80%,#03171033);pointer-events:none}.film-top,.film-bottom{position:absolute;left:25px;right:25px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:15px}.film-top{top:22px}.film-badge{padding:11px 16px;font-size:12px}.film-bottom{bottom:22px;color:white;font-size:14px}.film-bottom button{padding:12px 18px;font-size:12px}.film-bottom span span{padding-left:12px}.film-progress{position:absolute;bottom:0;height:3px;background:#ffffff22;left:0;right:0;z-index:3}.film-progress span{display:block;height:100%;width:0;background:#dbe8d2}.expansion-track.static-motion{height:100svh;min-height:680px}.static-motion .expansion-stage{position:relative}.section{margin:12px 10px;border-radius:28px;padding:85px 7%}.mission{background:#e3e9dc;min-height:560px}.mission h2{font-size:clamp(38px,5vw,74px)}.mission h2 span{color:#65876b}.placeholder-tag{color:#64745f!important;border-color:#63795b55;background:#ffffff25}.evidence{background:#f0eee5}.challenge{background:#b8c8ae;color:#203c2d}.intro{background:#f9f8f3}.intro-grid .lead{color:#344e3d}.intro-grid p{color:#637466}.technology{background:#e4e8dc}.technology-title h2 span{color:#75856c}.technology-title p,.focus-grid p{color:#60715f}.product-image{border-radius:24px}.product-image figcaption{color:white}.product-image .dot{background:#d4dfc6}.platform{background:#cdd8c2}.platform-visual{border-radius:24px}.chapter>p:not(.eyebrow){color:#566a54}.chapter-position{color:white}.chapter-position span{color:#cde1c4}.story{background:#e8e6da}.story>div>p:not(.eyebrow),.partners>p:not(.eyebrow){color:#60715f}.portrait-placeholder{border-color:#7c8e7266;color:#687e5f;background:radial-gradient(ellipse,#adbda340,transparent 70%);border-radius:25px}.partners{background:#f8f7f0}.partner-grid>div{border-color:#78916b55;color:#76826c;background:#eeeee5;border-radius:18px}.contact{background:#335740;color:#f6f7ee}.contact .eyebrow,.contact .dot{color:#dfe9d4}.contact-bottom p{color:#d3deca}.contact .glass{background:#ffffffd9;color:#2c4935;border-color:white;box-shadow:inset 0 1px 0 white}.contact .button:hover{background:white}.contact .dot{background:#dce7cb}.focus-grid article,.metric-grid article{border-color:#66745b33}.small-label{color:#66795f}.metric-grid article>span{color:#6b8560}.metric-grid p{color:#65745b}footer{padding:40px 0;margin:0 7%}footer .brand{background:#34543f;border-radius:12px;padding:10px 15px}footer p{color:#697561}.glass{backdrop-filter:blur(25px)}.chapter .eyebrow{font-size:12px}.chapter>p:not(.eyebrow),.focus-grid p,.intro-grid p{font-size:16px}.number,.eyebrow,.small-label{font-size:12px}.placeholder-tag{font-size:12px!important}.text-link{font-size:14px}
@media(max-width:900px){.curve-copy>p:last-child{position:static;font-size:15px}.curve-copy{top:130px}.curve-copy h1{font-size:54px}.film-card{top:53%}.curve-header{left:6%;right:6%}.curve-header nav a{padding:12px 10px;font-size:11px}.curve-header .brand img{width:180px}.section{padding:65px 6%}.curve-copy .eyebrow{font-size:11px}}
@media(max-width:600px){.curve-header{top:27px;left:7%;right:7%;gap:12px}.curve-header .brand img{width:146px}.curve-header nav a{display:none}.curve-header nav .nav-cta{display:block;font-size:10px;padding:11px 12px}.curve-header nav{border-radius:11px}.sage-backdrop{inset:8px;border-radius:23px}.curve-copy{top:128px;left:8%;right:8%}.curve-copy h1{font-size:43px;line-height:1.07;margin:22px 0}.curve-copy>p:last-child{font-size:14px;line-height:1.6}.curve-copy .eyebrow{font-size:10px;letter-spacing:.06em}.expansion-stage{min-height:740px}.expansion-track.static-motion{min-height:740px}.film-card{top:51%;left:6%;right:6%;bottom:22px;border-radius:22px}.film-top,.film-bottom{left:16px;right:16px}.film-top{top:16px}.film-top .film-badge:last-child{display:none}.film-badge{font-size:11px;padding:9px 12px}.film-bottom{align-items:flex-start;flex-direction:column;gap:12px;bottom:22px;font-size:13px}.film-bottom button{font-size:11px;padding:9px 12px}.film-card>img,.film-card>video{object-position:58% center}.section{margin:8px;border-radius:23px;padding:55px 7%}.mission{min-height:440px}.mission h2{font-size:37px}.chapter>p:not(.eyebrow){font-size:15px}.platform-visual{top:15px}.chapter{padding-top:235px}.partner-grid>div{font-size:12px}.contact h2{font-size:45px}.section-kicker .placeholder-tag{font-size:11px!important}.section-kicker{align-items:flex-start}.contact .eyebrow{font-size:11px}.expansion-track{height:250svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A/B comparison: active motion in both options. */
.option-switch{position:absolute;z-index:5;top:115px;left:8%;display:flex;gap:4px;padding:5px;border-radius:13px}.option-switch button{background:transparent;border:0;border-radius:9px;padding:10px 15px;color:#35513d;font-size:13px;display:flex;align-items:center;gap:9px}.option-switch button span{font-size:11px;opacity:.7}.option-switch button[aria-pressed=true]{background:#34543e;color:#fff}.curve-copy{top:clamp(190px,23vh,240px)}.curve-copy h1{font-size:clamp(40px,4.2vw,68px)}.playback-control{width:44px;height:44px;display:grid;place-items:center;padding:0!important;font-size:24px!important;border-radius:50%;flex-shrink:0}.film-bottom .playback-control{margin-left:auto}.film-progress{height:4px}.option-a.expansion-track{height:100svh;min-height:760px}.option-a .expansion-stage{position:relative;height:100%;min-height:760px}.option-a .curve-copy{left:7%;right:auto;top:36%;width:36%}.option-a .curve-copy h1{font-size:clamp(40px,4.4vw,72px);line-height:1.09}.option-a .curve-copy>p:last-child{position:static;font-size:16px;line-height:1.7;margin-top:30px}.option-a .film-card{left:47%;right:3%;top:23%;bottom:7%;border-radius:26px}.option-a .film-card>video,.option-a .film-card>img{object-position:56% center}.option-a .film-top .film-badge:last-child{display:none}.option-a .film-bottom{flex-direction:row;align-items:center}.option-a .film-card .film-progress{bottom:16px;left:25px;right:85px;border-radius:4px;overflow:hidden}.option-a .film-bottom{bottom:30px}.option-a .curve-copy .eyebrow{line-height:1.7;max-width:300px}
@media(max-width:1000px){.option-switch{top:112px}.option-a .curve-copy h1{font-size:44px}.option-a .curve-copy{left:6%;width:36%}.option-a .curve-copy>p:last-child{font-size:14px}.option-a .film-card{left:45%;right:3%;top:25%;bottom:9%}.curve-copy>p:last-child{margin:12px 0}.curve-copy h1{font-size:45px}.curve-copy{top:185px}.film-card{top:55%}}
@media(max-width:600px){.option-switch{top:100px;left:7%;right:7%;justify-content:center}.option-switch button{font-size:12px;padding:9px 12px;gap:6px}.option-switch button span{font-size:10px}.curve-copy{top:178px}.curve-copy h1{font-size:36px;margin:15px 0}.curve-copy .eyebrow{font-size:9px}.curve-copy>p:last-child{font-size:13px}.expansion-stage{min-height:800px}.film-card{top:53%}.option-a.expansion-track,.option-a .expansion-stage{min-height:870px}.option-a .curve-copy{top:175px;left:8%;width:84%}.option-a .curve-copy h1{font-size:37px;max-width:330px}.option-a .curve-copy>p:last-child{font-size:14px;margin-top:18px}.option-a .film-card{left:6%;right:6%;top:48%;bottom:23px}.film-bottom .playback-control{width:40px;height:40px}.option-a .film-bottom{font-size:12px}.option-a .film-top .film-badge{font-size:10px}}
/* Match the header's top inset at the left, with a slightly wider right gutter.
   Option A preserves the complete original 16:9 composition. */
.curve-header{left:34px;right:44px}
.option-switch{left:34px}
.option-a .expansion-stage{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:28px;align-items:center;padding:185px 44px 70px 34px}
.option-a .curve-copy{position:relative;left:auto;right:auto;top:auto;width:auto;z-index:1}
.option-a .curve-copy h1{font-size:clamp(38px,4vw,68px);margin-top:0}
.option-a .film-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;aspect-ratio:16/9;align-self:center}
.option-a .film-card>video,.option-a .film-card>img{object-fit:contain;object-position:center}
@media(max-width:1000px) and (min-width:701px){
 .option-a .expansion-stage{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:22px}
 .option-a .curve-copy h1{font-size:clamp(32px,4.2vw,42px)}
 .option-a .film-badge{font-size:10px;padding:8px 10px}
 .option-a .film-top{top:14px;left:15px;right:15px}
}
@media(max-width:700px){
 .curve-header{left:27px;right:32px}
 .curve-header .brand img{width:146px}
 .curve-header nav a{display:none}
 .curve-header nav .nav-cta{display:block;font-size:10px;padding:11px 12px}
 .option-switch{left:27px;right:32px;justify-content:center}
 .option-a.expansion-track{height:auto;min-height:100svh}
 .option-a .expansion-stage{grid-template-columns:minmax(0,1fr);gap:35px;padding:180px 27px 50px;min-height:100svh;height:auto;align-content:center}
 .option-a .curve-copy{top:auto;left:auto;width:auto}
 .option-a .curve-copy h1{font-size:clamp(35px,7vw,45px);max-width:none}
 .option-a .film-card{left:auto;right:auto;top:auto;bottom:auto;border-radius:20px}
 .option-a .film-top{top:12px;left:12px;right:12px}
 .option-a .film-badge{font-size:10px;padding:7px 9px}
 .option-a .film-bottom{left:14px;right:14px;bottom:22px}
 .option-a .film-bottom .playback-control{width:34px;height:34px;font-size:20px!important}
 .option-a .film-card .film-progress{left:14px;right:60px;bottom:12px}
}
/* Consistent corner family; inset navigation corners follow its 5px padding. */
:root{--panel-radius:24px;--nav-radius:16px;--nav-button-radius:11px}
.sage-backdrop,.section,.option-a .film-card{border-radius:var(--panel-radius)}
.curve-header nav{border-radius:var(--nav-radius);padding:5px}
.curve-header nav .nav-cta{border-radius:var(--nav-button-radius)}
.option-a .expansion-stage{padding-top:135px}
.option-a .film-card .film-progress>span{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform}
@media(max-width:700px){.option-a .expansion-stage{padding-top:135px}}
.curve-header nav .layout-link{display:block;text-transform:none;font-size:14px;padding:12px;border-radius:11px}
.curve-header nav .layout-link[aria-current=page]{background:#34543e;color:#fff}
.film-card .film-progress>span{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform}
@media(max-width:700px){
 .curve-header{gap:10px}
 .curve-header nav{gap:1px}
 .curve-header nav .layout-link{display:block;font-size:12px;padding:10px 8px}
 .curve-header .brand img{width:clamp(105px,27vw,146px)}
 .curve-header nav .nav-cta{padding:11px 9px;font-size:9px}
}
/* Equal distances from the panel edge, with no vertical centering offset. */
:root{--hero-edge:10px;--header-inset:24px}
.curve-header{top:calc(var(--hero-edge) + var(--header-inset));left:calc(var(--hero-edge) + var(--header-inset));right:calc(var(--hero-edge) + var(--header-inset));align-items:flex-start}
.curve-header .brand{display:block;padding:0;margin:0;flex-shrink:0}
.curve-header .brand img{display:block;margin:0}
@media(max-width:600px){:root{--hero-edge:8px;--header-inset:20px}}
/* Preserve the source frame in B rather than enlarging and cropping to cover. */
.expansion-track:not(.option-a) .film-card>video,
.expansion-track:not(.option-a) .film-card>img{object-fit:contain;object-position:center}
/* C starts at A's exact grid position, then grows across the copy. */
.film-slot{display:none}
.option-c.expansion-track{height:270svh;min-height:0}
.option-c .expansion-stage{position:sticky;top:0;height:100svh;min-height:760px}
.option-c .film-slot{display:block;width:100%;aspect-ratio:16/9;align-self:center;pointer-events:none}
.option-c .film-card{position:absolute;width:auto;height:auto;aspect-ratio:auto;z-index:3}
.option-c .film-card>video,.option-c .film-card>img{object-fit:contain;object-position:center}
.film-controls{display:flex;gap:9px;align-items:center;margin-left:auto}
.film-bottom .film-controls .playback-control{margin:0;background:linear-gradient(140deg,#ffffff70,#ffffff24);border:1px solid #ffffff80;color:white;box-shadow:inset 0 1px 0 #ffffff80,0 4px 16px #0002;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.film-bottom .film-controls .playback-control:hover{background:#ffffff65}
.option-a .film-card .film-progress{right:132px}
@media(max-width:700px){
 .option-c .expansion-stage{height:100svh;min-height:700px;align-content:center}
 .option-c.expansion-track{height:280svh;min-height:0}
 .option-a .film-card .film-progress{right:108px}
}
.playback-control .control-icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.playback-control .icon-play{display:none}
.playback-control[data-state="play"] .icon-pause{display:none}
.playback-control[data-state="play"] .icon-play{display:block}
/* Absolute video in the C grid must retain its measured size. */
.option-c .film-card{align-self:stretch;justify-self:stretch;min-width:1px;min-height:1px}
.playback-control .icon-replay{display:none}
.playback-control[data-state="replay"] .icon-pause,
.playback-control[data-state="replay"] .icon-play{display:none}
.playback-control[data-state="replay"] .icon-replay{display:block}
.option-a .film-card .film-progress{right:85px}
@media(max-width:700px){.option-a .film-card .film-progress{right:60px}}
/* A single frosted media control, with a consistent 48px target. */
.film-bottom .film-controls .playback-control{
 width:48px;height:48px;min-width:48px;min-height:48px;padding:0!important;
 display:grid;place-items:center;border-radius:50%;
 background:rgba(248,251,248,.82);color:#243d34;border:1px solid rgba(255,255,255,.75);
 box-shadow:0 3px 12px rgba(0,20,12,.13),inset 0 1px 0 rgba(255,255,255,.9);
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 transition:background .16s,box-shadow .16s,transform .16s;
}
.film-bottom .film-controls .playback-control:hover{background:rgba(255,255,255,.96);box-shadow:0 4px 15px #00140c25}
.film-bottom .film-controls .playback-control:active{transform:scale(.95)}
.film-bottom .film-controls .playback-control:focus-visible{outline:2px solid white;outline-offset:4px}
.playback-control .control-icon{width:20px;height:20px;stroke-width:1.9}
.playback-control .icon-pause{fill:currentColor;stroke:none}
.playback-control .icon-play{fill:currentColor;stroke:none}
.option-a .film-card .film-progress{right:88px}
@media(max-width:700px){.option-a .film-card .film-progress{right:76px}}
/* Center the progress rail on the media button; cue belongs to the green panel. */
.film-card .film-bottom{bottom:16px;left:24px;right:24px;min-height:48px;flex-direction:row;align-items:center}
.film-card .film-controls{margin-left:auto}
.option-a .film-card .film-progress,.film-card .film-progress{bottom:39px;left:24px;right:88px;height:3px;border-radius:3px;overflow:hidden}
.outside-scroll-cue{position:absolute;bottom:27px;left:50%;transform:translate3d(-50%,0,0);z-index:2;color:#f4f7ef;font-size:13px;letter-spacing:.025em;white-space:nowrap}
@media(max-width:700px){
 .film-card .film-bottom{bottom:12px;left:16px;right:16px}
 .option-a .film-card .film-progress,.film-card .film-progress{bottom:35px;left:16px;right:80px}
 .outside-scroll-cue{bottom:22px;font-size:12px}
 .option-a .expansion-stage{padding-bottom:75px}
}
/* C fills the expanding rectangle edge to edge, including the final viewport. */
.option-c .film-card>video,.option-c .film-card>img{object-fit:cover;object-position:center}
/* Softer panel geometry and an icon-only media control. */
:root{--panel-radius:32px;--nav-radius:22px;--nav-button-radius:17px}
.sage-backdrop,.section,.option-a .film-card,.film-card{border-radius:var(--panel-radius)}
.curve-header nav{border-radius:var(--nav-radius)}
.curve-header nav .nav-cta,.curve-header nav .layout-link{border-radius:var(--nav-button-radius)}
.product-image,.platform-visual,.portrait-placeholder{border-radius:28px}
.partner-grid>div,.button,.white-glass.film-badge{border-radius:18px}
.film-card{transform:translateZ(0);backface-visibility:hidden;isolation:isolate;clip-path:inset(0 round var(--panel-radius))}
.film-bottom .film-controls .playback-control,
.film-bottom .film-controls .playback-control:hover{
 background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
 color:rgba(255,255,255,.68);border-radius:10px;transition:color .18s ease,transform .18s ease;
}
.film-bottom .film-controls .playback-control:hover{color:rgba(255,255,255,.95)}
.film-bottom .film-controls .playback-control:active{transform:scale(.92)}
.playback-control .control-icon{width:21px;height:21px;filter:drop-shadow(0 1px 3px #00160c55)}
/* Continuous, superelliptic corners throughout the curved design. */
.sage-backdrop,.section,.film-card,.curve-header nav,.curve-header nav a,
.product-image,.platform-visual,.portrait-placeholder,.partner-grid>div,
.button,.film-badge,.placeholder-tag,.chapter-position,footer .brand,
.playback-control{corner-shape:superellipse(2)}
.film-card{clip-path:none}
/* Shorter pinned travel and a brief release after full expansion. */
.option-c.expansion-track{height:190svh}
@media(max-width:700px){.option-c.expansion-track{height:200svh}}
/* A little breathing room before release, with quiet translucent media chrome. */
.option-c.expansion-track{height:200svh}
@media(max-width:700px){.option-c.expansion-track{height:210svh}}
.option-a .film-card .film-progress,.film-card .film-progress{
 height:1px;bottom:40px;background:rgba(255,255,255,.10);
}
.film-card .film-progress>span{background:rgba(249,252,247,.42)}
.film-bottom .film-controls .playback-control{color:rgba(250,253,249,.43)}
.film-bottom .film-controls .playback-control:hover{color:rgba(255,255,255,.72)}
.playback-control .control-icon{filter:none;stroke-width:1.6}
.outside-scroll-cue{color:rgba(247,251,243,.60)}
@media(max-width:700px){.option-a .film-card .film-progress,.film-card .film-progress{bottom:36px}}
/* Reveal the media controls together only when interacting with their area. */
.film-card .film-controls,.film-card .film-progress{transition:opacity .22s ease}
@media(hover:hover) and (pointer:fine){
 .film-card .film-controls,.film-card .film-progress{opacity:.08}
 .film-card:has(.film-controls:hover) .film-controls,
 .film-card:has(.film-controls:hover) .film-progress,
 .film-card:has(.film-progress:hover) .film-controls,
 .film-card:has(.film-progress:hover) .film-progress,
 .film-card:has(.playback-control:focus-visible) .film-controls,
 .film-card:has(.playback-control:focus-visible) .film-progress{opacity:1}
 .film-card .film-progress{overflow:visible}
 .film-card .film-progress::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
}
/* Lower the aligned media controls without reducing the click target. */
.film-card .film-bottom{bottom:6px}
.option-a .film-card .film-progress,.film-card .film-progress{bottom:30px}
@media(max-width:700px){
 .film-card .film-bottom{bottom:4px}
 .option-a .film-card .film-progress,.film-card .film-progress{bottom:28px}
}
/* Thin visual rail, generous invisible seeking area, balanced edge insets. */
.film-card .film-bottom{bottom:0;left:20px;right:10px}
.option-a .film-card .film-progress,.film-card .film-progress{left:20px;right:72px;bottom:24px;height:1.5px;overflow:visible}
.playback-control .control-icon{width:23px;height:23px}
.film-card .film-progress::before{display:none}
#video-seek{position:absolute;left:0;top:-27px;width:100%;height:56px;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:none}
.film-card:has(#video-seek:focus-visible) .film-progress,
.film-card:has(#video-seek:focus-visible) .film-controls{opacity:1}
.film-card:has(#video-seek:focus-visible) .film-progress{outline:2px solid #ffffff90;outline-offset:5px}
@media(max-width:700px){
 .film-card .film-bottom{bottom:0;left:18px;right:8px}
 .option-a .film-card .film-progress,.film-card .film-progress{left:18px;right:70px;bottom:24px}
}
/* Keep seeking invisible: no resize cursor or focus frame around the rail. */
#video-seek{cursor:default;outline:none;border:0;border-radius:0;box-shadow:none;appearance:none;-webkit-appearance:none;background:transparent}
#video-seek::-webkit-slider-runnable-track{background:transparent;border:0;box-shadow:none}
#video-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:transparent;border:0;box-shadow:none}
#video-seek::-moz-range-track,#video-seek::-moz-range-thumb{background:transparent;border:0;box-shadow:none}
.film-card:has(#video-seek:focus-visible) .film-progress{outline:none;box-shadow:none}
.film-card:has(#video-seek:focus-visible) .film-progress>span{background:rgba(249,252,247,.65)}
/* Full-screen video keeps an obvious exit and playback affordance. */
.is-expanded .outside-scroll-cue{z-index:6;bottom:62px;color:rgba(255,255,255,.8);text-shadow:0 1px 8px #0009;padding:12px 20px}
.is-expanded .film-card .film-controls{opacity:1}
.is-expanded .film-bottom .film-controls .playback-control{color:rgba(255,255,255,.7)}
.is-expanded .film-bottom .film-controls .playback-control:hover{color:white}
/* Full-screen cue below the rail, with the playback icon slightly raised. */
.is-expanded .outside-scroll-cue{bottom:3px;padding:3px 20px;font-size:12px;line-height:16px}
.is-expanded .film-card .film-bottom{bottom:5px}
/* Leave a clear gap between the invisible seek target and the idle cue. */
.outside-scroll-cue{transition:opacity .5s ease}
.cue-overlay .outside-scroll-cue{z-index:6;bottom:14px;padding:3px 20px;font-size:12px;line-height:16px;color:rgba(255,255,255,.8);text-shadow:0 1px 8px #0009}
.cue-overlay .film-card .film-progress{bottom:64px}
.cue-overlay .film-card .film-bottom{bottom:40px}
/* The idle prompt stays above the moving card throughout the expansion. */
.outside-scroll-cue{z-index:6}
/* Live local palette exploration. */
.sage-backdrop{background:var(--hero-gradient,#000)}
.curve-header nav.white-glass{background:var(--studio-glass,#ffffffe0);backdrop-filter:blur(var(--studio-blur,24px));-webkit-backdrop-filter:blur(var(--studio-blur,24px))}
.film-card{box-shadow:0 25px 70px var(--studio-shadow,#19342622)}
.curve-header{position:fixed;z-index:30;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.curve-header.header-hidden{transform:translateY(calc(-100% - 50px));opacity:0;pointer-events:none}
.curve-header.header-returned .brand{background:var(--studio-logo-bg,#244e3ef0);padding:11px 16px;border-radius:20px;corner-shape:superellipse(2);box-shadow:0 4px 20px #12251b15}
.style-studio{position:fixed;z-index:60;bottom:18px;left:18px;width:308px;color:#263a32;background:#fafcf7f5;border:1px solid #ffffffcc;border-radius:22px;corner-shape:superellipse(2);box-shadow:0 10px 40px #001b2630;font-size:12px;backdrop-filter:blur(20px);max-height:calc(100svh - 36px);overflow:auto}
.style-studio:not([open]){width:150px}
.style-studio summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:16px 18px;font-size:14px;font-weight:500}.style-studio summary::-webkit-details-marker{display:none}.style-studio[open] summary span{transform:rotate(180deg)}
.studio-body{padding:0 18px 18px}.studio-body>p{display:flex;justify-content:space-between;margin:0 0 12px;color:#627369}.studio-body>p span{color:#273f32}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.palette-grid button{border:1px solid transparent;background:transparent;padding:3px;border-radius:9px;color:#4b5f52;font-size:9px;line-height:1.3;min-width:0}.palette-grid button>span{display:block;height:27px;border-radius:6px;margin-bottom:4px}.palette-grid button[aria-pressed=true]{border-color:#3c7258;background:#e5ede2}.color-controls{display:flex;gap:12px;margin:16px 0}.color-controls label{display:flex;align-items:center;gap:6px;flex:1}.color-controls input{width:28px;height:26px;padding:0;border:0;background:none;cursor:pointer}.studio-slider{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:10px}.studio-slider output{color:#69796c;font-variant-numeric:tabular-nums}.studio-slider input{grid-column:1/-1;width:100%;margin:0;accent-color:#46765c;cursor:pointer}.studio-body #reset-style{margin-top:15px;border:1px solid #b8c8b8;background:#eaf0e6;border-radius:9px;padding:8px 12px;font-size:12px}.studio-body small{display:block;color:#7a877c;font-size:10px;margin-top:10px}
@media(max-width:700px){.style-studio{left:10px;bottom:10px;width:min(308px,calc(100vw - 20px))}.curve-header.header-returned .brand{padding:9px 10px}}
.studio-actions{display:flex;gap:10px;margin-bottom:15px}.studio-actions a{font-size:12px;border:1px solid #b9c7b5;border-radius:9px;padding:7px 10px;background:#eef3e9}.studio-actions a:hover{background:#dfead7}.studio-only{min-height:100svh;background:#e8eee4;padding:16px;display:flex;justify-content:center;align-items:flex-start}.studio-only .style-studio{position:relative;left:auto;bottom:auto;width:100%;max-width:380px;max-height:none;margin:0;overflow:visible}.studio-only .style-studio summary{pointer-events:none;font-size:19px;padding:20px}.studio-only .style-studio summary span{display:none}.studio-only .studio-sync-note{display:block;line-height:1.6;font-size:12px;margin-bottom:16px}.studio-only .studio-body{padding:0 20px 20px}.studio-only .studio-slider{margin-top:15px}

/* Keep the edge neutral: no colored shadow halo or tinted video overlay. */
.film-card{isolation:isolate;box-shadow:0 14px 32px -14px var(--studio-shadow,rgba(0,0,0,.13))}
.film-card::after{display:none}
.settings-readout{margin-top:16px;border-top:1px solid #cdd7c9;padding-top:8px}
.style-studio .settings-readout summary{padding:8px 0;font-size:12px;pointer-events:auto;cursor:pointer}
.settings-readout pre{font-size:11px;line-height:1.6;white-space:pre-wrap;user-select:text;background:#e9eee5;border-radius:10px;padding:10px;max-height:250px;overflow:auto}
.export-actions{display:flex;gap:8px;margin-top:10px}
.export-actions button{border:1px solid #b8c8b8;background:#eaf0e6;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer}
#export-status{display:block;font-size:11px;margin-top:8px;color:#46765c}

/* Top branding follows hero scroll without fading; returns at the mission. */
.curve-header{opacity:1;transition:none;will-change:transform}
.curve-header.header-returned{transition:transform .45s cubic-bezier(.22,1,.36,1)}

/* Let native top-edge overscroll carry the branding with the hero. */
.curve-header{position:absolute;transform:none;transition:none;will-change:auto}
.curve-header.header-returned{position:fixed;animation:header-return .45s cubic-bezier(.22,1,.36,1) both}
@keyframes header-return{from{transform:translate3d(0,calc(-100% - 50px),0)}to{transform:translate3d(0,0,0)}}

/* Bring both sides back together as the mission reaches the top. */
.curve-header.header-returned{animation:none;transition:none}
.curve-header.header-returned .brand{position:relative;isolation:isolate;padding:12px 17px;border:1px solid #ffffffdd;border-radius:22px;background:var(--studio-glass,#ffffffe0);backdrop-filter:blur(var(--studio-blur,24px));-webkit-backdrop-filter:blur(var(--studio-blur,24px));box-shadow:inset 0 1px 0 #fff,0 5px 20px #263f2910}
.curve-header.header-returned .brand::before{content:"";position:absolute;z-index:-1;inset:5px;background:var(--studio-logo-bg,#244e3ef0);border-radius:17px;corner-shape:superellipse(2)}
.curve-header.header-returned .brand img{opacity:.92}
@media(max-width:700px){.curve-header.header-returned .brand{padding:11px 12px}}

.mission-header[hidden]{display:none}

/* The returned bar uses the blue artwork directly on a quiet white glass surface. */
.curve-header.header-returned .brand::before{display:none}
.curve-header.header-returned .brand img{opacity:1}
.curve-header.header-returned .brand,.curve-header nav.white-glass{background:var(--studio-glass,rgba(255,255,255,.88));border:1px solid rgba(255,255,255,.65);box-shadow:0 4px 16px rgba(20,40,35,.055);backdrop-filter:blur(var(--studio-blur,24px));-webkit-backdrop-filter:blur(var(--studio-blur,24px))}

/* Keep the returning blue logo unboxed. */
.curve-header.header-returned .brand{background:transparent;border:0;padding:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.curve-header.header-returned .brand::before{display:none}

/* Shared live gutters for branding, navigation, and the initial hero layout. */
.curve-header{left:min(var(--layout-left,50px),10vw);right:min(var(--layout-right,50px),10vw)}
.option-a .expansion-stage{padding-left:min(var(--layout-left,50px),10vw);padding-right:min(var(--layout-right,50px),10vw)}

/* Match the logo card to the menu height without enlarging either bar. */
.curve-header.header-returned .brand{height:var(--returned-header-height,58px);box-sizing:border-box;display:flex;align-items:center;padding:5px 14px;border:1px solid rgba(255,255,255,.65);border-radius:22px;corner-shape:superellipse(2);background:var(--studio-glass,rgba(255,255,255,.88));box-shadow:0 4px 16px rgba(20,40,35,.055);backdrop-filter:blur(var(--studio-blur,24px));-webkit-backdrop-filter:blur(var(--studio-blur,24px))}
.curve-header.header-returned .brand img{max-height:100%;width:auto;max-width:218px;object-fit:contain}
@media(max-width:700px){.curve-header.header-returned .brand{padding:5px 10px}.curve-header.header-returned .brand img{max-width:clamp(105px,27vw,146px)}}

.mission-header:not([hidden]){animation:mission-header-fade .4s ease-out}
@keyframes mission-header-fade{from{opacity:0}to{opacity:1}}

/* Fit the long hero title to its column while keeping the supporting copy readable. */
.option-a .curve-copy{container-type:inline-size}
.option-a .curve-copy h1{font-size:clamp(20px,8.2cqw,52px);white-space:nowrap;letter-spacing:-.045em;line-height:1.12}
.option-a .curve-copy>p:last-child{font-size:clamp(17px,4.4cqw,23px);line-height:1.55;margin-top:24px}
@media(max-width:700px){
 .option-a .curve-copy h1{font-size:clamp(18px,8.2cqw,42px)}
 .option-a .curve-copy>p:last-child{font-size:clamp(17px,4.8cqw,21px);margin-top:20px}
}
/* Keep the original glass, with a soft blur extending beneath each card. */
.mission-header.header-returned .brand,.mission-header.header-returned nav.white-glass{
 position:relative;isolation:isolate;
 background:var(--studio-glass,rgba(255,255,255,.88));
 backdrop-filter:blur(var(--studio-blur,24px));
 -webkit-backdrop-filter:blur(var(--studio-blur,24px));
}
.mission-header.header-returned .brand::after,.mission-header.header-returned nav.white-glass::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 left:-10px;right:-10px;top:100%;height:30px;
 background:rgba(255,255,255,.06);
 backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
 border-radius:0 0 26px 26px;
 mask-image:linear-gradient(to bottom,#000,transparent);
 -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
}
/* Atmospheric studies stay behind content and do not capture pointer events. */
.background-study{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.background-controls{border:1px solid #cad6c5;border-radius:12px;padding:12px;margin:16px 0}
.background-controls legend{font-size:12px;padding:0 5px;color:#425e4d}
.background-controls>label{font-size:11px;color:#5d7062}
.background-controls select{display:block;width:100%;padding:9px 8px;margin-top:5px;border:1px solid #c2cfbd;border-radius:8px;background:#f6f8f2;color:#294235;font:inherit}
.background-controls>p{font-size:11px;line-height:1.5;color:#6a7e6e;margin:9px 0}
/* A fine one-revolution indicator only during the hold before automatic replay. */
.playback-control{position:relative}
.playback-control .replay-countdown{position:absolute;inset:4px;width:40px;height:40px;display:none;fill:none;pointer-events:none;transform:rotate(-90deg)}
.replay-countdown circle{stroke:rgba(255,255,255,.65);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.playback-control.is-counting .replay-countdown{display:block}
.film-card .film-bottom:has(.is-counting){opacity:.7}
.film-card .playback-control.is-counting{opacity:.8}

/* Generous invisible seeking area; show controls throughout the replay countdown. */
#video-seek{top:-35px;height:72px;z-index:8;cursor:pointer}
.film-card .film-controls:has(.is-counting){opacity:.85}
.playback-control:not(.is-counting) .replay-countdown{display:none!important}

/* Countdown remains legible independently of hover or the idle controls. */
.film-card .film-bottom:has(.is-counting),
.film-card .film-controls:has(.is-counting),
.film-card .film-controls .playback-control.is-counting{opacity:1!important}
.playback-control.is-counting .replay-countdown{display:block;opacity:1;filter:none}
.replay-countdown circle{stroke:rgba(255,255,255,.95);stroke-width:1.1}
/* Optical study: clear video, a single hairline edge, and no surface tint. */
.film-card::before,.film-card::after{display:none!important}
.curve-header nav::before,.mission-header .brand::before{display:none!important}
.curve-header nav.white-glass,.curve-header.header-returned .brand{
 border:0;box-shadow:0 4px 14px rgba(16,36,30,.045);
 border-radius:22px;corner-shape:superellipse(2);
}
.curve-header nav.white-glass{padding:5px}
.curve-header nav .nav-cta{border-radius:17px;corner-shape:superellipse(2)}
.optical-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5;fill:none}
.film-card{background:#020709}
.film-card>.optical-edge{display:none}
.film-card:has(>video.ready)>img{visibility:hidden}
.is-expanded .film-card>.optical-edge{opacity:0;transition:opacity .25s}
/* Stronger hierarchy for the G/H studies, with the wording left intact. */
:root:is([data-background-study=g],[data-background-study=h]) .option-a .expansion-stage{
 grid-template-columns:minmax(0,.293485fr) minmax(0,.706515fr);column-gap:clamp(24px,2.4vw,48px);
}
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy{padding-bottom:34px}
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy h1{
 font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
 font-size:clamp(40px,13.2cqw,82px);font-weight:400;letter-spacing:-.028em;line-height:1.06;
 white-space:normal;margin:0;max-width:12ch;text-wrap:balance;
}
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy h1 em{color:#f2f4ed}
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy h1 span{display:block}
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy>p:last-child{
 font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
 font-size:clamp(17px,4.5cqw,23px);font-weight:400;line-height:1.55;letter-spacing:0;
 color:rgba(244,247,240,.83);max-width:30ch;margin-top:28px;
}
@media(max-width:700px){
 :root:is([data-background-study=g],[data-background-study=h]) .option-a .expansion-stage{grid-template-columns:minmax(0,1fr);gap:26px}
 :root:is([data-background-study=g],[data-background-study=h]) .curve-copy{padding-bottom:0}
 :root:is([data-background-study=g],[data-background-study=h]) .curve-copy h1{font-size:clamp(36px,11.5cqw,54px)}
 :root:is([data-background-study=g],[data-background-study=h]) .curve-copy>p:last-child{margin-top:18px}
}
/* Replay uses the same play glyph and a smaller countdown, with no extra symbol. */
.playback-control[data-state="replay"] .icon-replay{display:none}
.playback-control[data-state="replay"] .icon-play{display:block}
.playback-control .control-icon{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.playback-control .replay-countdown{width:34px;height:34px;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.replay-countdown circle{stroke-width:.85}
.curve-copy h1 em>span{color:inherit}

/* Explicit white avoids the global heading accent bleeding into nested spans. */
.curve-copy #curve-title,.curve-copy #curve-title em,.curve-copy #curve-title em>span{color:#fff}
/* Keep the navigation edge nearly imperceptible on dark palettes. */
.curve-header nav>.optical-edge,.mission-header .brand>.optical-edge{opacity:.55}
/* Original left alignment, with a slightly larger headline. */
:root:is([data-background-study=g],[data-background-study=h]) .curve-copy{min-width:0;text-align:left}
@media(min-width:701px) and (max-width:1100px){
 :root:is([data-background-study=g],[data-background-study=h]) .curve-copy h1{font-size:clamp(29px,14cqw,44px)}
 :root:is([data-background-study=g],[data-background-study=h]) .curve-copy>p:last-child{font-size:clamp(13px,7.5cqw,17px)}
}
/* Mobile opens with the product video, followed by its title and description. */
@media(max-width:700px){
 .option-a .expansion-stage,
 :root:is([data-background-study=g],[data-background-study=h]) .option-a .expansion-stage{
  grid-template-columns:minmax(0,1fr);padding-top:125px;padding-bottom:80px;row-gap:32px;align-content:center;
 }
 .option-a .film-slot{grid-row:1;grid-column:1}
 .option-a .curve-copy{grid-row:2;grid-column:1;padding-bottom:0}
 .option-a:not(.option-c) .film-card{grid-row:1;grid-column:1}
}

/* Compact tonal choices for the approved black background. */
.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.palette-grid button>span{height:35px}
/* Dark navigation finishes are confined to the hero. */
.curve-header nav a{border-radius:17px;corner-shape:superellipse(2)}
.curve-header.hero-header nav.white-glass{
 background:rgba(5,10,8,.94);color:#fff;border-radius:32px;
 box-shadow:0 5px 18px rgba(0,0,0,.12);
 backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.curve-header.hero-header nav a{
 border-radius:27px;corner-shape:superellipse(2);
 color:rgba(255,255,255,.9);font-size:13px;font-weight:450;
 text-transform:none;letter-spacing:0;
 transition:background .18s ease,color .18s ease;
}
.curve-header.hero-header nav .nav-cta{
 border-radius:27px;color:#fff;background:rgba(255,255,255,.045);box-shadow:none;
}
.curve-header.hero-header nav a:hover,
.curve-header.hero-header nav a:focus-visible{
 opacity:1;color:#fff;background:rgba(255,255,255,.085);
}
.curve-header.hero-header nav a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.curve-header.hero-header nav>.optical-edge{opacity:calc(.2 + .1 * var(--nav-lift,0))}
:root[data-hero-nav=smoked] .curve-header.hero-header nav.white-glass{
 background:rgba(9,18,13,.68);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
}
:root[data-hero-nav=smoked] .curve-header.hero-header nav>.optical-edge{opacity:calc(.38 + .06 * var(--nav-lift,0))}
:root[data-hero-nav=bare] .curve-header.hero-header nav.white-glass{
 background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-hero-nav=bare] .curve-header.hero-header nav>.optical-edge{display:none}
:root[data-hero-nav=bare] .curve-header.hero-header nav .nav-cta{background:transparent}
@media(max-width:700px){
 .curve-header.hero-header nav a{font-size:11px}
 .curve-header.hero-header nav .nav-cta{padding:11px 13px}
}

/* Controls are accessed directly at studio.html. */
.style-studio[hidden]{display:none}
/* Concentric capsule ends with the same 5px inset on every side, in both headers. */
.curve-header nav.white-glass{padding:5px;border:0;align-items:stretch}
.curve-header nav.white-glass,
.curve-header nav a,
.curve-header nav .nav-cta,
.curve-header.hero-header nav.white-glass,
.curve-header.hero-header nav a,
.curve-header.hero-header nav .nav-cta{
 border-radius:999px;corner-shape:round;clip-path:none;
}
:root{--surface-radius:44px}
.sage-backdrop,.hero-header-mask,.option-a .film-card,.film-card{
 border-radius:var(--surface-radius);corner-shape:superellipse(2);
}
/* Clip only the rising header to the hero interior. The page rim stays in
   front while the video remains free to expand all the way to the viewport. */
.hero-header-mask{
 position:absolute;inset:var(--hero-edge);z-index:30;overflow:hidden;pointer-events:none;
}
.hero-header-mask>.curve-header{
 top:var(--header-inset);
 left:calc(min(var(--layout-left,50px),10vw) - var(--hero-edge));
 right:calc(min(var(--layout-right,50px),10vw) - var(--hero-edge));
 pointer-events:auto;
}
.hero-header-mask>.curve-header>.brand,
.hero-header-mask>.curve-header>nav{
 opacity:var(--header-visibility,1);
 mask-image:linear-gradient(to bottom,transparent var(--header-cut,0px),#000 calc(var(--header-cut,0px) + var(--header-feather,0px)));
 -webkit-mask-image:linear-gradient(to bottom,transparent var(--header-cut,0px),#000 calc(var(--header-cut,0px) + var(--header-feather,0px)));
}

/* A single neutral hairline appears during resizing, strongest on zoom-out. */
.film-card>.optical-edge,
.is-expanded .film-card>.optical-edge{
 display:block;opacity:var(--motion-edge-opacity,0);transition:opacity .22s ease-out;
}
@media(prefers-reduced-motion:reduce){
 .film-card>.optical-edge{display:none}
}

/* Launch edit: a quieter shared header, with one moving section indicator. */
.curve-header .brand,.curve-header.header-returned .brand{
 position:relative;display:flex;align-items:center;justify-content:center;
 box-sizing:border-box;padding:5px 16px;border:0;border-radius:999px;
 corner-shape:round;clip-path:none;height:var(--header-control-height,58px);
}
.curve-header.hero-header .brand{
 background:transparent;
 backdrop-filter:none;-webkit-backdrop-filter:none;
 box-shadow:none;
}
.curve-header .brand img{width:218px;max-width:100%;max-height:100%;object-fit:contain}
.curve-header.header-returned .brand{height:var(--returned-header-height,58px)}
.curve-header.hero-header .brand>.optical-edge{display:none}
.curve-header nav{position:relative;isolation:isolate}
.curve-header nav a{position:relative;z-index:1;white-space:nowrap}
.curve-header nav .nav-indicator{
 position:absolute;top:0;left:0;z-index:0;pointer-events:none;
 width:var(--indicator-width,0px);height:var(--indicator-height,0px);
 transform:translate3d(var(--indicator-x,5px),var(--indicator-y,5px),0) scale(var(--indicator-scale-x,1),var(--indicator-scale-y,1));
 border-radius:999px;background:rgba(255,255,255,.09);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
 opacity:1;
 transition:transform .58s cubic-bezier(.22,1.28,.36,1),width .46s cubic-bezier(.22,1,.36,1),opacity .2s ease!important;
}
.curve-header nav .nav-cta,.curve-header.hero-header nav .nav-cta,
.curve-header nav a[aria-current=location]{background:transparent;box-shadow:none}
.curve-header.header-returned nav a{font-size:13px;font-weight:450;text-transform:none;letter-spacing:0;color:#2a3d35}
.curve-header.header-returned nav .nav-indicator{background:rgba(31,60,48,.11);box-shadow:inset 0 0 0 1px rgba(31,60,48,.035)}
.curve-header.header-returned nav a:hover,.curve-header.header-returned nav a:focus-visible{background:rgba(31,60,48,.05);opacity:1}
.curve-header nav a[aria-current=location]{opacity:1}

/* Keep the supporting content compact, with the future chapters preserved in HTML. */
.section{scroll-margin-top:0}
.supporters-copy>p:last-child{margin-top:24px;color:#69776b;font-size:15px}
.supporter-logos{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:70px;max-width:840px;margin:46px auto 52px}
.supporter-logos a{display:flex;align-items:center;justify-content:center;min-height:110px;padding:12px}
.supporter-logos img{width:100%;height:90px;object-fit:contain}
.supporter-logos a[href="https://grid.harvard.edu/"] img{max-width:240px}
.supporter-logos a[href="https://seas.harvard.edu/"] img{max-width:380px}
.affiliation-strip{border-top:1px solid #344c341c;border-bottom:1px solid #344c341c;min-height:84px;display:flex;align-items:center;gap:35px}
.affiliation-strip>span{font-size:12px;color:#7a847b;white-space:nowrap}
.affiliation-track{flex:1;min-height:45px;overflow:hidden}
.contact.section{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:44px 6%;background:#244536;min-height:0}
.contact .eyebrow{margin:0 0 13px;color:#c4d2c6;font-size:11px}
.contact h2{font-size:clamp(32px,3vw,46px);line-height:1.1;margin:0;color:#fff}
.contact-details{display:flex;align-items:center;gap:56px}
.contact-details p{margin:0;color:#d0dbd2;font-size:14px;line-height:1.65}
.contact-email{border:1px solid #ffffff3b;border-radius:999px;padding:14px 22px;color:#fff;font-size:14px;white-space:nowrap;transition:background .2s}
.contact-email:hover{background:#ffffff12}
.compact-footer{margin:10px;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:28px;corner-shape:superellipse(2);background:#050807;color:#bdc8c0}
.compact-footer .brand{padding:0;background:none;border-radius:0}
.compact-footer .brand img{width:174px;height:auto}
.compact-footer p{margin:0;font-size:11px;line-height:1.65;color:#a7b3ab}
.compact-footer p span{display:block;color:#7e8a81}
.compact-footer .text-link{font-size:12px;color:#e2e9e3}
@media(max-width:900px){
 .contact-details{gap:24px;flex-direction:column;align-items:flex-start}
 .curve-header .brand img{width:180px}
 .curve-header .brand{padding:5px 13px}
}
@media(max-width:700px){
 .curve-header{flex-wrap:wrap;gap:12px}
 .curve-header .brand,.curve-header.header-returned .brand{height:46px;max-width:none;padding:5px 15px}
 .curve-header .brand img,.curve-header.header-returned .brand img{width:155px;max-width:155px}
 .curve-header nav.white-glass{width:100%;gap:1px}
 .curve-header nav a,.curve-header.hero-header nav a,
 .curve-header nav .nav-cta,.curve-header.hero-header nav .nav-cta,
 .curve-header.header-returned nav a{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:10px 6px;font-size:11px;letter-spacing:0;text-transform:none}
 .option-a .expansion-stage,:root:is([data-background-study=g],[data-background-study=h]) .option-a .expansion-stage{padding-top:185px}
 html{scroll-padding-top:145px}
 .supporter-logos{grid-template-columns:1fr;gap:18px;margin:25px 0 35px}
 .supporter-logos a{min-height:90px;padding:8px}
 .supporter-logos img{height:76px}
 .affiliation-strip{min-height:70px;gap:12px}
 .contact.section{align-items:flex-start;flex-direction:column;gap:24px;padding:32px 7%}
 .contact-details{gap:18px}
 .contact-email{font-size:13px;padding:12px 18px}
 .compact-footer{padding:24px;margin:8px;flex-wrap:wrap;gap:20px}
 .compact-footer .brand img{width:155px}
 .compact-footer p{width:100%;order:3;font-size:10px}
}
/* Navigation motion is explicitly enabled for this design, including the active pill. */
.technology-showcase{width:min(80%,960px);margin:0 auto;overflow:hidden;background:#030909;border:0;border-radius:var(--surface-radius);corner-shape:superellipse(2)}
.technology-showcase video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#030909}
.technology-showcase figcaption{position:static;padding:14px 22px;background:#10271e;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#d5dfd7}
.technology-showcase figcaption>span:last-child{margin:0;font-size:11px;color:#9eafa2}
.showcase-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:13px 19px;border:1px solid #ffffff40;border-radius:999px;background:#081811bd;backdrop-filter:blur(12px);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.showcase-play[hidden]{display:none}
.showcase-play svg{width:20px;height:20px;fill:currentColor}
@media(max-width:900px){.technology-showcase{width:100%}}
@media(max-width:700px){.technology-showcase figcaption{padding:12px 16px;font-size:11px}.technology-showcase figcaption>span:last-child{display:block;font-size:11px}}

/* Preserve a visible fade when a fast return scroll reaches the hero at once. */
.curve-copy{transition:opacity .24s ease-out}
@media(prefers-reduced-motion:reduce){.curve-copy{transition:none}}

.partners .support-label{margin:40px 0 0;font-size:15px;color:#69776b}
.partners .affiliation-strip{margin-top:36px}

/* Shared typography for the Technology and About us headlines. */
.technology-title h2,#supporters-title{font-family:Spline,Arial,sans-serif;font-size:clamp(32px,3.5vw,55px);font-weight:400;line-height:1.12;letter-spacing:-.045em}
#supporters-title .expertise-title{font:inherit;font-weight:300;letter-spacing:inherit}

/* Team experience is separate from project support. */
.partners .affiliation-strip{display:block;padding:24px 0 30px;min-width:0}
.experience-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;color:#69776b;font-size:15px}
.experience-window{overflow:hidden;--logo-edge:clamp(70px,13vw,170px);mask-image:linear-gradient(to right,transparent 0%,#000 var(--logo-edge),#000 calc(100% - var(--logo-edge)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 var(--logo-edge),#000 calc(100% - var(--logo-edge)),transparent 100%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.affiliation-track{display:flex;width:max-content;animation:experience-scroll 50s linear infinite;will-change:transform;backface-visibility:hidden}
.experience-group{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0 40px 0 0;flex-shrink:0}
.experience-group li{display:flex;align-items:center;justify-content:center;width:180px;height:64px;flex:0 0 180px}
.experience-group img{display:block;width:180px;height:50px;object-fit:contain}
@keyframes experience-scroll{to{transform:translate3d(-50%,0,0)}}
@media(max-width:700px){.experience-group{gap:32px;padding-right:32px}.experience-group li{width:150px;flex-basis:150px}.experience-group img{width:150px;height:44px}}

.experience-window .affiliation-track,.affiliation-strip:hover .affiliation-track,.affiliation-strip:focus-within .affiliation-track{animation-play-state:running!important;overflow:visible}

/* Let the returning header finish its fade above any section it crosses. */
.curve-header.header-returned{z-index:1000}

/* Crossing a location starts a timed fade; further scrolling cannot cut it short. */
.hero-header-mask{z-index:1000}
.hero-header-mask>.curve-header>.brand,
.hero-header-mask>.curve-header>nav,
.curve-header.header-returned{transition:opacity .45s ease-in-out}
@media(prefers-reduced-motion:reduce){
 .hero-header-mask>.curve-header>.brand,
 .hero-header-mask>.curve-header>nav,
 .curve-header.header-returned{transition:none}
}

/* Two invitations above the slim branding bar. */
.contact-panel.section{display:block;padding:12px 6%;background:#eaf2e9;color:#253c34}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:60px;padding:38px 0}
.contact-row+.contact-row{border-top:1px solid #253c3426}
.contact-row>div{max-width:780px}
.contact-row h3{font-size:26px;line-height:1.2;letter-spacing:-.025em;margin:0 0 16px}
.contact-row p{font-size:16px;line-height:1.65;color:#526458;margin:0}
.contact-action{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:150px;margin-left:auto;padding:13px 25px;border-radius:999px;background:#244536;color:#fff;font-size:14px;transition:background .2s}
.contact-action:hover{background:#335b46}
.contact-action-disabled,.contact-action-disabled:hover{position:relative;background:#d9dcda;color:#727873;cursor:not-allowed}
.contact-action-disabled:focus-visible{outline:2px solid #727873;outline-offset:4px}
.contact-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:8px;background:#303a34;color:#fff;font-size:14px;line-height:1.3;white-space:nowrap;visibility:hidden;opacity:0;pointer-events:none}
.contact-action-disabled:hover .contact-tooltip,.contact-action-disabled:focus .contact-tooltip{visibility:visible;opacity:1}
.compact-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:25px 40px}
.compact-footer>.brand{justify-self:start}
.compact-footer>p{text-align:center;order:initial;width:auto}
.footer-links{justify-self:end;display:flex;align-items:center;gap:24px}
@media(max-width:700px){
 .contact-panel.section{padding:4px 7%}
 .contact-row{align-items:flex-start;flex-direction:column;gap:24px;padding:30px 0}
 .contact-row h3{font-size:24px}
 .contact-row p{font-size:15px}
 .compact-footer{grid-template-columns:1fr 1fr;padding:24px;gap:20px}
 .footer-links{gap:16px}
 .compact-footer>p{grid-row:2;grid-column:1/-1;font-size:10px}
}

/* Selection stays on the current section; hover is a separate, smaller pill. */
.curve-header nav a::after{
 content:"";position:absolute;inset:4px;border-radius:999px;z-index:-1;
 pointer-events:none;background:rgba(255,255,255,.075);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
 opacity:0;transform:scale(.94);
 transition:opacity .18s ease,transform .3s cubic-bezier(.22,1.28,.36,1)!important;
}
.curve-header.header-returned nav a::after{background:rgba(31,60,48,.065);box-shadow:none}
.curve-header nav a:hover,.curve-header nav a:focus-visible,
.curve-header.hero-header nav a:hover,
.curve-header.hero-header nav a:focus-visible,
.curve-header.header-returned nav a:hover,
.curve-header.header-returned nav a:focus-visible{background:transparent;opacity:1}
.curve-header nav a:not([aria-current=location]):is(:hover,:focus-visible)::after{opacity:1;transform:scale(1)}

/* Mirror the opening header's upward travel when the light header enters/leaves. */
.curve-header.header-returned.mission-header {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,calc(-100% - 50px),0);
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility 0s .45s !important;
}
.curve-header.header-returned.mission-header.is-returned-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
  transition-delay: 0s !important;
}

/* Solid white surfaces only on the second, returning header. */
.curve-header.header-returned.mission-header > .brand,
.curve-header.header-returned.mission-header > nav.white-glass {
  background: #fff;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.curve-header.header-returned.mission-header > .brand::before,
.curve-header.header-returned.mission-header > .brand::after,
.curve-header.header-returned.mission-header > nav::before,
.curve-header.header-returned.mission-header > nav::after,
.curve-header.header-returned.mission-header > .brand > .optical-edge,
.curve-header.header-returned.mission-header > nav > .optical-edge {
  display: none;
}
.curve-header.header-returned.mission-header .nav-indicator { box-shadow: none; }

/* Hold a navigation link and slide the pill; release to select a section. */
.curve-header nav a{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:pan-y;cursor:grab}
.curve-header nav.is-dragging,.curve-header nav.is-dragging a{cursor:grabbing}
.curve-header nav.is-pressed{--indicator-scale-x:1.04;--indicator-scale-y:.94}
.curve-header nav.is-pressed .nav-indicator{transition:transform .18s cubic-bezier(.22,1.28,.36,1),width .16s ease-out!important}
.curve-header nav a.is-pressed:not([aria-current=location])::after{opacity:1;transform:scale(1.025,.94)}
.curve-header nav.is-dragging .nav-indicator{transition:transform .09s ease-out,width .16s ease-out!important}
.curve-header nav.is-dragging a::after{opacity:0!important}
.curve-header nav.is-dragging a.drag-target{opacity:1}
/* A small nudge followed by a long rest, keeping the invitation unobtrusive. */
.outside-scroll-cue{animation:explore-nudge 5.5s ease-in-out infinite}
@keyframes explore-nudge{
 0%,65%,100%{translate:0 0}
 74%{translate:0 -5px}
 83%{translate:0 0}
 90%{translate:0 -2px}
 96%{translate:0 0}
}