/* Material and motion layer over the approved Inter / sharp industrial layout. */
:root {
  --fx-ice: #78c8ff;
  --fx-blue: rgb(31 94 255 / .16);
  --fx-grid: rgb(53 82 122 / .055);
  --fx-shadow: rgb(24 45 77 / .13);
  --fx-deep-shadow: rgb(19 42 75 / .2);
  --fx-metal: linear-gradient(125deg, #ffffff 0%, #eef2f8 32%, #ffffff 51%, #e7edf6 79%, #f9fbff 100%);
  --fx-chrome: linear-gradient(105deg, #152333 0%, #546a82 22%, #203247 40%, #667b92 51%, #203247 64%, #3d5571 82%, #162638 100%);
  --fx-frame: linear-gradient(130deg, #aebdd0, #ffffff 28%, #becbda 48%, #ffffff 66%, #879db7);
}
:root[data-theme=dark] {
  --fx-blue: rgb(40 112 255 / .22);
  --fx-grid: rgb(149 185 238 / .045);
  --fx-shadow: rgb(0 0 0 / .33);
  --fx-deep-shadow: rgb(0 0 0 / .55);
  --fx-metal: linear-gradient(125deg, #101720 0%, #202c3d 32%, #151e2a 51%, #263348 79%, #111a27 100%);
  --fx-chrome: linear-gradient(105deg, #eff7ff 0%, #9cacc2 22%, #eff8ff 39%, #ffffff 49%, #8fa5c2 58%, #d7e9ff 76%, #a4b9d4 100%);
  --fx-frame: linear-gradient(130deg, #1f3049, #a5bddb 28%, #28374d 48%, #7495c4 66%, #1c2c46);
}
body { position: relative; isolation: isolate; }
.ambient-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 88% 8%, var(--fx-blue), transparent 48%), radial-gradient(ellipse at 0% 60%, rgb(75 137 211 / .045), transparent 45%); }
.ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--fx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px); background-size: 100px 100px; mask-image: linear-gradient(#000, transparent 85%); }
.site-header { background: var(--fx-metal); box-shadow: 0 3px 24px var(--fx-shadow), inset 0 1px 0 rgb(255 255 255 / .1); border-bottom-color: var(--line); }
.site-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-ice), var(--accent), transparent); opacity: .65; }
.reading-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; pointer-events: none; overflow: hidden; }
.reading-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--fx-ice)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgb(50 137 255 / .7); }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--fx-ice)); transform: scaleX(0); transform-origin: left; transition: transform 280ms ease; box-shadow: 0 0 12px rgb(31 94 255 / .4); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.brand { text-shadow: 0 1px 0 rgb(255 255 255 / .12); }
.icon-button, .project-open, .expertise-plus { background: var(--fx-metal); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 3px 8px var(--fx-shadow); }
.icon-button:hover { border-color: var(--link); box-shadow: 0 0 0 1px rgb(31 94 255 / .12), 0 0 20px var(--fx-blue), inset 0 1px 0 rgb(255 255 255 / .2); }

