/* A material film driven by native scrolling, on editorial white / gray. */
.technology-story{--tech-ink:#262a28;--tech-muted:#69706c;--tech-accent:#a7693e;color:var(--tech-ink);background:#fff}
.technology-story h2,.technology-story h3{font-family:var(--serif);font-weight:400;letter-spacing:.045em}
.tech-kicker{font:10px var(--technical,sans-serif);letter-spacing:.18em;color:#69746e;line-height:1.7}
.tech-intro{padding:105px 24px 85px;text-align:center;scroll-margin-top:130px}
.tech-intro h2{font-size:clamp(32px,3.6vw,50px);line-height:1.65;margin:27px 0 28px}
.tech-intro>p:not(.tech-kicker){font-size:13px;line-height:2.5;color:#626a65;letter-spacing:.04em;margin:0}
.tech-intro-scroll{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:10px;letter-spacing:.12em;color:#8b918d;margin-top:40px}.tech-intro-scroll i{font-style:normal;font-size:20px;font-weight:200}
.tech-scroll-story{position:relative;background:#eceeeb;height:auto}.tech-scroll-story.is-ready{height:450svh}
.tech-sticky{position:relative;top:0;background:radial-gradient(ellipse at 32% 50%,#fafbf8 0%,#eff1ee 48%,#e7eae6 100%);height:720px;min-height:540px;overflow:hidden;display:flex;flex-direction:column;padding:30px max(4.5vw,24px) 26px}
.is-ready .tech-sticky{position:sticky;top:var(--story-header,130px);height:calc(100svh - var(--story-header,130px));min-height:430px;max-height:1000px}
.tech-stage-heading{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:4;font:10px var(--technical,sans-serif);letter-spacing:.17em;color:#526158;gap:15px}.tech-stage-heading>span i{font-style:normal;color:#a8b1a9;margin:0 15px}
.tech-motion{background:transparent;border:0;border-bottom:1px solid #a4aea6;color:#6c776f;font-size:10px;padding:3px 0 7px;cursor:pointer;letter-spacing:.06em}
.tech-stage-body{flex:1;min-height:0;display:grid;grid-template-columns:62% 38%;align-items:center;position:relative}
.tech-cinematic{position:relative;height:100%;min-height:300px;margin-left:-4.5vw;perspective:1300px;isolation:isolate}
.tech-spectrum-layer{position:absolute;inset:0 4% 0 5%;display:flex;flex-direction:column;justify-content:center;opacity:1;will-change:opacity;transform-origin:65% 50%}.tech-visual-label{font:9px var(--technical,sans-serif);letter-spacing:.22em;color:#7f8981;margin:0 0 10px 4%}.tech-spectrum-svg{display:block;width:100%;height:auto;overflow:visible}.tech-spectrum-legend{display:none}
.tech-material-scene{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 40%;opacity:0;pointer-events:none}
.tech-woven-plane{position:absolute;left:50%;top:44%;width:88%;aspect-ratio:20/13;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(53deg) rotateZ(-21deg);will-change:transform;isolation:isolate}
.tech-woven-canvas{width:100%;height:100%;display:block;border-radius:5px;box-shadow:0 1px 1px #e4dfc488,0 3px 0 #222422,0 5px 0 #3d403b,0 8px 2px #14171366;outline:1px solid #888b7266}.tech-plane-edge{position:absolute;inset:0;border:1px solid #d2bd8e55;border-radius:5px;box-shadow:inset 0 0 0 5px #10151233;pointer-events:none}
.tech-plane-shadow{position:absolute;left:12%;top:52%;width:72%;height:27%;border-radius:50%;background:radial-gradient(ellipse,#363e3240,transparent 68%);filter:blur(12px);transform:rotate(-12deg);opacity:.6}.tech-plane-glow{position:absolute;inset:8% 3% 6%;background:radial-gradient(ellipse at 52% 52%,#df9a5c40,transparent 61%);opacity:0}
.tech-material-label{position:absolute;left:12%;bottom:16%;display:flex;align-items:center;gap:13px;color:#616e64;font:10px var(--technical,sans-serif);letter-spacing:.13em}.tech-material-label i{display:block;width:34px;height:1px;background:#a4b0a5}.tech-material-label small{font-size:8px;letter-spacing:.11em}.tech-scale-label{position:absolute;top:17%;left:11%;font:8px var(--technical,sans-serif);letter-spacing:.16em;color:#808a81}.tech-scale-label i{font-style:normal;padding:0 10px;color:#a8afa8}.tech-scale-label b{font-weight:400}
.tech-visual-note{position:absolute;bottom:12px;left:10%;right:6%;margin:0;color:#8a918b;font-size:8px;line-height:1.7;letter-spacing:.035em}
.tech-narrative{align-self:center;position:relative;padding-left:4%;z-index:3}.tech-chapter{padding:12px 0;animation:tech-copy-in .45s ease both}.tech-chapter .tech-kicker{font-size:9px;letter-spacing:.15em;margin:0 0 30px;color:#7c877e}.tech-chapter h3{font-size:clamp(26px,2.7vw,42px);line-height:1.8;margin:0 0 25px;white-space:nowrap}.tech-description{font-size:clamp(11px,1vw,13px);line-height:2.4;color:#5a655d;margin:0 0 30px;letter-spacing:.025em}.tech-english{display:block;font:8px var(--technical,sans-serif);letter-spacing:.14em;line-height:1.8;color:#8e978f;max-width:35em}
.tech-products-link{display:flex;align-items:center;justify-content:space-between;max-width:265px;padding:14px 0;border-bottom:1px solid #a8b1a9;font-size:11px;color:#414d43;margin-top:20px;letter-spacing:.06em}
.tech-stage-bottom{display:flex;align-items:end;justify-content:space-between;gap:40px;position:relative;z-index:4;margin-top:20px}.tech-scroll-cue{margin:0;display:flex;flex-direction:column;gap:8px;font-size:9px;color:#79857b;white-space:nowrap}.tech-scroll-cue>span:first-child{font:8px var(--technical,sans-serif);letter-spacing:.16em;color:#a1aaa1}.tech-scroll-cue i{font-style:normal;margin-left:12px}
.tech-chapter-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;width:68%}.tech-chapter-nav button{position:relative;border:0;background:transparent;border-bottom:1px solid #ccd3cb;padding:12px 0 17px;text-align:left;display:flex;align-items:baseline;gap:12px;color:#909b91;cursor:pointer}.tech-chapter-nav button>span{font:10px var(--technical,sans-serif);letter-spacing:.06em}.tech-chapter-nav b{font-size:10px;font-weight:400;letter-spacing:.06em}.tech-chapter-nav button i{position:absolute;bottom:-1px;left:0;height:2px;background:#a17249;width:0}.tech-chapter-nav button[aria-pressed=true]{color:#394b3c}.tech-chapter-nav button[aria-pressed=true] i{width:calc(var(--step-progress,0)*100%)}.tech-chapter-nav button.is-past i{width:100%;background:#abb6aa}
.tech-brand-summary{text-align:center;padding:100px max(6vw,24px) 95px;background:#fff}.tech-brand-summary>h2{font-size:clamp(28px,3.2vw,43px);line-height:1.8;margin:24px 0 55px}.tech-principles{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto 45px;text-align:left;gap:48px}.tech-principles>div{border-top:1px solid #d9dfd8;padding-top:22px}.tech-principles>div>span{font:10px var(--technical,sans-serif);color:#a68868}.tech-principles h3{font-family:var(--sans);font-weight:400;font-size:17px;letter-spacing:.02em;margin:18px 0 12px}.tech-principles p{font-size:12px;line-height:2.2;color:#7a847b;margin:0}.tech-brand-summary .winter-link{font-size:12px;color:#515f51;border-color:#a7b3a5;gap:40px}
.technology-story [hidden]{display:none!important}.technology-story button:focus-visible,.technology-story a:focus-visible{outline:2px solid #9c6d43;outline-offset:5px}
@keyframes tech-copy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.tech-stage-body{grid-template-columns:65% 35%}.tech-woven-plane{width:80%;max-width:1100px}.tech-spectrum-layer{inset:0 8%}.tech-narrative{padding-left:0}.tech-chapter h3{font-size:43px}.tech-description{font-size:14px}}
@media(max-width:1000px){.tech-stage-body{grid-template-columns:60% 40%}.tech-narrative{padding-left:2%}.tech-chapter h3{font-size:27px}.tech-description{font-size:11px}.tech-chapter-nav{width:70%;gap:15px}.tech-chapter-nav button{gap:8px}.tech-chapter-nav b{font-size:9px}.tech-scroll-cue{font-size:8px}}
@media(max-width:650px){.tech-intro{padding:76px 24px 58px}.tech-intro h2{font-size:31px}.tech-intro>p:not(.tech-kicker){font-size:12px;line-height:2.3}.tech-intro>p>br{display:none}.tech-intro-scroll{margin-top:25px}.tech-scroll-story.is-ready{height:490svh}.tech-sticky{padding:19px 24px 19px;height:780px}.is-ready .tech-sticky{min-height:520px}.tech-stage-heading{font-size:8px;letter-spacing:.12em}.tech-stage-heading>span i{margin:0 8px}.tech-motion{font-size:9px}.tech-stage-body{display:grid;grid-template-columns:1fr;grid-template-rows:49% 51%;align-items:center}.tech-cinematic{margin:0 -24px;min-height:0;height:100%}.tech-spectrum-layer{inset:0 7%;padding-top:15px}.tech-visual-label{font-size:7px;margin:0 0 16px}.tech-spectrum-svg{height:110px;width:100%;overflow:hidden}.tech-spectrum-svg text{display:none}.tech-spectrum-legend{display:grid;grid-template-columns:12% 18% 20% 18% 32%;font-size:8px;text-align:center;color:#7d897d;margin-top:10px}.tech-spectrum-legend strong{font-weight:400;color:#a16b3b}.tech-material-scene{perspective:900px}.tech-woven-plane{width:80%;top:46%}.tech-scale-label{top:15%;left:10%;font-size:7px}.tech-material-label{left:10%;bottom:14%;font-size:8px;gap:9px}.tech-material-label small{font-size:6px}.tech-material-label i{width:20px}.tech-visual-note{bottom:1px;left:8%;font-size:6px;right:8%}.tech-narrative{padding:12px 0 0;align-self:center}.tech-chapter{padding:0}.tech-chapter .tech-kicker{font-size:8px;margin:0 0 12px}.tech-chapter h3{font-size:28px;line-height:1.6;margin:0 0 16px}.tech-description{font-size:11px;line-height:2.1;margin:0 0 14px}.tech-english{font-size:6px;letter-spacing:.08em}.tech-products-link{font-size:10px;margin-top:10px;padding:9px 0;max-width:230px}.tech-stage-bottom{margin-top:10px;display:block}.tech-scroll-cue{display:none}.tech-chapter-nav{width:100%;gap:13px}.tech-chapter-nav button{display:flex;flex-direction:column;gap:7px;padding:8px 0 13px}.tech-chapter-nav b{font-size:8px;letter-spacing:0}.tech-chapter-nav button>span{font-size:8px}.tech-brand-summary{padding:70px 24px}.tech-brand-summary>h2{font-size:27px;margin-bottom:35px}.tech-principles{grid-template-columns:1fr;gap:26px;margin-bottom:32px}.tech-principles>div{position:relative;padding-left:36px;padding-top:18px}.tech-principles>div>span{position:absolute;left:0;top:24px}.tech-principles h3{margin:0 0 8px;font-size:16px}.tech-principles p{font-size:12px}.tech-principles p br{display:none}.tech-brand-summary .winter-link{font-size:11px;gap:18px}}
@media(max-height:700px) and (min-width:651px){.tech-sticky{padding-top:20px;padding-bottom:18px}.tech-chapter .tech-kicker{margin-bottom:16px}.tech-chapter h3{font-size:28px;margin-bottom:18px}.tech-description{font-size:11px;margin-bottom:18px}.tech-material-label{bottom:10%}.tech-stage-bottom{margin-top:6px}}
@media(max-height:740px) and (max-width:650px){.tech-stage-body{grid-template-rows:43% 57%}.tech-chapter h3{font-size:25px;margin-bottom:10px}.tech-chapter .tech-kicker{margin-bottom:8px}.tech-description{font-size:10px;line-height:1.9;margin-bottom:8px}.tech-english{display:none}.tech-visual-label{display:none}.tech-spectrum-svg{height:86px}.tech-material-label{bottom:11%}.tech-products-link{padding:5px 0;margin-top:5px}}
@media(prefers-reduced-motion:reduce){.tech-chapter{animation:none}}
.tech-playback{display:flex;align-items:center;gap:22px}
.tech-replay{border:0;background:none;color:#7a857b;font-size:10px;cursor:pointer;padding:7px 0}
.tech-comparison-layer{position:absolute;inset:0 4% 0 6%;display:flex;align-items:center;opacity:1}
.tech-comparison-layer svg{display:block;width:100%;height:auto}
.tech-scroll-story.is-ready.is-autoplay{height:auto}
.is-autoplay .tech-sticky{position:relative;top:0;height:clamp(570px,calc(100svh - 130px),820px);min-height:570px;max-height:none}
.is-autoplay .tech-woven-plane{width:78%;top:44%}
.is-autoplay .tech-woven-canvas{box-shadow:0 1px 0 #aa819d88,0 2px 1px #34233855;outline:1px solid #be96b077;border-radius:3px}
.is-autoplay .tech-plane-edge{border:1px solid #dcb4cf38;border-radius:3px;box-shadow:none}
.is-autoplay .tech-scale-label,.is-autoplay .tech-material-label{color:#727b71;text-shadow:none}
.is-autoplay .tech-visual-note{color:#8a918b;background:none;padding:0;bottom:12px}
.is-autoplay .tech-material-label i{background:#a4b0a5}
.is-autoplay .tech-material-label{bottom:6%}
.is-autoplay .tech-scale-label{top:7%}
@media(max-width:650px){.is-autoplay .tech-sticky{height:740px;min-height:740px;padding:20px 24px}.tech-playback{gap:15px}.tech-replay,.tech-motion{font-size:9px}.is-autoplay .tech-stage-body{grid-template-rows:48% 52%}.is-autoplay .tech-woven-plane{width:76%;top:45%}.is-autoplay .tech-material-label{bottom:9%;font-size:7px}.is-autoplay .tech-material-label small{font-size:5.5px}.is-autoplay .tech-visual-note{bottom:3px;font-size:6px}.is-autoplay .tech-scale-label{top:8%}.tech-comparison-layer{inset:0 4%}.tech-comparison-layer svg text{font-size:21px}.tech-comparison-layer svg g:last-child text{font-size:15px}}
@media(min-width:651px) and (max-height:520px){.is-autoplay .tech-sticky{height:480px;min-height:480px}.is-autoplay .tech-cinematic{min-height:250px}.is-autoplay .tech-woven-plane{width:74%}.is-autoplay .tech-chapter h3{font-size:26px}.is-autoplay .tech-description{font-size:11px}}
/* Keep the material within its visual stage, with captions on clear paper. */
.tech-cinematic{overflow:hidden}
.tech-woven-plane{width:76%;top:43%}
.tech-material-label{bottom:11%}
.tech-scale-label{top:7%}
@media(max-width:650px){.tech-woven-plane{width:73%;top:45%}.tech-scale-label{top:8%}.tech-material-label{bottom:11%}}
.tech-scroll-story[data-chapter="2"] .tech-scale-label,.tech-scroll-story[data-chapter="2"] .tech-material-label{color:#f0e7d5;text-shadow:0 1px 8px #151a12}
.tech-scroll-story[data-chapter="2"] .tech-material-label i{background:#eee7d0}
.tech-scroll-story[data-chapter="2"] .tech-visual-note{color:#f6f0df;background:#17201685;padding:6px 8px;bottom:8px}
@media(min-width:651px){.tech-material-label{bottom:6%}.tech-scroll-story[data-chapter="2"] .tech-material-label{bottom:11%}}
@media(max-width:650px){.tech-scroll-story[data-chapter="2"] .tech-scale-label{top:24%}}
@media(max-width:650px) and (max-height:740px){.is-ready .tech-sticky{min-height:430px}}
@media(min-width:651px) and (max-height:520px){.is-ready .tech-sticky{min-height:240px;padding:10px 24px}.tech-stage-heading{font-size:8px}.tech-stage-body{grid-template-columns:57% 43%}.tech-cinematic{min-height:0}.tech-chapter{padding:0}.tech-chapter .tech-kicker{font-size:7px;margin-bottom:6px}.tech-chapter h3{font-size:20px;line-height:1.45;margin-bottom:8px}.tech-description{font-size:9px;line-height:1.8;margin-bottom:0}.tech-english,.tech-scroll-cue,.tech-material-label,.tech-visual-label{display:none}.tech-stage-bottom{margin-top:4px}.tech-chapter-nav{width:100%}.tech-chapter-nav button{padding:7px 0}.tech-chapter-nav b,.tech-chapter-nav button>span{font-size:8px}.tech-woven-plane{width:58%;top:47%}.tech-scale-label{top:2%;font-size:6px}.tech-visual-note{font-size:6px;bottom:0}.tech-products-link{margin:6px 0 0;padding:5px 0;font-size:9px}}
.tech-scroll-story.is-autoplay[data-chapter] .tech-visual-note{color:#858e84;background:none;padding:0;bottom:12px}
@media(max-width:650px){.tech-comparison-layer svg text{font-size:29px}.tech-comparison-layer svg g:last-child text{font-size:20px}.tech-scroll-story.is-autoplay[data-chapter] .tech-visual-note{bottom:3px}}

/* Comparison labels remain HTML text, independent of diagram scaling. */
.tech-comparison-figure{width:100%;min-width:0}
.tech-comparison-captions{display:grid;grid-template-columns:1fr 1fr;column-gap:8.47%;padding:0 2.8%;margin-top:13px;font-family:JPHEATJP,JPHEATJP,var(--sans);font-weight:400;font-synthesis:none;text-align:left}
.tech-comparison-captions p{margin:0;letter-spacing:.035em}
.tech-comparison-name{font-size:clamp(14px,1.15vw,19px);font-weight:500;color:#48564d;line-height:1.5;min-height:31px;display:flex;align-items:center}
.tech-comparison-captions .tech-comparison-brand{font-family:JPHEATLatin,var(--sans);font-size:clamp(18px,1.5vw,25px);font-weight:500;letter-spacing:.13em;color:#6d5541;line-height:1.3}
.tech-comparison-captions .tech-comparison-type{font-size:clamp(10px,.8vw,13px);color:#5f6a62;line-height:1.8;margin-top:8px}
.tech-comparison-detail{font-size:clamp(9px,.7vw,11px);color:#7b857d;line-height:1.9;margin-top:3px!important}
@media(max-width:650px){.tech-comparison-captions{column-gap:8.47%;margin-top:9px}.tech-comparison-name{font-size:12px;letter-spacing:0;min-height:23px}.tech-comparison-captions .tech-comparison-brand{font-size:16px;letter-spacing:.12em}.tech-comparison-captions .tech-comparison-type{font-size:9px;letter-spacing:0;line-height:1.8;margin-top:5px}.tech-comparison-detail{font-size:8px;letter-spacing:0!important;line-height:1.8}}

/* Legible structure caption, separate from the diagram labels. */
.tech-scroll-story.is-autoplay[data-chapter] .tech-visual-note{font-size:10px;line-height:1.7;max-width:90%;bottom:0;color:#637267}.tech-comparison-layer{padding-bottom:40px}.tech-comparison-captions .tech-comparison-detail{display:none}@media(max-width:650px){.tech-scroll-story.is-autoplay[data-chapter] .tech-visual-note{font-size:9px;bottom:0}.tech-comparison-layer{padding-bottom:40px}.tech-description{font-size:12px!important;line-height:1.95!important}.tech-chapter h3{font-size:25px!important;line-height:1.6!important}}