/* Technology page hero: flexible film. Same layout as the earlier hero, colours of the unified page. Claude 20261107. */
#technology-claude-hero{color:#292929;--serif:JPHEATLatin,JPHEATJP,JPHEATHan,sans-serif;--technical:JPHEATLatin,JPHEATJP,JPHEATHan,sans-serif;background:#fff}
#technology-claude-hero .ir-hero{position:relative;background:radial-gradient(ellipse at 50% 72%,#fff 0%,#faf9f6 55%,#f2f1ee 100%);min-height:min(100vh,980px);padding:110px 24px 300px;text-align:center;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;scroll-margin-top:130px}
#technology-claude-hero .ir-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
#technology-claude-hero canvas[data-ir="hero"]{z-index:-2}
#technology-claude-hero .ir-hero3d{z-index:-1}
#technology-claude-hero .ir-kicker{font:10px var(--technical);letter-spacing:.18em;color:#717171;line-height:1.7;margin:0;position:relative;z-index:1}
#technology-claude-hero .ir-kicker i{font-style:normal;color:#c7401f;margin:0 12px}
#technology-claude-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:.045em;font-size:clamp(32px,3.6vw,50px);line-height:1.65;margin:27px auto 28px;max-width:20em;position:relative;z-index:1;color:#292929}
#technology-claude-hero p.ir-lead{font-size:13px;line-height:2.5;color:#686868;letter-spacing:.04em;margin:0 auto;max-width:34em;position:relative;z-index:1}
#technology-claude-hero .ir-scroll{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:10px;letter-spacing:.12em;color:#8f8f8f;margin-top:32px;position:relative;z-index:1;text-decoration:none}
#technology-claude-hero .ir-scroll i{font-style:normal;font-size:20px;font-weight:200;color:#c7401f}
#technology-claude-hero .ir-tate{position:absolute;top:170px;margin:0;writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;color:#9a9a9a;line-height:1;z-index:1}
#technology-claude-hero .ir-tate-l{left:max(4.5vw,24px)}
#technology-claude-hero .ir-tate-r{right:max(4.5vw,24px);color:#c7401f}
#technology-claude-hero .ir-hero-frame{position:absolute;left:50%;top:150px;width:min(760px,80vw);height:360px;transform:translateX(-50%);pointer-events:none}
#technology-claude-hero .ir-hero-frame i{position:absolute;width:18px;height:18px;border:0 solid rgba(41,45,42,.45)}
#technology-claude-hero .ir-hero-frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
#technology-claude-hero .ir-hero-frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
#technology-claude-hero .ir-hero-frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
#technology-claude-hero .ir-hero-frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
#technology-claude-hero .ir-hero-frame::before,#technology-claude-hero .ir-hero-frame::after{content:"";position:absolute;left:50%;width:1px;height:8px;background:rgba(41,45,42,.35)}
#technology-claude-hero .ir-hero-frame::before{top:-14px}
#technology-claude-hero .ir-hero-frame::after{bottom:-14px}
#technology-claude-hero .ir-motion{background:transparent;border:0;border-bottom:1px solid #ababab;color:#747474;font-size:10px;padding:3px 0 7px;cursor:pointer;letter-spacing:.06em;font-family:inherit;white-space:nowrap}
#technology-claude-hero .ir-hero>.ir-motion{position:absolute;top:20px;right:4.5%;z-index:4}
#technology-claude-hero .ir-depth-caption{position:absolute;top:7%;left:5%;right:5%;text-align:center;opacity:var(--depth-opacity,0);pointer-events:none;color:#343434;z-index:1}
#technology-claude-hero .ir-depth-caption span{font-size:11px;letter-spacing:.18em;color:#c7401f}
#technology-claude-hero .ir-depth-caption p{font-size:clamp(19px,2.4vw,32px);font-weight:400;margin:15px 0 10px;letter-spacing:.06em}
#technology-claude-hero .ir-depth-caption small{font-size:10px;color:#8c8984}
/* Scroll takes the camera lower and closer while the intro text fades. */
#technology-claude-hero.ir-scroll-3d{position:relative;height:calc(220svh + 90px);--intro-opacity:1;--intro-shift:0px;--depth-opacity:0}
#technology-claude-hero.ir-scroll-3d .ir-hero{position:sticky;top:var(--hero-top,130px);min-height:min(100vh,980px);padding:45px 24px 300px}
#technology-claude-hero.ir-scroll-3d .ir-hero>.ir-kicker,#technology-claude-hero.ir-scroll-3d .ir-hero>h1,#technology-claude-hero.ir-scroll-3d .ir-hero>.ir-lead,#technology-claude-hero.ir-scroll-3d .ir-hero>.ir-scroll,#technology-claude-hero.ir-scroll-3d .ir-hero>.ir-hero-frame{opacity:var(--intro-opacity);translate:0 var(--intro-shift)}
#technology-claude-hero.ir-scroll-3d h1{margin:18px auto 20px;font-size:clamp(30px,3.3vw,46px)}
#technology-claude-hero.ir-scroll-3d p.ir-lead{line-height:2.2}
#technology-claude-hero.ir-scroll-3d .ir-scroll{margin-top:18px}
@media(max-width:900px){
 #technology-claude-hero .ir-tate,#technology-claude-hero .ir-hero-frame{display:none}
 #technology-claude-hero .ir-hero{min-height:0;padding:80px 20px 260px;scroll-margin-top:90px}
}
@media(max-width:640px){
 #technology-claude-hero.ir-scroll-3d{height:calc(210svh + 180px)}
 #technology-claude-hero.ir-scroll-3d .ir-hero{padding:58px 20px 300px;min-height:min(100vh,980px)}
 #technology-claude-hero.ir-scroll-3d h1{font-size:27px;line-height:1.55;margin:18px auto}
 #technology-claude-hero.ir-scroll-3d p.ir-lead{font-size:11px;line-height:2.1;max-width:29em}
 #technology-claude-hero .ir-depth-caption{top:12%}
}
@media(max-width:480px){
 #technology-claude-hero h1{font-size:29px;letter-spacing:.025em}
 #technology-claude-hero p.ir-lead{font-size:12px;line-height:2.3;max-width:29em}
 #technology-claude-hero p.ir-lead br{display:none}
}