/* STC motion edition — finite transitions, clear controls, no autoplay. */
:root { --stc-motion-ease: cubic-bezier(.2,.7,.25,1); }
.reveal.is-visible { animation: none; }
.hero-visual img { animation: none; }
.hero-visual { transform-origin: 50% 50%; transition: transform 450ms var(--stc-motion-ease); }
.hero-copy h1 em { position: relative; }
.hero-copy .hero-signature > span { box-shadow: 0 0 0 5px #c6a15b12; }
.service-card::after, .solution-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg,#c6a15b0e,transparent 56%); opacity: 0;
  transition: opacity 350ms var(--stc-motion-ease);
}
.solution-card { position: relative; isolation: isolate; }
.service-card:hover::after, .service-card:focus-visible::after,
.solution-card:hover::after, .solution-card:focus-visible::after { opacity: 1; }
.service-card .icon { transition: color 250ms, transform 350ms var(--stc-motion-ease); }
.service-card:focus-visible, .case-card:focus-visible, .sector-card:focus-visible,
.solution-card:focus-visible, .portfolio-card:focus-within { border-color: var(--gold); }
.service-card:focus-visible .icon { color: #947136; }
.service-card, .case-card, .sector-card, .solution-card, .article-card, .portfolio-card {
  transition-timing-function: var(--stc-motion-ease);
}
.showcase-tabs button { position: relative; }
.showcase-tabs button::after {
  content: ''; position: absolute; top: -3px; inset-inline: 0; height: 3px;
  background: var(--gold-light); transform: scaleX(0); transform-origin: center;
  transition: transform 350ms var(--stc-motion-ease);
}
.showcase-tabs button[aria-selected=true]::after { transform: scaleX(1); }
.showcase-picture img { animation: stc-picture-in 720ms var(--stc-motion-ease) both; }
.showcase-copy > * { animation: stc-copy-in 560ms var(--stc-motion-ease) both; }
.showcase-copy > :nth-child(2) { animation-delay: 55ms; }
.showcase-copy > :nth-child(3) { animation-delay: 100ms; }
.showcase-copy > :nth-child(4) { animation-delay: 145ms; }
.step-detail summary .serial {
  width: 34px; height: 34px; border: 1px solid #bca26c; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0; font-size: 10px;
  transition: background 240ms,color 240ms;
}
.step-detail[open] summary .serial { background: var(--navy); border-color: var(--navy); color: var(--gold-light); }
.step-detail p { padding-inline-start: 56px; }
.site-dialog[open], .experience-dialog[open] { animation: stc-dialog-in 250ms var(--stc-motion-ease); }
.experience-open[aria-expanded=true] { color: #947136; background: #c6a15b17; }
.experience-open .icon { width: 21px; height: 21px; }
.experience-dialog {
  border: 1px solid #d4c8ad; border-radius: 6px; padding: 32px;
  width: min(560px,calc(100% - 28px)); max-height: 90dvh; overflow: auto;
  background: var(--paper); color: var(--navy); box-shadow: 0 32px 100px #06141f4d;
}
.experience-dialog::backdrop { background: #06141fbd; }
body.experience-dialog-open { overflow: hidden; }
.experience-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.experience-kicker { display: block; font-size: 10px; color: #896b35; margin-bottom: 8px; }
.experience-heading h2 { font-size: 27px; line-height: 1.5; }
html[lang=en] .experience-heading h2 { font-size: 25px; line-height: 1.35; }
.experience-close { border: 1px solid var(--line); min-width: 44px; min-height: 44px; font: 28px/1 Arial,sans-serif; }
#experience-intro { font-size: 13px; margin-top: 12px; margin-bottom: 22px; line-height: 1.9; }
.experience-option {
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  cursor: pointer; padding-block: 18px; border-top: 1px solid var(--line); min-height: 82px;
}
.experience-option > span { min-width: 0; }
.experience-option strong { display: block; font-size: 15px; }
.experience-option small { display: block; font-size: 11px; color: var(--muted); line-height: 1.9; margin-top: 4px; }
.experience-option input { width: 23px; height: 23px; margin: 10px; flex-shrink: 0; cursor: pointer; accent-color: var(--navy); }
.experience-option input:disabled { cursor: default; }
.experience-system { font-size: 11px; padding: 12px 15px; margin-bottom: 12px; border-inline-start: 2px solid var(--gold); background: var(--sand); }
.experience-audio { padding: 15px 18px; background: #ecefe9; border: 1px solid #dce0d8; }
.experience-audio > label { display: block; font-size: 12px; font-weight: 700; }
.experience-volume { display: flex; align-items: center; gap: 18px; }
.experience-volume input { accent-color: var(--navy); min-width: 0; flex: 1; height: 38px; cursor: pointer; }
.experience-volume output { min-width: 36px; font: 11px/1.8 Montserrat,Arial,sans-serif; }
.experience-test { border: 1px solid #b1b8b6; color: var(--navy); background: white; font-size: 12px; padding: 8px 18px; min-height: 44px; margin-top: 8px; }
.experience-test:hover:enabled { background: var(--navy); color: white; }
.experience-test:disabled { opacity: .45; }
.experience-status { font-size: 12px; color: #296041; margin-top: 12px; }
.experience-status:empty { display: none; }
.experience-note { font-size: 10px; line-height: 1.9; margin-block: 17px 20px; }
.experience-done { width: 100%; min-height: 48px; }
.experience-preferences { border-color: #536171; }
.header-actions .experience-open { min-width: 40px; }
@keyframes stc-picture-in { from { opacity: .55; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes stc-copy-in { from { opacity: .4; transform: translate3d(0,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes stc-dialog-in { from { opacity: .35; transform: translate3d(0,8px,0) scale(.99); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@media (hover:hover) and (pointer:fine) {
  .service-card:hover .icon { transform: translateY(-2px); color: #947136; }
  .case-card:hover, .portfolio-card:hover { box-shadow: 0 16px 35px #0b1f3a0a; }
}
@media (max-width:699px) {
  .header-actions .experience-open { min-width: 35px; }
  .header-actions .experience-open .icon { width: 18px; height: 18px; }
  .experience-dialog { padding: 23px 20px; }
  .experience-heading h2 { font-size: 23px; }
  .experience-option { gap: 10px; }
  .experience-option small { font-size: 11px; }
  .step-detail summary { gap: 15px; }
  .step-detail p { padding-inline-start: 49px; }
}
@media (max-width:359px) {
  .header-actions { gap: 0; }
  .header-actions .experience-open { min-width: 30px; width: 30px; }
  .experience-heading h2, html[lang=en] .experience-heading h2 { font-size: 21px; }
  .experience-dialog { padding-inline: 17px; }
}
html[data-stc-motion=reduced] { scroll-behavior: auto !important; }
html[data-stc-motion=reduced] *, html[data-stc-motion=reduced] *::before,
html[data-stc-motion=reduced] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-stc-motion=reduced] .hero-visual,
html[data-stc-motion=reduced] :is(.service-card,.case-card,.sector-card,.solution-card,.article-card,.portfolio-card,.btn):is(:hover,:focus-visible),
html[data-stc-motion=reduced] :is(.case-card,.sector-card,.gallery-image,.portfolio-cover):hover .project-photo,
html[data-stc-motion=reduced] .service-card:hover .icon,
html[data-stc-motion=reduced] .visual-expand:hover { transform: none !important; }
@media (prefers-reduced-motion:reduce) {
  .hero-visual,.service-card:hover,.case-card:hover,.sector-card:hover,.solution-card:hover,.article-card:hover,.portfolio-card:hover,.btn:hover,
  .service-card:hover .icon,.visual-expand:hover { transform: none !important; }
  .showcase-picture img,.showcase-copy > *,.site-dialog[open],.experience-dialog[open] { animation: none !important; }
}
@media print { .experience-dialog,.experience-open,.experience-preferences { display: none !important; } }
