.approach-page{background:#0b0e0e}.approach-hero{min-height:100svh;padding:160px 7vw 60px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.chapter-label{font-size:12px;letter-spacing:.15em;color:#c3ad8d;text-transform:uppercase;margin:0 0 28px}.approach-hero h1{font-size:clamp(65px,9.5vw,150px);font-weight:250;letter-spacing:-.065em;line-height:1.02;margin:0;position:relative}.hero-description{font-size:24px;line-height:1.5;margin:35px 0}.discover{font-size:15px;display:flex;gap:45px;width:max-content;padding:18px 0;border-bottom:1px solid #c3ad8d70;position:relative}.hero-orbits{position:absolute;right:-8%;top:10%;width:70vw;height:70vw;opacity:.6;pointer-events:none;perspective:1000px}.hero-orbits i{position:absolute;inset:12%;border:1px solid #d3b18470;border-radius:50%;box-shadow:0 0 35px #d3b18408;animation:orbit-turn 19s linear infinite}.hero-orbits i:nth-child(2){inset:5% 20%;animation-delay:-6s}.hero-orbits i:nth-child(3){inset:20% 3%;animation-delay:-12s}.hero-orbits>span{position:absolute;top:48%;left:48%;font-size:40px;color:#ead6b3}@keyframes orbit-turn{from{transform:rotateZ(0deg) rotateY(55deg) rotateX(25deg)}to{transform:rotateZ(360deg) rotateY(55deg) rotateX(25deg)}}
.flow-section,.adapt-section,.system-section{padding:120px 7vw}.flow-section{background:#e9e5dc;color:#171d1b}.flow-section em{color:#6b7369}.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:65px}.flow-steps article{border-top:1px solid #171d1b55;padding-top:20px}.flow-steps span{font-size:11px;letter-spacing:.1em}.flow-steps h3{font-size:38px;margin:28px 0 20px}.flow-steps p{font-size:18px;line-height:1.5;color:#505650}.tech-chapter{height:180svh;position:relative;border-bottom:1px solid #ffffff1a}.tech-stage{position:sticky;top:0;height:100svh;min-height:620px;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:100px 7vw 50px;overflow:hidden}.tech-copy{position:relative;z-index:2}.tech-copy h2{font-size:clamp(42px,5.3vw,80px);max-width:650px}.tech-copy h3{font-size:23px;color:#d4b48e;margin:30px 0 18px}.tech-copy>p:not(.chapter-label){font-size:20px;line-height:1.55;max-width:550px}.tech-copy .support-copy{color:#9faaa4;font-size:16px!important}.media-open{border:0;border-bottom:1px solid #a79a84;background:none;padding:14px 0;font-size:16px;display:flex;gap:45px;margin-top:25px}.tech-media{margin:0;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:450px;perspective:1000px}.tech-media img{position:relative;max-height:58svh;width:auto;max-width:100%;box-shadow:0 30px 70px #0008;border:1px solid #ffffff20;border-radius:8px;will-change:transform}.attention .tech-media img{width:260px}.voice .tech-media img{width:260px;max-height:62svh;border-radius:22px}.tech-media figcaption{position:relative;font-size:11px;color:#b1b7b1;letter-spacing:.04em;margin-top:20px}.media-halo{position:absolute;width:400px;height:400px;border:1px solid #c1a77e44;border-radius:50%;box-shadow:0 0 100px #c1a77e0d,inset 0 0 100px #c1a77e0d;animation:halo-breathe 7s ease-in-out infinite}.voice{background:#151124}.voice .media-halo{border-color:#9a81ec70;box-shadow:0 0 100px #9467fa19}.play .tech-stage{grid-template-columns:.85fr 1.15fr}.play .tech-media{height:100%;min-height:0}.play .tech-media img{max-height:80svh;width:100%;height:100%;object-fit:cover;object-position:center 64%;border-radius:4px}.play .media-halo{display:none}.chapter-meter{width:100%;max-width:360px;height:2px;background:#ffffff15;margin-top:35px}.chapter-meter i{display:block;height:100%;background:#9dff00;transform-origin:left;transform:scaleX(0)}@keyframes halo-breathe{50%{transform:scale(1.07);opacity:.45}}
.adapt-section{background:#2523e8;color:#fff}.adapt-section em{color:#c9c9ff}.adapt-section .chapter-label{color:#c9c9ff}.adapt-intro{font-size:22px;line-height:1.5;max-width:690px}.response-options{display:flex;gap:15px;flex-wrap:wrap;margin:50px 0 30px}.response-options button{border:1px solid #ffffff55;border-radius:40px;background:none;padding:17px 25px;font-size:16px}.response-options button[aria-pressed=true]{color:#2623cc;background:#f4f2ed}.response-result{border-top:1px solid #ffffff50;padding-top:35px;min-height:215px}.response-result>span{font-size:12px;letter-spacing:.1em;color:#c9c9ff}.response-result h3{font-size:42px;margin:20px 0}.response-result p{font-size:20px;line-height:1.5;max-width:none}.direction-note{font-size:12px;color:#c9c9ff}.system-links{display:flex;align-items:center;gap:4vw;margin:60px 0;font-size:clamp(28px,5vw,70px)}.system-links i{font-style:normal;font-size:25px;color:#d4b48e}.system-section>p{font-size:22px;line-height:1.5;max-width:700px}.contact{margin:0}.approach-page [data-reveal]{transition:opacity .8s,transform .8s}.approach-page .pending-reveal{opacity:0;transform:translateY(35px)}#media-dialog{background:#101413;color:#eee;border:1px solid #ffffff40;border-radius:15px;max-width:92vw;max-height:94svh;padding:25px}#media-dialog::backdrop{background:#000d}#media-dialog img{display:block;max-height:73svh;max-width:80vw;object-fit:contain;margin:25px auto}#media-dialog p{font-size:13px}.close-media{display:block;margin-left:auto;background:#eee6d8;color:#151817;border:0;border-radius:25px;padding:12px 20px}
@media(max-width:800px){.approach-hero{padding:140px 6vw 70px}.hero-description{font-size:20px}.hero-orbits{width:110vw;height:110vw;right:-40%;top:17%}.flow-section,.adapt-section,.system-section{padding:80px 6vw}.flow-steps{grid-template-columns:1fr 1fr}.tech-chapter{height:auto}.tech-stage,.play .tech-stage{position:relative;height:auto;min-height:0;grid-template-columns:1fr;padding:85px 6vw 60px;gap:35px}.tech-copy h2{font-size:48px}.tech-media{min-height:400px}.tech-media img{max-height:480px}.play .tech-media img{height:570px;max-height:none}.media-halo{width:300px;height:300px}.chapter-meter{display:none}.response-result h3{font-size:34px}.system-links{gap:20px;font-size:29px}}
@media(prefers-reduced-motion:reduce){.hero-orbits i,.media-halo{animation:none}.pending-reveal{opacity:1!important;transform:none!important}.tech-chapter{height:auto}.tech-stage{position:relative}.tech-media img{transform:none!important}}

/* Consistent portrait media frames across all three technology chapters. */
.tech-stage,.play .tech-stage{grid-template-columns:1fr 1fr}
.tech-media,.play .tech-media{height:auto;min-height:450px}
.tech-media img,.attention .tech-media img,.voice .tech-media img,.play .tech-media img{width:300px;height:auto;aspect-ratio:9/16;max-width:100%;max-height:none;object-fit:contain;object-position:center;border-radius:12px;background:#080a0a}
@media(max-width:800px){.tech-stage,.play .tech-stage{grid-template-columns:1fr}.tech-media img,.attention .tech-media img,.voice .tech-media img,.play .tech-media img{width:270px;height:auto;max-height:none}}
@media(min-width:801px) and (max-height:750px){.tech-media img,.attention .tech-media img,.voice .tech-media img,.play .tech-media img{width:240px}}

/* Crop the source letterboxing through the viewport, preserving detection pixels. */
.attention-window{position:relative;width:300px;max-width:100%;aspect-ratio:935/1020;overflow:hidden;will-change:transform}
.attention .attention-window img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:auto;max-height:none;margin-top:-33.69%;border:0;border-radius:0;box-shadow:none;background:none}
.attention .media-halo{display:none}
@media(max-width:800px){.attention-window{width:270px}}
@media(min-width:801px) and (max-height:750px){.attention-window{width:240px}}

/* One shared portrait composition and motion treatment for all technologies. */
.tech-chapter{--halo:#bd9f72;--halo-glow:#bd9f7218}.voice{--halo:#a18ae9;--halo-glow:#9a81ec20}.play{--halo:#bd9f72}
.tech-media,.play .tech-media{min-height:450px;height:auto;isolation:isolate}
.media-window,.attention-window{position:relative;z-index:1;width:300px;max-width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:14px;border:0;box-shadow:0 25px 65px #0006;will-change:transform}
.tech-media .media-window img,.attention .attention-window img,.voice .media-window img,.play .media-window img{display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:cover;margin:0;border:0;border-radius:0;box-shadow:none;transform:none;animation:media-breathe 8s ease-in-out infinite}
.attention .attention-window img{position:absolute;width:auto;height:164.7%;max-width:none;left:50%;top:-30.88%;object-fit:fill;transform:translateX(-50%);animation:attention-breathe 8s ease-in-out infinite}
.tech-media .media-halo,.attention .media-halo,.play .media-halo{display:block;z-index:0;width:400px;height:400px;max-width:110%;border:1px solid var(--halo);opacity:.36;box-shadow:0 0 95px var(--halo-glow),inset 0 0 75px var(--halo-glow);animation:halo-breathe 6s ease-in-out infinite}
.media-halo:after{content:'';position:absolute;inset:-14px;border:1px solid var(--halo);border-radius:50%;opacity:.2;transform:rotateX(28deg)}
@keyframes media-breathe{0%,100%{transform:scale(1.015) translateY(2px)}50%{transform:scale(1.03) translateY(-2px)}}
@keyframes attention-breathe{0%,100%{transform:translateX(-50%) scale(1.008)}50%{transform:translateX(-50%) scale(1.025)}}
@keyframes halo-breathe{0%,100%{transform:scale(.95);opacity:.28}50%{transform:scale(1.075);opacity:.58}}
@media(max-width:800px){.media-window,.attention-window{width:270px}.tech-media .media-halo{width:340px;height:340px}}
@media(min-width:801px) and (max-height:750px){.media-window,.attention-window{width:240px}.tech-media .media-halo{width:340px;height:340px}}
@media(prefers-reduced-motion:reduce){.tech-media .media-window img,.attention .attention-window img,.tech-media .media-halo{animation:none}.media-window{transform:none!important}}

/* Explicit media dimensions avoid intrinsic-size / percentage-transform differences in WebKit. */
.media-window,.attention-window{width:300px;height:533.333px;flex-shrink:0}
.attention .attention-window img{width:162.49%;height:164.7%;left:-31.245%;top:-30.88%;transform:scale(1.008);transform-origin:center;animation:attention-breathe-fixed 8s ease-in-out infinite}
@keyframes attention-breathe-fixed{0%,100%{transform:scale(1.008)}50%{transform:scale(1.025)}}
@media(max-width:800px){.media-window,.attention-window{width:270px;height:480px}}
@media(min-width:801px) and (max-height:750px){.media-window,.attention-window{width:240px;height:426.667px}}
@media(prefers-reduced-motion:reduce){.attention .attention-window img{animation:none}}