@font-face{font-family:'Instrument Serif Italic';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-italic.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-bold.ttf') format('truetype')}
/* Immersive introduction: the artwork moves, the text keeps its natural proportions. */
.header{position:fixed;top:0;left:0;right:0}
.hero--immersive{padding:0;max-width:none}
.hero-stage{--kla-light-angle:108deg;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(760px,100svh,960px);padding:150px var(--page) 28px;background:#fff;color:var(--navy)}
.hero-camera{position:absolute;inset:-7%;z-index:-3;pointer-events:none;transform:translate3d(var(--hero-pan-x,0px),calc(var(--hero-pan-y,0px) + var(--hero-scroll-y,0px)),0)}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.04);transform-origin:72% 50%}
.hero-atmosphere{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero-atmosphere:before{content:'';position:absolute;inset:-25% -20% -15% 38%;background:radial-gradient(ellipse at 60% 65%,rgba(210,187,142,.19),rgba(210,187,142,.035) 35%,transparent 65%);mix-blend-mode:multiply;opacity:0}
.hero-atmosphere:after{content:'';position:absolute;inset:-30% -20% -30% 25%;background:linear-gradient(var(--kla-light-angle),transparent 34%,rgba(255,255,255,.1) 42%,rgba(255,255,255,.65) 48%,rgba(255,255,255,.2) 53%,transparent 64%);mix-blend-mode:screen;opacity:0}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.9) 31%,rgba(255,255,255,.35) 62%,rgba(255,255,255,.04)),linear-gradient(0deg,#fff,rgba(255,255,255,.55) 16%,transparent 40%)}
.hero-welcome{align-self:center;width:100%;margin:0 0 12px;text-align:center;font-variant-caps:all-small-caps;font-size:20px;line-height:1.4;font-weight:400;letter-spacing:.09em;color:var(--navy)}
.hero-welcome>span,.hero-welcome>strong{display:inline-block}
.hero-welcome>strong{font-weight:700;color:#765622}
.hero-stage .hero-copy{text-align:center;margin:0 auto;padding:16px 0 30px;max-width:740px;width:100%}
.hero-stage h1{font-size:clamp(44px,5.6vw,80px);line-height:1.17;color:var(--navy);text-wrap:initial;letter-spacing:normal}
.hero-stage h1 em{color:var(--gold);font-family:'Instrument Serif Italic',Georgia,serif;font-weight:400;font-size:1.16em;line-height:1;font-style:normal;white-space:nowrap}
.hero-stage .hero-subtitle{color:var(--navy);font-size:20px;line-height:1.5;margin-top:20px}
.hero-stage .hero-description{color:var(--navy-soft);font-weight:600;max-width:560px;margin:14px auto 0;line-height:1.85}
.hero-stage .hero-description>span{display:block}
.hero-stage .hero-description em{color:#765622;font-family:'Instrument Serif Italic',Georgia,serif;font-size:1.16em;font-style:normal;font-weight:600;letter-spacing:.015em}
.hero-stage .hero-actions{justify-content:center;margin-top:24px;gap:30px}
.hero-stage .button{background:var(--navy);color:#fff;border-color:var(--navy)}
.hero-stage .button .arrow{color:var(--champagne)}
.hero-stage .button:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.hero-stage .text-link{color:var(--navy);border-color:var(--gold)}
.hero-stage .text-link span{color:var(--gold)}
.hero-stage .hero-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin-top:auto;padding:25px 0 0;min-height:58px;border-top:1px solid rgba(16,38,56,.16);border-bottom:0;color:var(--muted);font-size:14px;letter-spacing:1.5px;gap:24px}
.hero-topics{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px clamp(36px,5vw,84px)}
.hero-topics>span{position:relative;white-space:nowrap;transition:color .38s ease}
.hero-topics>span:after{content:'';position:absolute;right:0;bottom:-7px;left:0;height:1px;background:var(--gold);opacity:.72;transform:scaleX(0);transform-origin:center;transition:transform .38s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.hero-topics>span:hover{color:var(--gold)}.hero-topics>span:hover:after{transform:scaleX(1)}}
.hero-stage .hero-footer>a{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:14px;width:auto;margin:0;color:var(--navy);font-size:14px;letter-spacing:0;white-space:nowrap}
.hero-stage .hero-footer>a span{margin-left:0;color:var(--gold)}
.hero-stage .hero-motion-toggle{top:auto;bottom:114px;right:var(--page);background:rgba(255,255,255,.88);color:var(--navy);border-color:rgba(154,121,64,.45);backdrop-filter:blur(8px);font-size:14px}
.hero-stage .hero-motion-toggle:hover{background:#fffdf8}
.film-shell{width:100%;max-width:1440px;margin-inline:auto;padding:64px var(--page) 0;display:grid;place-items:center}
.film-shell>.hero-visual{display:block;width:100%;max-width:1240px;min-width:0;height:auto;aspect-ratio:16/9;margin:0 auto;transform-origin:center center;box-shadow:0 24px 64px rgba(16,38,56,.1)}
.film-shell .hero-film,.film-shell .hero-visual>img{object-position:center center}

/* KLA's own monogram forms a moving signature around the centered promise. */
.hero-signature-frame{position:relative;width:100%;max-width:640px;margin:26px auto 0}
.hero-signature{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;min-height:188px;margin:0;padding:38px 30px;background:rgba(255,255,255,.42);border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hero-signature:after{content:'';position:absolute;inset:-45% -30%;z-index:3;pointer-events:none;background:linear-gradient(var(--kla-light-angle),transparent 37%,rgba(255,255,255,.08) 43%,rgba(255,255,255,.98) 49%,rgba(255,255,255,.34) 55%,transparent 62%);mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(154,121,64,.14));opacity:0;transform:translate3d(-65%,0,0)}
.signature-corner{position:absolute;z-index:4;width:24px;height:24px;box-sizing:border-box;pointer-events:none;opacity:.72;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.signature-corner--gold{top:-12px;left:-12px;color:var(--gold);border-top:2px solid currentColor;border-left:2px solid currentColor;animation:kla-corner-float-gold 8s cubic-bezier(.45,0,.55,1) infinite}
.signature-corner--navy{right:-12px;bottom:-12px;color:var(--navy);border-right:2px solid currentColor;border-bottom:2px solid currentColor;animation:kla-corner-float-navy 8.8s -2s cubic-bezier(.45,0,.55,1) infinite}
.signature-monograms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-signature-copy{position:relative;z-index:2;margin-inline:auto;text-align:center;color:var(--navy);font-variant-caps:all-small-caps;pointer-events:none}
.hero-signature-copy>span{display:block;font-size:18px;line-height:1.3;font-weight:400;letter-spacing:.07em;color:#795e31}
.hero-signature-copy>strong{display:block;margin-top:9px;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:.045em}
.signature-line{display:block;overflow:hidden;padding:6px 8px .06em;margin:-6px -8px -.06em}
.signature-line>span{display:block}
.signature-word{display:inline-block;white-space:nowrap}
.signature-letter{display:inline-block;transform-origin:center center}
.signature-word-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:851px) and (max-height:850px){
  .hero-stage{padding-top:136px}
  .hero-stage .hero-copy{padding-top:12px;padding-bottom:24px}
  .hero-stage h1{font-size:clamp(44px,5.2vw,68px);line-height:1.14}
  .hero-stage .hero-subtitle{margin-top:16px}
  .hero-stage .hero-description{margin-top:10px;line-height:1.7}
  .hero-stage .hero-actions{margin-top:20px}
  .hero-signature-frame{margin-top:24px}.hero-signature{min-height:170px;padding-block:30px}
}

@media(min-width:1800px){.hero-stage{padding-left:max(var(--page),calc((100vw - 1600px)/2));padding-right:max(var(--page),calc((100vw - 1600px)/2))}}
@media(max-width:1150px){.hero-stage .hero-actions{gap:22px}.hero-stage .hero-copy{max-width:670px}}
@media(max-width:850px){
  .header{top:0}
  .hero-stage{min-height:820px;padding-top:137px}
  .hero-backdrop{object-position:63% 50%}
  .hero-shade{background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.78) 58%,rgba(255,255,255,.24)),linear-gradient(0deg,#fff,transparent 42%)}
  .hero-stage .hero-copy{max-width:620px;padding-top:18px;padding-bottom:35px}
  .hero-stage h1{font-size:clamp(44px,7.3vw,62px)}
  .hero-stage .hero-footer{grid-template-columns:1fr;gap:20px;font-size:12px;letter-spacing:1px}
  .hero-topics{grid-column:1;justify-self:center}
  .hero-stage .hero-footer>a{grid-column:1;justify-self:center;font-size:12px}
  .hero-stage .hero-motion-toggle{bottom:100px}
}
@media(max-width:600px){
  .hero-stage{min-height:780px;min-height:max(780px,100svh);padding:122px var(--page) 25px}
  .hero-backdrop{object-position:64% 50%}
  .hero-shade{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.67)),linear-gradient(0deg,#fff,transparent 45%)}
  .hero-stage .hero-copy{max-width:100%;padding:12px 0 28px}
  .hero-stage h1{font-size:clamp(34px,9.3vw,50px);line-height:1.2}
  .hero-stage .hero-subtitle{font-size:18px;line-height:1.6;margin-top:23px}
  .hero-stage .hero-description{font-size:16px;line-height:1.85;margin-top:15px;max-width:390px}
  .hero-stage .hero-actions{align-items:center;gap:12px;margin-top:25px}
  .hero-stage .button{gap:24px}
  .hero-signature-frame{margin-top:24px}.hero-signature{min-height:176px;padding:32px 20px}
  .signature-corner{width:20px;height:20px}
  .hero-signature-copy>strong{font-size:clamp(20px,5.5vw,24px);line-height:1.4}
  .hero-stage .hero-motion-toggle{position:relative;inset:auto;align-self:flex-end;flex-shrink:0;margin:0 0 24px}
  .hero-stage .hero-footer{gap:18px;padding-top:21px;font-size:12px;min-height:0}
  .hero-topics{width:100%;max-width:360px;gap:12px clamp(9px,calc(10vw - 23px),28px);letter-spacing:0}
  .hero-stage .hero-footer>a{justify-content:center;padding-top:0;font-size:12px}
  .film-shell{padding-top:32px}
  .film-shell>.hero-visual{aspect-ratio:4/3}
  .film-shell .image-caption{left:20px;right:20px;bottom:22px}
  .film-shell .image-caption p{font-size:clamp(22px,6vw,30px);margin-top:10px;line-height:1.2}
  .film-shell .image-caption>span:first-child{display:block;font-size:12px;letter-spacing:1px;max-width:240px}
}

@media(prefers-reduced-motion:no-preference){
  .hero-welcome>span{animation:kla-welcome-reveal 1.2s .1s both}
  .hero-welcome>strong{animation:kla-welcome-reveal 1.3s .28s both}
  .hero-signature{animation:kla-entrance 1.1s .42s backwards}
  .signature-line>span{animation:kla-signature-reveal 1.4s cubic-bezier(.16,1,.3,1) both}
  .signature-line--intro>span{animation-delay:.65s}
  .signature-line--first>span{animation-delay:.87s}
  .hero-stage.is-background-ready .hero-backdrop{animation:kla-hero-drift 12s linear infinite alternate;animation-play-state:paused}
  .hero-stage.is-background-ready .hero-atmosphere:before{animation:kla-ambient-glow 7s ease-in-out infinite alternate;animation-play-state:paused}
  .hero-stage.is-background-ready .hero-atmosphere:after{animation:kla-light-pass 9s ease-in-out infinite;animation-play-state:paused}
  .hero-stage.is-background-ready .hero-signature:after{animation:kla-signature-light-pass 9s ease-in-out 1.6s infinite;animation-play-state:paused}
  .hero-stage.is-background-ready .hero-footer>a span{display:inline-block;animation:kla-scroll-invitation 1.8s ease-in-out infinite;animation-play-state:paused}
  .hero-stage.is-background-playing .hero-backdrop,.hero-stage.is-background-playing .hero-atmosphere:before,.hero-stage.is-background-playing .hero-atmosphere:after,.hero-stage.is-background-playing .hero-signature:after,.hero-stage.is-background-playing .hero-footer>a span{animation-play-state:running}
}
@keyframes kla-welcome-reveal{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes kla-signature-reveal{from{opacity:0;transform:translate3d(0,105%,0);filter:blur(3px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes kla-hero-drift{from{transform:scale(1.04) translate3d(-1.2%,.3%,0)}to{transform:scale(1.18) translate3d(1.6%,-.6%,0)}}
@keyframes kla-ambient-glow{from{opacity:.3;transform:translate3d(-9%,5%,0) scale(.95)}to{opacity:.85;transform:translate3d(6%,-5%,0) scale(1.15)}}
@keyframes kla-light-pass{0%{opacity:0;transform:translate3d(-45%,0,0)}16%{opacity:.55}65%{opacity:.8}100%{opacity:0;transform:translate3d(65%,0,0)}}
@keyframes kla-signature-light-pass{0%{opacity:0;transform:translate3d(-65%,0,0)}14%{opacity:.86}58%{opacity:.62}100%{opacity:0;transform:translate3d(65%,0,0)}}
@keyframes kla-corner-float-gold{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,6px,0)}}
@keyframes kla-corner-float-navy{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-6px,-6px,0)}}
@keyframes kla-scroll-invitation{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.hero-camera{transform:none}.hero-backdrop{animation:none;transform:none}.hero-atmosphere{display:none}.hero-motion-toggle{display:none!important}.hero-signature:after{display:none}.signature-corner{animation:none}}