.hero { position: relative; isolation: isolate; padding-top: 46px; }
/* The original hero glow now follows the pointer across the entire viewport. */
.hero::before { content: none; }
.pointer-light { position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse 460px 360px at var(--pointer-x,72vw) var(--pointer-y,20vh),var(--fx-blue),transparent 78%); }
@media(hover:hover) and (pointer:fine) {
 :root[data-motion=full] .pointer-light[data-fx-pointer=on] { opacity:.55; }
 :root[data-theme=light][data-motion=full] .pointer-light[data-fx-pointer=on] { opacity:.4; }
}
.hero-brow { padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--fx-metal); width: fit-content; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 5px 20px var(--fx-shadow); }
.hero h1 { letter-spacing: -.06em; }
.hero h1 .headline-line { transform-origin: left bottom; }
.hero h1 .headline-secondary { color: var(--muted); background: var(--fx-chrome); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px var(--fx-shadow)); }
:root[data-theme=dark] .hero h1 .headline-line:first-child { text-shadow: 0 2px 24px rgb(103 155 255 / .1); }
.hero-intro { position: relative; padding-left: 18px; border-left: 1px solid var(--line); }
.button.primary { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(130deg, #1b55ec, #3068f8 58%, #174cda); border: 1px solid #487dff; box-shadow: 0 6px 24px rgb(31 94 255 / .2), inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -1px 0 rgb(0 0 0 / .15); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.button.primary::before { content: ''; position: absolute; inset-block: -40%; left: -50%; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .36), transparent); transform: translateX(-160%) skewX(-22deg); }
.button.primary:hover, .button.primary:focus-visible { background: linear-gradient(130deg, #174cda, #2862f7); box-shadow: 0 0 0 1px rgb(101 159 255 / .25), 0 10px 32px rgb(31 94 255 / .35), 0 0 17px rgb(66 131 255 / .2), inset 0 1px 0 rgb(255 255 255 / .3); transform: translateY(-2px); }
.button.primary:hover::before { animation: button-light 700ms ease-out both; }
.button.primary:active { transform: translateY(0); box-shadow: 0 3px 12px var(--fx-blue), inset 0 2px 4px rgb(0 0 0 / .16); }
.button .arrow-icon { transition: transform 220ms ease; }
.button:hover .arrow-icon { transform: translate(2px, -2px); }
.button.quiet:hover { text-shadow: 0 0 20px var(--fx-blue); }

/* Light lives on the frame and UI; image placeholders retain a single colour. */
.hero-stage { position: relative; overflow: hidden; border: 1px solid; border-image: var(--fx-frame) 1; box-shadow: 0 22px 55px var(--fx-deep-shadow), 0 1px 0 rgb(255 255 255 / .18); }
.hero-stage::after { content: ''; position: absolute; pointer-events: none; top: 0; left: 0; width: 25%; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, #479aff, #bcf0ff, #479aff, transparent); box-shadow: 0 0 16px rgb(56 144 255 / .75); transform: translateX(160%); }
.stage-facts { position: relative; isolation: isolate; background: var(--fx-metal); border-left-color: var(--line); box-shadow: inset 1px 0 0 rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .08); }
.stage-facts::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(160 185 220 / .08) 0, rgb(160 185 220 / .08) 1px, transparent 1px, transparent 4px); opacity: .2; }
.stage-label, .location-pill { border: 1px solid var(--line); background: var(--fx-metal); box-shadow: 0 5px 14px var(--fx-shadow), inset 0 1px 0 rgb(255 255 255 / .14); }
.stage-dot, .section-dot, .status-dot { box-shadow: 0 0 10px rgb(31 94 255 / .6), 0 0 2px var(--fx-ice); }
.stats strong { font-variant-numeric: tabular-nums; }
:root[data-theme=dark] .stats strong { text-shadow: 0 2px 15px rgb(106 174 255 / .14); }
.counter-number { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.project-card { perspective: 1100px; }
.project-image { border: 1px solid; border-image: var(--fx-frame) 1; box-shadow: 0 13px 30px var(--fx-shadow); transform: perspective(1100px) rotateX(0deg) rotateY(0deg); transition: transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease; }
.project-image::after { content: ''; position: absolute; inset: -1px; pointer-events: none; border: 1px solid transparent; opacity: 0; box-shadow: 0 0 20px var(--fx-blue); transition: opacity 280ms ease; }
.project-card:hover .project-image, .project-card:focus-visible .project-image { box-shadow: 0 20px 44px var(--fx-deep-shadow), 0 0 0 1px rgb(31 94 255 / .45), 0 0 28px var(--fx-blue); }
.project-card:hover .project-image::after, .project-card:focus-visible .project-image::after { opacity: 1; border-color: var(--link); }
.project-open { border: 1px solid var(--line); transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.project-open svg { transition: transform 250ms cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-open { box-shadow: 0 0 20px rgb(31 94 255 / .35); }
.project-card:hover .project-open svg { transform: translate(2px,-2px); }
.project-caption { position: relative; }
.project-number { color: var(--link); }
.expertise-section { background: linear-gradient(110deg, var(--surface), var(--surface-2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -1px 0 rgb(255 255 255 / .04); }
.expertise-item { transition: border-color 250ms ease; }
.expertise-item:hover, .expertise-item[open] { border-bottom-color: var(--control); }
.expertise-number { color: var(--link); }
.expertise-item[open] .expertise-plus { box-shadow: 0 0 18px rgb(31 94 255 / .25), inset 0 1px 0 rgb(255 255 255 / .25); }
.expertise-body { border-left: 1px solid var(--accent); margin-left: 4px; padding-left: 32px; }
.facility-picture { border: 1px solid; border-image: var(--fx-frame) 1; box-shadow: 0 18px 38px var(--fx-shadow); }
.facility-copy { position: relative; padding-left: 24px; border-left: 1px solid var(--line); }
.facility-copy::before { content: ''; position: absolute; left: -1px; top: 20px; width: 1px; height: 52px; background: linear-gradient(var(--fx-ice), var(--accent)); box-shadow: 0 0 12px rgb(31 94 255 / .45); }
.cta { border-top: 1px solid var(--line); margin-top: 28px; background: radial-gradient(ellipse at right center, var(--fx-blue), transparent 60%); }
.cta-circle { position: relative; overflow: hidden; border: 1px solid #487dff; background: linear-gradient(145deg, #397aff, #174de3); box-shadow: 0 9px 30px rgb(31 94 255 / .27), inset 0 1px 0 rgb(255 255 255 / .34); transition: transform 280ms ease, box-shadow 280ms ease; }
.cta-circle svg { transition: transform 280ms ease; }
.cta-link:hover .cta-circle { transform: translateY(-3px); box-shadow: 0 15px 34px rgb(31 94 255 / .4), 0 0 22px rgb(65 151 255 / .2); }
.cta-link:hover .cta-circle svg { transform: translate(3px,-3px); }
.site-footer { background: var(--fx-metal); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.page-heading h1 .headline-secondary { color: var(--muted); }
.contact-form-panel { background: var(--fx-metal); border: 1px solid; border-image: var(--fx-frame) 1; box-shadow: 0 20px 44px var(--fx-shadow); }
.field input, .field textarea { box-shadow: inset 0 2px 4px var(--fx-shadow); transition: box-shadow 220ms, border-color 220ms; }
.field input:focus, .field textarea:focus { border-color: var(--link); box-shadow: 0 0 0 2px var(--fx-blue), 0 0 20px var(--fx-blue), inset 0 1px 4px var(--fx-shadow); }
.contact-icon { background: var(--fx-metal); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 4px 10px var(--fx-shadow); }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; min-height: 44px; color: var(--ink); font-family: inherit; font-size: 10px; line-height: 1.6; background: transparent; border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; }
.motion-toggle:hover { border-color: var(--link); background: var(--surface); }
.motion-toggle svg { width: 13px; height: 13px; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed=true] .motion-play { display: block; }
.motion-toggle[aria-pressed=true] .motion-pause { display: none; }
.motion-toggle:disabled { cursor: default; color: var(--muted); }
.footer-bottom { flex-wrap: wrap; }

/* Finite page entrance; the quiet edge light runs only while the panel is visible. */
:root[data-motion=full] .hero .headline-line { animation: title-entry 850ms cubic-bezier(.16,1,.3,1) both; }
:root[data-motion=full] .hero .headline-secondary { animation: title-entry 900ms 90ms cubic-bezier(.16,1,.3,1) both, chrome-pass 2200ms 250ms ease-out both; }
:root[data-motion=full] .hero-intro { animation: copy-entry 700ms 180ms cubic-bezier(.16,1,.3,1) both; }
:root[data-motion=full] .hero-actions { animation: copy-entry 700ms 250ms cubic-bezier(.16,1,.3,1) both; }
:root[data-motion=full] .hero-actions .button.primary::before { animation: button-light 1500ms 650ms ease-out; }
:root[data-motion=full] .hero-stage::after { animation: edge-pass 7800ms ease-in-out infinite; animation-play-state: paused; }
:root[data-motion=full] .hero-stage[data-fx-view=in]::after { animation-play-state: running; }
:root[data-page-visible=false] .hero-stage::after { animation-play-state: paused !important; }
:root[data-page-visible=false] *, :root[data-page-visible=false] *::before, :root[data-page-visible=false] *::after { animation-play-state: paused !important; }
:root:not([data-motion]) .motion-toggle { display: none; }
@keyframes title-entry { from { opacity: 0; transform: translateY(25px) rotateX(10deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
@keyframes copy-entry { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chrome-pass { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes button-light { from { transform: translateX(-160%) skewX(-22deg); } to { transform: translateX(550%) skewX(-22deg); } }
@keyframes edge-pass { 0%,15% { transform: translateX(-100%); opacity: 0; } 22% { opacity: 1; } 72% { opacity: 1; } 85%,100% { transform: translateX(400%); opacity: 0; } }
@media(hover:hover) and (pointer:fine) {
  :root[data-motion=full] .project-card:hover .project-image { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px); }
}
@media(max-width:900px) {
  .site-header nav { background: var(--fx-metal); box-shadow: 0 18px 35px var(--fx-deep-shadow); }
  .site-header nav a::after { display: none; }
  .hero { padding-top: 32px; }
  .facility-copy { padding-left: 20px; }
}
@media(max-width:600px) {
  .ambient-grid { background-size: 76px 76px; opacity: .55; }
  .hero-brow { font-size: 8px; padding: 8px 10px; }
  .hero-intro { padding-left: 13px; }
  .hero-stage { box-shadow: 0 12px 28px var(--fx-shadow); }
  .project-image { box-shadow: 0 9px 22px var(--fx-shadow); }
  .expertise-body { padding-left: 27px; }
  .facility-copy { padding-left: 17px; }
  .facility-copy::before { top: 0; }
  .cta { margin-top: 12px; }
  .footer-bottom .motion-toggle { grid-column: 1; justify-self: start; font-size: 10px; }
  .contact-form-panel { box-shadow: 0 12px 26px var(--fx-shadow); }
}
:root[data-motion=paused] *, :root[data-motion=paused] *::before, :root[data-motion=paused] *::after,
:root[data-motion=reduced] *, :root[data-motion=reduced] *::before, :root[data-motion=reduced] *::after { animation: none !important; }
:root[data-motion=paused] .project-image, :root[data-motion=reduced] .project-image { transform: none !important; }
:root[data-motion=paused] *, :root[data-motion=paused] *::before, :root[data-motion=paused] *::after { transition: none !important; }
:root[data-motion=paused] .button.primary:hover, :root[data-motion=paused] .button:hover .arrow-icon, :root[data-motion=paused] .cta-link:hover .cta-circle, :root[data-motion=paused] .cta-link:hover .cta-circle svg { transform: none !important; }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .project-image, .button.primary:hover, .cta-link:hover .cta-circle { transform: none !important; }
}