/* A product story told through scale, material and direct exploration. */
.story-page{--story-ink:#10283c;--story-muted:#546c7c;--story-violet:#7155ba;--story-blue:#14789e;overflow:clip}.story-page h1,.story-page h2,.story-page h3{font-weight:550}.story-kicker{font-size:13px;line-height:1.55;font-weight:600;letter-spacing:.09em;margin:0 0 24px}.story-hero{position:relative;padding-top:54px;background:linear-gradient(180deg,#fff 57%,#f2f6fa);overflow:hidden}.story-hero-copy{text-align:center;position:relative;z-index:1}.story-hero h1{font-size:clamp(68px,7.9vw,118px);line-height:.98;letter-spacing:-.06em;margin-bottom:28px}.story-hero h1>span{background:linear-gradient(105deg,#7050b2,#355da0 55%,#0c7e87);background-clip:text;-webkit-background-clip:text;color:transparent}.story-definition{font-size:21px;line-height:1.55;max-width:730px;margin:0 auto 13px;color:#3c586b}.story-supply{font-size:15px;line-height:1.6;color:#526b7a;margin:0 auto 25px;max-width:710px}.story-actions{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}.story-button{border-radius:28px;font-size:15px;min-height:49px;padding:11px 24px;gap:20px;background:#1e5073;border-color:#1e5073}.story-button:hover{background:#176e92;border-color:#176e92}.story-plate{margin:0 auto;max-width:1160px;min-width:0;position:relative;padding:0 40px 30px;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:0}.story-plate>img{width:min(100%,850px);max-height:510px;object-fit:contain;transform-origin:center;will-change:auto}.story-plate figcaption{display:flex;flex-direction:column;gap:5px;margin:0 0 0 -45px;position:relative;font-size:20px;line-height:1.4;letter-spacing:-.025em}.story-plate figcaption>span{color:#667d8c}.story-plate figcaption>strong{font-weight:550}.story-plate figcaption>small{font-size:12px;letter-spacing:0;color:#526b7a;margin-top:14px}.story-nav{position:sticky;top:0;z-index:18;border-block:1px solid #dce6ed;background:#ffffffed;backdrop-filter:blur(20px)}.story-nav>.wrap{display:flex;justify-content:center;align-items:center;gap:34px;min-height:60px}.story-nav a{font-size:14px;line-height:1.4;padding:10px 0;color:#4b6374}.story-nav a[aria-current]{color:#0c597c;box-shadow:inset 0 -2px #337b9e}.story-nav a:hover{color:#0e5b7f}.story-motion{font-size:12px;color:#526b7a;background:transparent;border:1px solid #c8d9e4;border-radius:20px;padding:6px 12px;min-height:34px;white-space:nowrap}.material-story{padding-top:118px;background:#fff}.material-intro{max-width:1050px}.material-intro h2{font-size:clamp(46px,5.5vw,78px);line-height:1.06;letter-spacing:-.045em;max-width:900px;margin-bottom:25px}.material-intro>p:last-child{font-size:24px;color:#526b7a;line-height:1.5;margin-bottom:0}.material-landscape{position:relative;margin:55px 0 0;overflow:hidden;background:#eef2f7;min-width:0}.material-landscape>img{width:100%;aspect-ratio:16/9;max-height:820px;object-fit:cover;transform-origin:65% 60%}.material-landscape>figcaption{position:absolute;bottom:8%;left:max(56px,calc((100% - 1050px)/2));max-width:440px;display:flex;flex-direction:column;gap:7px;padding:20px 24px;background:#ffffffdf;border:1px solid #ffffff;border-radius:12px;backdrop-filter:blur(12px);color:#193950}.material-landscape figcaption strong{font-size:24px;font-weight:550}.material-landscape figcaption span{font-size:17px}.material-landscape figcaption small{font-size:12px;line-height:1.6;margin-top:8px;color:#526b7a;max-width:330px}.material-thought{text-align:center;padding-block:95px 115px}.material-thought>p{font-size:clamp(39px,4.7vw,65px);font-weight:550;line-height:1.14;letter-spacing:-.04em;margin-bottom:25px}.material-thought>p>span{color:#647892}.layer-experience{background:#fff;color:#10283c;padding-block:102px 95px}.layer-experience .story-kicker{color:#526b7a}.layer-heading h2{font-size:clamp(50px,5.8vw,84px);line-height:1.05;letter-spacing:-.045em;margin-bottom:24px;font-weight:550}.layer-heading>p:last-child{font-size:22px;color:#526b7a;margin-bottom:0}.layer-composition{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.82fr);gap:54px;align-items:center;margin-top:40px}.exploded-art{margin:0;position:relative;min-width:0;align-self:center}.exploded-art>img{width:100%;aspect-ratio:3/2;object-fit:contain;transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .65s;transform-origin:50% 55%}.exploded-art>figcaption{font-size:12px;line-height:1.65;color:#526b7a;max-width:630px;margin-top:25px}.layer-editor{min-width:0}.layer-controls{display:flex;flex-direction:column;border-block:1px solid #cfdde6;margin-bottom:30px}.layer-controls button{background:none;color:#526b7a;display:flex;align-items:center;gap:16px;text-align:left;padding:16px 0;border:0;font-size:16px;line-height:1.5;transition:color .2s,padding .2s;min-height:55px}.layer-controls button+button{border-top:1px solid #d4e0e7}.layer-controls button>span{font-size:12px;color:#617787}.layer-controls button[aria-pressed=true]{color:#10283c;padding-left:14px;box-shadow:inset 3px 0 #7255a6}.layer-controls button[aria-pressed=true]>span{color:#7255a6}.layer-controls button:hover{color:#10283c}.layer-controls button:focus-visible{outline-color:#7255a6;outline-offset:3px}.layer-panels article+article{margin-top:30px;border-top:1px solid #d4e0e7;padding-top:28px}.layer-panels article[hidden]+article{margin-top:0;border-top:0;padding-top:0}.layer-ownership{font-size:12px;line-height:1.5;letter-spacing:.08em;color:#7255a6;display:block;margin-bottom:17px}.layer-panels h3{font-size:35px;line-height:1.14;letter-spacing:-.025em;margin-bottom:18px;font-weight:500}.layer-panels p{font-size:16px;line-height:1.65;color:#526b7a;margin-bottom:15px}.layer-panels{min-height:290px}.interface-key{display:flex;gap:5px;flex-wrap:wrap;margin-top:26px}.interface-key>span{font-size:12px;line-height:1.5;padding:7px 9px;border:1px solid #ccdce5;border-radius:5px;color:#526b7a;transition:background .3s,color .3s,border-color .3s}.interface-key-note{font-size:12px;color:#526b7a;margin:9px 0 21px}.story-inline-link{display:inline-flex;align-items:center;gap:15px;font-size:15px;line-height:1.5;color:#cfdef5;padding-block:4px}.story-inline-link:hover{text-decoration:underline;text-underline-offset:4px}.layer-experience[data-layer="1"] .exploded-art>img{transform:scale(1.035) translateY(5px)}.layer-experience[data-layer="2"] .exploded-art>img{transform:scale(.97)}.research-story{background:#f5f7fa;padding-block:112px 100px}.research-heading{max-width:970px}.research-heading h2{font-size:clamp(48px,5.8vw,82px);line-height:1.06;letter-spacing:-.045em;margin-bottom:25px}.research-heading h2>span{color:#54758d}.research-heading>p:last-child{font-size:21px;line-height:1.6;color:#526b7a;max-width:690px;margin-bottom:0}.research-panorama{margin:48px 0 44px;border-radius:16px;overflow:hidden;background:#061c30}.research-panorama>img{width:100%;height:auto}.research-panorama>figcaption{font-size:12px;line-height:1.6;color:#c1d5e3;padding:14px 25px 17px}.research-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}.research-sequence article{border-top:2px solid #aec7d6;padding-top:24px}.research-sequence article>span{display:block;font-size:12px;line-height:1.5;letter-spacing:.06em;color:#526b7a;margin-bottom:24px}.research-sequence h3{font-size:27px;line-height:1.22;letter-spacing:-.025em;margin-bottom:20px}.research-sequence p{font-size:16px;line-height:1.65;color:#526b7a;margin-bottom:0}.research-source{display:flex;justify-content:space-between;gap:38px;align-items:center;margin-top:40px;padding-top:30px;border-top:1px solid #d1dfe8}.research-source p{margin:0;max-width:630px;font-size:13px;line-height:1.65;color:#526b7a}.research-source p>strong{display:block;font-weight:600;color:#234258;margin-bottom:6px}.research-source .button{flex-shrink:0}.experiment-story{padding-block:114px 102px;text-align:center}.experiment-story h2{font-size:clamp(55px,7vw,100px);line-height:1.02;letter-spacing:-.05em;margin-bottom:25px}.experiment-story h2>span{color:#477696}.experiment-lead{font-size:23px;line-height:1.5;color:#526b7a;margin-bottom:55px}.experiment-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;text-align:left;list-style:none;padding:0;margin:0 0 45px}.experiment-strip li{position:relative;border-top:2px solid #c8dbe6;padding-top:24px}.experiment-strip li>span{font-size:38px;line-height:1.2;letter-spacing:-.03em;color:#849db9;display:block;margin-bottom:22px}.experiment-strip li:nth-child(2)>span{color:#8675b3}.experiment-strip li:nth-child(3)>span{color:#5085a6}.experiment-strip li:nth-child(4)>span{color:#468e91}.experiment-strip h3{font-size:32px;line-height:1.2;margin-bottom:15px}.experiment-strip p{font-size:16px;line-height:1.65;color:#526b7a;max-width:230px;margin:0}.story-next-note{font-size:13px;line-height:1.65;color:#526b7a;margin:22px auto 0;max-width:640px}.story-audience{background:#edf2f7;padding-block:104px}.audience-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}.audience-inner h2{font-size:clamp(42px,4.6vw,65px);line-height:1.08;letter-spacing:-.04em;margin-bottom:0}.audience-inner h2>span{color:#698198}.audience-case>p:first-child{font-size:21px;line-height:1.6;color:#365267;max-width:540px;margin-bottom:30px}.repeat-route{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:17px}.repeat-route li{font-size:15px;line-height:1.5;color:#23465f;font-weight:550}.repeat-route li+li:before{content:'→';display:inline-block;margin-right:17px;color:#7898b0}.audience-case .story-next-note{margin:15px 0 28px;font-size:12px}.audience-case>.button{margin:0 25px 20px 0}.audience-case>.text-link{font-size:14px}.story-films{padding-block:102px}.story-films h2{font-size:clamp(44px,4.6vw,65px);line-height:1.08;letter-spacing:-.04em}.story-films .film-heading{min-height:100px}.story-films .film-heading h3{font-size:29px;margin-bottom:7px}.story-films .film-heading>p{font-size:14px;color:#526b7a;margin:0 0 23px}.story-films .media-context{margin:30px 0 0;max-width:none}.story-page a:focus-visible,.story-page button:focus-visible{outline-width:3px}.story-page section[id],.layer-experience[id]{scroll-margin-top:85px}
@media(min-width:1600px){.story-hero{padding-top:72px}.story-hero h1{font-size:118px}.story-plate{max-width:1270px}.story-plate>img{max-height:565px}.material-landscape>img{max-height:920px}}
@media(max-width:1050px){.story-hero{padding-top:45px}.story-hero h1{font-size:clamp(70px,9vw,93px)}.story-definition{font-size:20px}.story-plate{grid-template-columns:minmax(0,1fr) 180px;padding-inline:32px}.story-plate>img{max-height:440px}.story-plate figcaption{font-size:18px;margin-left:-35px}.story-nav>.wrap{gap:25px}.story-nav a{font-size:13px}.story-motion{font-size:12px;padding-inline:9px}.material-story{padding-top:86px}.material-landscape{margin-top:40px}.material-landscape>figcaption{left:40px;bottom:6%;max-width:370px}.material-intro>p:last-child{font-size:22px}.material-thought{padding-block:75px 90px}.layer-experience{padding-block:80px}.layer-composition{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,.94fr)}.layer-panels h3{font-size:31px}.layer-panels{min-height:315px}.research-story{padding-block:86px}.research-sequence{gap:30px}.research-sequence h3{font-size:25px}.research-source{gap:25px}.experiment-story{padding-block:90px}.experiment-strip{gap:27px}.experiment-strip h3{font-size:29px}.audience-inner{gap:45px}.repeat-route{gap:12px;flex-wrap:wrap}.repeat-route li+li:before{margin-right:12px}.story-audience{padding-block:80px}.story-films{padding-block:80px}}
@media(max-width:760px){.story-hero{padding-top:32px}.story-kicker{font-size:12px;letter-spacing:.065em;margin-bottom:22px}.story-hero .story-kicker{max-width:340px;margin-inline:auto}.story-hero h1{font-size:clamp(52px,10.3vw,76px);line-height:1.02;letter-spacing:-.05em;margin-bottom:25px}.story-definition{font-size:18px;line-height:1.6;max-width:560px}.story-supply{font-size:14px;line-height:1.6;margin-bottom:25px}.story-actions{gap:18px}.story-actions .text-link{font-size:14px}.story-button{min-height:47px;padding:10px 20px;font-size:14px;gap:16px}.story-plate{grid-template-columns:1fr;padding:7px 20px 35px;max-width:580px}.story-plate>img{max-height:370px;width:100%;margin-inline:auto}.story-plate figcaption{text-align:center;display:block;margin:-2px 0 0;font-size:17px;line-height:1.5}.story-plate figcaption>span{margin-right:6px}.story-plate figcaption>small{display:block;font-size:12px;margin-top:7px}.story-nav>.wrap{width:calc(100% - 32px);gap:16px;justify-content:space-between;min-height:55px;flex-wrap:wrap;padding-block:9px}.story-nav a{font-size:12px;line-height:1.4;padding:5px 0}.story-nav a:last-of-type{margin-left:0}.story-motion{padding:5px 9px;font-size:12px;min-height:32px}.material-story{padding-top:65px}.material-intro h2{font-size:clamp(40px,7.8vw,59px);line-height:1.08}.material-intro>p:last-child{font-size:19px;line-height:1.55}.desktop-break{display:none}.material-landscape{margin-top:30px}.material-landscape>img{aspect-ratio:1.16;object-fit:cover;object-position:65% 50%;max-height:550px}.material-landscape>figcaption{position:static;border:0;border-radius:0;padding:23px 25px 25px;max-width:none;gap:6px;background:#f2f5f8}.material-landscape figcaption strong{font-size:22px}.material-landscape figcaption span{font-size:16px}.material-landscape figcaption small{font-size:12px;max-width:400px;margin-top:7px}.material-thought{padding-block:60px 65px}.material-thought>p{font-size:clamp(34px,7vw,49px);line-height:1.15;margin-bottom:24px}.material-thought .text-link{font-size:14px}.layer-experience{padding-block:65px 60px}.layer-heading h2{font-size:clamp(44px,9vw,66px);line-height:1.05}.layer-heading>p:last-child{font-size:19px}.layer-composition{grid-template-columns:1fr;gap:30px;margin-top:28px}.exploded-art{max-width:570px;width:100%;margin-inline:auto}.exploded-art>img{aspect-ratio:1.45;object-fit:contain}.exploded-art>figcaption{margin-top:18px;font-size:12px}.layer-controls{margin-bottom:28px}.layer-controls button{font-size:16px;padding-block:15px;min-height:54px}.layer-panels{min-height:250px}.layer-panels h3{font-size:34px;line-height:1.15}.layer-panels p{font-size:16px}.layer-ownership{font-size:12px}.interface-key{margin-top:22px}.interface-key>span{font-size:12px;padding:7px 9px}.interface-key-note{font-size:12px;margin-bottom:20px}.story-inline-link{font-size:15px}.research-story{padding-block:65px}.research-heading h2{font-size:clamp(43px,8.6vw,63px);line-height:1.08}.research-heading>p:last-child{font-size:18px}.research-panorama{margin-block:30px;border-radius:10px}.research-panorama>img{aspect-ratio:3/1;object-fit:contain;object-position:center}.research-panorama>figcaption{font-size:11px;padding:12px 18px 15px}.research-sequence{grid-template-columns:1fr;gap:28px}.research-sequence article{padding-top:20px}.research-sequence article>span{font-size:12px;margin-bottom:16px}.research-sequence h3{font-size:28px;margin-bottom:15px}.research-sequence h3 br{display:none}.research-sequence p{font-size:16px;max-width:550px}.research-source{flex-direction:column;align-items:flex-start;gap:22px;margin-top:28px;padding-top:25px}.research-source p{font-size:13px}.experiment-story{padding-block:65px}.experiment-story h2{font-size:clamp(49px,10vw,73px);line-height:1.04}.experiment-lead{font-size:19px;margin-bottom:35px}.experiment-strip{grid-template-columns:1fr 1fr;gap:27px 22px;margin-bottom:34px}.experiment-strip li{padding-top:19px}.experiment-strip li>span{font-size:31px;margin-bottom:15px}.experiment-strip h3{font-size:28px}.experiment-strip p{font-size:16px}.story-next-note{font-size:13px;line-height:1.6;margin-top:22px}.story-audience{padding-block:65px}.audience-inner{grid-template-columns:1fr;gap:30px}.audience-inner h2{font-size:clamp(40px,8vw,59px);line-height:1.09}.audience-case>p:first-child{font-size:19px;margin-bottom:25px}.repeat-route{gap:10px;flex-wrap:wrap}.repeat-route li{font-size:14px}.repeat-route li+li:before{margin-right:10px}.audience-case .story-next-note{font-size:12px;margin-block:15px 25px}.audience-case>.button{margin-right:20px}.story-films{padding-block:65px}.story-films h2{font-size:clamp(40px,8vw,58px);line-height:1.08}.story-films .film-heading{min-height:85px}.story-films .film-heading h3{font-size:27px}.story-films .film-heading>p{font-size:14px}.story-films .media-context{margin-top:25px}.story-page section[id],.layer-experience[id]{scroll-margin-top:105px}}
@media(max-width:390px){.story-hero h1{font-size:52px}.story-definition{font-size:18px}.story-plate>img{max-height:295px}.story-nav>.wrap{column-gap:18px;row-gap:4px;justify-content:center}.story-nav a{font-size:12px}.story-motion{font-size:12px}.story-plate figcaption{font-size:16px}.material-intro h2{font-size:40px}.layer-panels{min-height:290px}.repeat-route{flex-direction:column;align-items:flex-start;gap:8px}.repeat-route li+li:before{content:'↓';margin-right:12px}.experiment-strip{gap:26px 20px}.experiment-strip h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.story-page{scroll-behavior:auto}.story-plate>img,.material-landscape>img,.layer-experience .exploded-art>img{transform:none!important}.layer-experience *{transition:none!important}.story-motion{display:none}}

.story-nav a{font-size:14px}.story-page .story-nav a:focus-visible{outline-offset:3px}
@media(max-width:760px){.story-nav>.wrap{column-gap:20px;row-gap:3px;justify-content:center}.story-nav a{font-size:13px}.story-motion{margin-left:0}}

/* Keep the tangible object in the opening; the third control completes the interface. */
.story-home .header{height:88px}.story-hero{padding-top:34px}.story-hero h1{font-size:clamp(58px,6.55vw,98px);line-height:1.07;margin-bottom:23px}.story-hero h1 br{display:none}.story-hero .story-kicker{margin-bottom:19px}.story-definition{max-width:770px;font-size:20px}.story-supply{margin-bottom:23px}.story-plate>img{max-height:470px}.biology-diagram{aspect-ratio:3/2;padding:27px 30px;display:flex;flex-direction:column;justify-content:center;gap:11px}.biology-diagram-title{font-size:12px;letter-spacing:.065em;color:#526b7a;margin-bottom:8px}.biology-system{padding:22px 20px;background:#b8e5e6;color:#103547;border-radius:8px;display:flex;flex-direction:column;gap:8px}.biology-system>strong{font-size:28px;line-height:1.2;letter-spacing:-.025em;font-weight:550}.biology-system>span{font-size:14px;line-height:1.5;color:#315b69}.biology-connection{text-align:center;line-height:1.1;font-size:24px;color:#526b7a}.biology-interface,.biology-foundation{display:flex;flex-direction:column;gap:5px;border:1px solid #668498;padding:14px 19px;border-radius:6px}.biology-interface>span,.biology-foundation>span{font-size:11px;letter-spacing:.055em;color:#526b7a}.biology-interface>strong,.biology-foundation>strong{font-size:17px;line-height:1.4;font-weight:500;color:#24435a}.biology-foundation{border-color:#bcb1d6;background:#f2eef8}.story-page[data-motion="off"] .exploded-art>img{transform:none!important}.story-page[data-motion="off"] .layer-experience *{transition:none!important}
@media(max-width:1050px){.biology-diagram{padding:22px;aspect-ratio:auto;min-height:370px}.biology-system{padding:18px}.biology-system>strong{font-size:25px}.biology-interface,.biology-foundation{padding:12px 16px}}
@media(max-width:760px){.story-home .header{height:80px}.story-hero{padding-top:26px}.story-hero h1{font-size:clamp(52px,10.3vw,76px);line-height:1.02}.story-hero h1 br{display:block}.story-definition{font-size:18px}.story-hero .story-kicker{margin-bottom:20px}.story-supply{margin-bottom:22px}.story-plate>img{max-height:335px}.biology-diagram{min-height:365px;padding:23px}.biology-system>strong{font-size:27px}.biology-interface>strong,.biology-foundation>strong{font-size:17px}}
@media(max-width:390px){.story-hero h1{font-size:52px}.story-plate>img{max-height:290px}.biology-diagram{padding:20px}.biology-system>strong{font-size:25px}}

.layer-experience .story-inline-link{color:#246b83}

@media(max-width:760px){
  .story-nav{position:static}
  .story-nav a,.story-motion,.story-inline-link{min-height:44px;display:inline-flex;align-items:center}
  .story-nav a{font-size:14px}
  .story-motion{font-size:14px;padding:9px 12px}
  .exploded-art>figcaption,.layer-ownership,.interface-key-note,.biology-diagram-title,.biology-interface>span,.biology-foundation>span{font-size:14px}
  .layer-panels h3{font-size:29px;line-height:1.2}
  .layer-heading h2{font-size:clamp(2rem,8vw,2.625rem);line-height:1.15}
  .layer-heading>p:last-child{font-size:18px}
  .layer-panels{min-height:0}
  .biology-diagram{padding:12px 0;min-height:0;aspect-ratio:auto}
}

/* Keep the explanatory viewport steady when changing between material and biology. */
.exploded-art{display:grid;grid-template-columns:minmax(0,1fr)}
.exploded-art::before{content:"";grid-area:1/1;aspect-ratio:1;width:100%;pointer-events:none}
.exploded-art>[data-interface-scene],.exploded-art>[data-biology-diagram]{grid-area:1/1;align-self:center}
.exploded-art>[data-biology-diagram][hidden]{display:flex!important;visibility:hidden}
.exploded-art>figcaption{grid-area:2/1}
.exploded-art>.interface-motion-control{grid-area:3/1}

/* A spatial key, with colours that remain faithful to the illustration. */
.interface-key { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.layer-experience .interface-key > span { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; padding: 0; border: 0; border-radius: 0; background: none; color: #24435a; }
.interface-swatch { display: inline-block; flex: 0 0 10px; height: 10px; border-radius: 50%; }
.interface-swatch--ecm { background: #087e9c; }
.interface-swatch--hydrogel { background: #7150cb; }
.interface-swatch--support { background: #dce7ef; border: 1px solid #8ba5b7; }
.layer-experience .interface-key-note { font-size: 14px; line-height: 1.6; }