/* Color is semantic: both themes cover the whole page, including the artwork. */
:root {
  --page-bg: #15151c;
  --panel-bg: #1b1a24;
  --about-bg: #24212d;
  --text: #f2f1f5;
  --secondary: #b8b2c5;
  --stroke: #45404f;
  --accent: #b9ace7;
  --art-bg: #1d1b27;
  --art-grid: #b9ace710;
  --art-stroke: #746687;
  --art-face: #f2f1f5;
  --art-depth: #4c435e;
  --line: var(--stroke);
  --light-line: var(--stroke);
  --light-muted: var(--secondary);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --page-bg: #f2f1f5;
  --panel-bg: #eae7ef;
  --about-bg: #e1dce9;
  --text: #231d2d;
  --secondary: #645c70;
  --stroke: #c9c0d7;
  --accent: #6b54a4;
  --art-bg: #e8e3ef;
  --art-grid: #6b54a416;
  --art-stroke: #9886ae;
  --art-face: #282131;
  --art-depth: #bbb0cc;
  color-scheme: light;
}
body { background: var(--page-bg); color: var(--text); }
body, .section-light, .about, .footer, .assembly-stage { transition: background-color .35s ease, color .35s ease; }
.section-light { background: var(--panel-bg); color: var(--text); color-scheme: inherit; }
.about { background: var(--about-bg); }
.header-inner { gap: 24px; }
.navigation { margin-left: auto; gap: 28px; }
.header-controls { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--text); border: 1px solid var(--stroke); background: transparent; border-radius: 50%; transition: border-color .2s, transform .2s; }
.theme-toggle:hover { border-color: var(--accent); transform: rotate(-12deg); }
.theme-toggle svg { grid-area: 1 / 1; }
.moon-icon, .brand-light { display: none; }
[data-theme="light"] .sun-icon, [data-theme="light"] .brand-dark { display: none; }
[data-theme="light"] .moon-icon, [data-theme="light"] .brand-light { display: block; }
.navigation > a:not(.nav-contact), .hero-description, .hero-foot, .about-copy > p:not(.about-lead), .connection-art, .footer-top p, .footer-bottom, .company-details, .company-details dt { color: var(--secondary); }
.navigation > a:hover, .back-top:hover, .hero-foot a:hover { color: var(--accent); }
.navigation .nav-contact { border-color: var(--stroke); }
.hero-copy > .eyebrow, h1 em, .section-light h2 em, .about h2 em, .section-index > span, .about .section-index > span, .row-number, .expand-icon, .step-top, .step-result { color: var(--accent); }
.section-index, .about .section-index { color: var(--secondary); }
.status-dot { background: var(--accent); }
.hero-line { display: block; }
.hero h1 { letter-spacing: -.055em; margin-top: 0; }
.hero-copy .button { position: relative; }
.button { overflow: hidden; }
.button-light { background: var(--text); color: var(--page-bg); }
.button-light:hover { background: var(--accent); color: var(--page-bg); }
.service, .steps, .steps li, .faq-list, .faq details, .footer-bottom, .hero-foot, .header-inner { border-color: var(--stroke); }
.service summary { transition: padding .25s ease; }
.service summary:hover { padding-left: 8px; }
.service summary:hover .service-name, .faq summary:hover { color: var(--accent); }
.service-content { position: relative; }
.service-content::before { content: ""; position: absolute; width: 2px; height: calc(100% - 32px); top: 0; left: 50px; background: var(--accent); transform-origin: top; animation: extend-line .4s ease both; }
.tags li { border-color: var(--stroke); color: var(--secondary); }
.services-note > span, .services-note a { color: var(--accent); }
.connection-art i { background: var(--stroke); }
.small-mark { flex: none; color: var(--text); }
.about-principles { display: flex; flex-wrap: wrap; gap: 12px 22px; border-top: 1px solid var(--stroke); margin-top: 30px; padding-top: 24px; font-size: 11px; color: var(--secondary); }
.about-principles span::before { content: "+"; color: var(--accent); margin-right: 8px; }
.step-top span:last-child { transition: transform .25s; }
.steps li:hover .step-top span:last-child { transform: translate(3px,-3px); }
.company-details dd { color: var(--text); }
.back-top span { border-color: var(--stroke); }
:focus-visible, .section-light :focus-visible { outline-color: var(--accent); }
.contact :focus-visible { outline-color: #4d397e; }
/* The mark is assembled once, then remains still. Motion has a beginning and an end. */
.hero-art { max-width: 520px; width: 100%; justify-self: end; perspective: 1000px; }
.art-topline { color: var(--secondary); font-family: Inter, Arial, sans-serif; font-size: 9px; letter-spacing: .08em; }
.assembly-stage { aspect-ratio: 1; position: relative; background: var(--art-bg); border: 1px solid var(--stroke); transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .55s cubic-bezier(.2,.65,.3,1), background-color .35s; }
.assembly { width: 100%; height: 100%; overflow: visible; }
.grid-line { stroke: var(--art-grid); stroke-width: 1; }
.draft-frame { stroke: var(--art-stroke); stroke-width: .8; }
.guide-line { stroke-dasharray: 3 7; opacity: .65; }
.draft-outline { stroke: var(--art-stroke); stroke-width: .7; stroke-dasharray: 1280; stroke-dashoffset: 0; opacity: .45; }
.piece-face { fill: var(--art-face); }
.piece-right .piece-face { fill: #8276c5; }
.piece-depth { fill: var(--art-depth); transform: translate(2.5px,3px); }
.piece-right .piece-depth { fill: #62558f; }
.join-line { stroke: var(--accent); stroke-width: 1; opacity: 0; stroke-dasharray: 650; stroke-dashoffset: 650; }
.measure-labels { fill: var(--secondary); font: 9px Inter, Arial, sans-serif; letter-spacing: 1.3px; }
.assembly-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; min-height: 60px; }
.assembly-steps { display: flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 11px; flex: 1; }
.assembly-steps b { font-size: 9px; font-weight: 400; color: var(--accent); margin-right: 5px; }
.assembly-steps i { height: 1px; flex: 1; background: var(--stroke); max-width: 32px; }
.replay-assembly { background: transparent; border: 1px solid var(--stroke); color: var(--secondary); width: 36px; height: 36px; flex: none; border-radius: 50%; font-size: 23px; line-height: 1; display: grid; place-items: center; transition: color .2s, border-color .2s; }
.replay-assembly:hover { color: var(--text); border-color: var(--accent); }
.assembling .piece-left { animation: assemble-left 2.5s cubic-bezier(.22,.7,.22,1) both; }
.assembling .piece-right { animation: assemble-right 2.5s cubic-bezier(.22,.7,.22,1) both; }
.assembling .draft-outline { animation: draw-outline 2.5s ease both; }
.assembling .join-line { animation: trace-join 2.5s ease both; }
.assembling .phase-one { animation: phase-in .65s ease both; }
.assembling .phase-two { animation: phase-in .65s .6s ease both; }
.assembling .phase-three { animation: phase-in .65s 1.45s ease both; }
@keyframes assemble-left {
  0% { transform: translate(-24px,14px); opacity: 0; }
  18% { opacity: 1; }
  42% { transform: translate(-24px,0); }
  76%,100% { transform: translate(0,0); opacity: 1; }
}
@keyframes assemble-right {
  0% { transform: translate(24px,-18px); opacity: 0; }
  23% { opacity: 1; }
  46% { transform: translate(24px,0); }
  76%,100% { transform: translate(0,0); opacity: 1; }
}
@keyframes draw-outline {
  0% { stroke-dashoffset: 1280; opacity: .8; }
  65% { stroke-dashoffset: 0; opacity: .8; }
  100% { stroke-dashoffset: 0; opacity: .45; }
}
@keyframes trace-join {
  0%,65% { stroke-dashoffset: 650; opacity: 0; }
  70% { opacity: .9; }
  95% { stroke-dashoffset: 0; opacity: .9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes phase-in { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes extend-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Keep interactions equally legible on touch screens. */
@media(max-width:1100px) {
  .header-inner { gap: 18px; }
  .navigation { gap: 20px; }
  .navigation .nav-contact { padding-inline: 12px; }
  .nav-contact span { margin-left: 10px; }
  .service-content::before { left: 35px; }
  .assembly-steps { gap: 7px; font-size: 10px; }
  .assembly-steps b { font-size: 8px; margin-right: 3px; }
}
@media(max-width:800px) {
  .header-inner { gap: 0; }
  .header-controls { margin-left: auto; }
  .navigation { order: 4; margin-left: 0; }
  .menu-toggle:not([hidden]) { color: var(--text); border-color: var(--stroke); }
  .hero-art { max-width: 440px; }
  .art-topline { font-size: 7px; }
  .assembly-steps i { display: none; }
  .assembly-steps { justify-content: space-between; }
  .assembly-steps b { display: block; }
  .service-content::before { left: 29px; }
  .connection-art .small-mark { width: 46px; height: 46px; }
}
@media(max-width:580px) {
  .header-controls { gap: 8px; }
  .menu-toggle:not([hidden]) { width: 44px; padding: 10px; justify-content: center; }
  .menu-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-art { max-width: 390px; padding-inline: 0; }
  .art-topline { font-size: 8px; }
  .assembly-steps i { display: block; }
  .assembly-steps b { display: inline; }
  .assembly-footer { gap: 12px; }
  .service-content::before { left: 18px; height: calc(100% - 24px); }
  .about h2 { font-size: clamp(32px,8.8vw,42px); }
  .about-principles { gap: 12px 18px; font-size: 10px; }
  .connection-art .small-mark { width: 58px; height: 58px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .assembly-stage { transform: none; }
  .piece { opacity: 1; transform: none; }
  .join-line { opacity: 0; }
}
@media print { body, .section-light, .about { color: black; background: white; } .header-controls { display: none; } }

/* Language control shares the existing header without changing the hero. */
.language-switch { display: grid; place-items: center; width: 36px; min-height: 44px; flex: none; color: var(--secondary); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.language-switch:hover { color: var(--accent); }
@media(min-width:801px) and (max-width:1100px) {
  .header-inner { gap: 14px; }
  .navigation { gap: 14px; }
  .header-inner .brand img { width: 145px; height: 40px; }
}
@media(max-width:360px) {
  .header-inner .brand img { width: 128px; height: 35px; }
  .header-controls { gap: 6px; }
  .language-switch { width: 32px; }
}