/* Solar yellow is reserved for light, active states and a few decisive actions. */
:root { --solar: #f4d447; --solar-dark: #806500; }
::selection { background: #f4d44770; color: var(--navy); }
.hero-eyebrow .status-dot, .measurement-badge .status-dot {
  background: var(--solar); box-shadow: 0 0 0 4px #f4d44718;
}
.hero-actions .button.primary { background: var(--solar); color: var(--navy); box-shadow: 0 5px 18px #b3961617; }
.nav-cta svg { color: var(--solar); }
.desktop-nav a:after { background: #b19012; height: 2px; }
.reading-progress { background: linear-gradient(90deg, var(--blue) 84%, var(--solar) 84%); }
.hero .scroll-cue i { background: #f4d44730; border-color: #d7c779; }
.hero-stage .label-sun { color: #765b09; }
.hero-stage .label-sun i { background: #b48f05; box-shadow: 0 0 0 4px #efd34024; }
.hero-stage .label-sun>span { color: #806b32; }
.product-tabs button[aria-selected=true]:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--solar);
}
.product-tabs button[aria-selected=true]>span, .surface-options button[aria-pressed=true]>span { color: var(--solar); }
.story-step.active .step-number { color: #806500; background: #f4d44730; }
.story-dots i.active { background: #be9e1e; }
.coating-edge { position: absolute; inset: 0; border-left: 2px solid var(--solar); transform: translateX(12%); transition: transform 1.7s var(--ease); }
.in-view .coating-edge { transform: translateX(78%); }
.polar-copy .button.light, .contact-actions .button.light { background: var(--solar); color: var(--navy); }
.measurement-badge { border-left: 2px solid var(--solar); }
.case-index { border-left: 2px solid var(--solar); }
.light-bands i { background: linear-gradient(90deg, transparent, #d1ad25 15%, #d8b72d 42%, #9ccae43a 43%, #a9cce167 85%, transparent); }
.footer-description { max-width: 710px; margin: 0 0 32px; font-size: 13px; color: var(--muted); }
.footer-description .text-link { display: inline-block; margin-top: 13px; font-size: 12px; }
.application-sectors { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.application-sectors>span { color: var(--ink); margin-right: 12px; }
.responsive-table thead th, .price-table thead th { color: #536d82; }
.responsive-table td, .recommendation-description { color: #4e677c; }

/* Crossfade into the lit geometry only after its first successful render. */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease); }
.hero-stage>.building-svg { transition: opacity 1s var(--ease); }
.hero-stage.webgl-ready .hero-canvas { opacity: 1; }
.hero-stage.webgl-ready>.building-svg { opacity: 0; }
.hero-stage.webgl-ready>.building-svg .thermal-wave { animation-play-state: paused; }
.hero-stage.webgl-ready .scene-orbit { opacity: .45; }
.scene-label, .scene-caption { z-index: 2; }

/* A manufactured thin film: cut edge, adhesive backing and a directional finish. */
.material-object { --light-x: 44%; --light-y: 24%; }
.material-sheet.front {
  border: 1px solid #f5fcff; border-top-color: #fff; border-bottom-color: #9ab8ca;
  box-shadow: 0 1px 0 #fff, 0 3px 0 #adc5d4, 0 4px 0 #f9ffff, 0 6px 0 #8ca9bc, 2px 20px 32px #12314923;
  transition: transform .28s var(--ease);
}
.material-sheet.back { border: 1px solid #a8bac8; background: linear-gradient(145deg,#88a3b8,#d1e1e9 37%,#b1c7d4); }
.material-grain { background-image: repeating-linear-gradient(110deg,transparent 0 2px,#aec2d62b 2px 3px),repeating-linear-gradient(20deg,transparent 0 6px,#fff3 6px 7px); opacity: .58; }
.material-sheen { position: absolute; inset: 0; background: linear-gradient(112deg,transparent 14%,#fff0 27%,#ffffffdb 44%,#fff0 62%,transparent 86%); transform: translateX(var(--shine,0%)); transition: transform .5s var(--ease); mix-blend-mode: soft-light; }
.material-corner { position: absolute; right: -1px; top: -1px; width: 35px; height: 35px; background: linear-gradient(45deg,#92adbe,#e4f4fb 48%,#fff 51%,#e7f2f8 54%); clip-path: polygon(0 0,100% 100%,100% 0); }
.material-registration { position: absolute; left: 24px; top: 19px; font: 5px monospace; font-style: normal; letter-spacing: .12em; color: #557589; }
.material-registration:before { content: '+'; font-size: 12px; margin-right: 8px; color: #819cad; }
.material-sheet.front>span { padding-top: 9px; border-top: 1px solid #8aa5b644; }
.material-shadow { opacity: .72; filter: blur(17px); transition: transform .4s var(--ease); }
.polar-art .material-sheet.front { background: radial-gradient(ellipse at var(--light-x) var(--light-y),#fff 0%,#e2f1f8 36%,#b5cddb 100%); }
.polar-art .material-sheet.back { box-shadow: 0 3px 0 #738d9e,0 7px 18px #0003; }
.glacier-art .material-sheet.front { background: radial-gradient(ellipse at var(--light-x) var(--light-y),#fff 0%,#d8f0fa 42%,#a6cddd); }
.material-object.textile .material-corner { display: none; }
.material-object.textile .material-grain { opacity: .25; }
.layer-model { --spread: 1; }
.layer-model .layer { transition: none; }
.layer-model .layer-0 { transform: translateY(calc(-110px * var(--spread))) rotateX(57deg) rotateZ(-28deg); }
.layer-model .layer-1 { transform: translateY(calc(-60px * var(--spread))) rotateX(57deg) rotateZ(-28deg); }
.layer-model .layer-2 { transform: translateY(calc(-10px * var(--spread))) rotateX(57deg) rotateZ(-28deg); }
.layer-model .layer-3 { transform: translateY(calc(40px * var(--spread))) rotateX(57deg) rotateZ(-28deg); }
.layer-labels>span { transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--layer,0)*65ms); }
.js-motion .textile-art:not(.visible) .layer-labels>span { opacity: 0; transform: translateX(8px); }

/* Energy motion runs only while the relevant scene is visible. */
.building-svg .thermal-wave, .hero .thermal-wave, .light-bands i { animation-play-state: paused; }
.hero.in-view:not(:has(.webgl-ready)) .thermal-wave,
.story-stage.in-view .thermal-wave, .glass-scene.in-view .light-bands i { animation-play-state: running; }
@media (hover:hover) and (pointer:fine) {
  .hero-actions .button.primary:hover, .polar-copy .button.light:hover, .contact-actions .button.light:hover { background: #ffe267; }
  .product-art:hover .material-sheen { transform: translateX(15%); }
  .product-art:hover .material-sheet.front { transform: rotateX(51deg) rotateY(2deg) rotateZ(-28deg) translateZ(43px); }
  .product-art:hover .material-shadow { transform: rotateX(53deg) rotateZ(-29deg) translateY(4px); }
}
@media (max-width:640px) {
  .footer-description { font-size: 12px; margin-bottom: 25px; }
  .footer-description .text-link { font-size: 11px; }
  .application-sectors { font-size: 11px; line-height: 1.8; }
  .application-sectors>span { display: block; margin-bottom: 6px; }
  .material-registration { font-size: 4px; top: 12px; left: 16px; }
  .material-corner { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-canvas { display: none; }
  .hero-stage.webgl-ready>.building-svg { opacity: 1; }
  .layer-model { --spread: 1!important; }
  .layer-labels>span { opacity: 1!important; transform: none!important; }
}