.io-opening, .io-capabilities { display: none; }
.io-motion-home .hero { isolation: isolate; overflow: hidden; min-height: min(740px, 78svh); display: grid; align-items: center; margin-bottom: clamp(2rem, 5vw, 5rem); background: #101010; }
.io-motion-home .io-opening { display: block; position: absolute; inset: 0; z-index: -2; }
.io-motion-home .io-opening::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.08) 40%,rgba(0,0,0,.7)); }
.io-opening-poster, .io-opening video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.io-motion-home .hero-logo { padding: 6rem 2rem 8rem; }
.io-motion-home .hero-logo img { width: min(58rem, 82%); filter: brightness(0) invert(1); }
@media(max-width:600px) { .io-motion-home .hero { min-height: 60svh; } .io-motion-home .hero-logo { padding: 6rem 1rem; } .io-motion-home .hero-logo img { width: 95%; } }
.io-motion-home .hero-logo img { animation: io-logo-arrive 1100ms cubic-bezier(.2,.75,.15,1) both; filter: brightness(0) invert(.93) sepia(.1); }
@keyframes io-logo-arrive { from { clip-path: polygon(0 0,0 0,0 100%,0 100%); translate: 0 12px; } to { clip-path: polygon(0 0,115% 0,100% 100%,0 100%); translate: 0 0; } }
.io-opening video { opacity: 0; transition: opacity .45s ease; }
.io-opening video.is-playing { opacity: 1; }
.io-dynamic .io-caps-ready .caps-grid, .io-dynamic .io-caps-ready > .section-bg { display: none; }
.io-dynamic .io-capabilities { display: block; }
.io-dynamic .caps .inner { max-width: 68rem; }
.io-dynamic .statement { padding-bottom: 1rem; }
.io-dynamic .caps { padding-top: 0; }
/* Three capabilities share one circle with an unchanging line weight. */
.io-cap-tabs { position: relative; width: min(75%, 315px); aspect-ratio: 1; margin: 0 auto 2.75rem; }
.io-cap-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.io-cap-connections circle { fill: none; stroke: #b19b80; stroke-width: 1; vector-effect: non-scaling-stroke; }
.io-cap-tabs button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; transform: translate(-50%,-50%); padding: 0; border: 0; background: transparent; color: #a59c90; font: inherit; font-size: clamp(24px,3.5vw,36px); font-weight: 500; letter-spacing: -.025em; cursor: pointer; }
.io-cap-tabs button[data-capability=generative] { top: 86%; left: 50%; }
.io-cap-tabs button[data-capability="2d"] { top: 32%; left: 18.8231%; }
.io-cap-tabs button[data-capability="3d"] { top: 32%; left: 81.1769%; }
.io-cap-node { width: 11px; height: 11px; border: 1px solid #8d7b65; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 6px var(--ground); transition: background .25s, box-shadow .25s; }
.io-cap-node-label { position: absolute; top: calc(50% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; line-height: 1.2; }
.io-cap-tabs button:not([data-capability=generative]) .io-cap-node-label { top: auto; bottom: calc(50% + 30px); }
.io-cap-tabs button[data-capability="2d"] .io-cap-node-label { left: calc(50% - 20px); }
.io-cap-tabs button[data-capability="3d"] .io-cap-node-label { left: calc(50% + 20px); }
.io-cap-tabs button[aria-selected=true], .io-cap-tabs button:hover { color: #ede9e0; }
.io-cap-tabs button[aria-selected=true] .io-cap-node { background: #d0bda7; border-color: #d0bda7; }
.io-cap-tabs button:focus-visible { outline-offset: 5px; }
.io-cap-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.io-cap-center img { display: block; width: clamp(90px,13vw,130px); height: auto; filter: brightness(2.3); }
.io-cap-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: clamp(24px,4vw,56px); align-items: start; }
.io-cap-copy { padding-top: .5rem; }
.io-cap-copy h2 { font-size: clamp(22px,2.7vw,32px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.io-cap-copy p { color: #b2a89b; font-size: 16px; line-height: 1.6; max-width: 29em; }
.io-cap-visual { position: relative; aspect-ratio: 16/9; background: #111; overflow: hidden; }
.io-cap-visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.io-cap-caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 14px; }
.io-cap-project { color: #ede9e0; }
.io-cap-caption span:last-child { color: #bcaa94; flex-shrink: 0; }
.io-cap-empty .io-cap-visual { display: none; }
.io-cap-empty { align-self: center; padding: 3rem 0; }
.io-transition-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; pointer-events: none; }
.io-dynamic .io-player-stage { transform-origin: top left; }
.io-dynamic .io-player-caption { transform-origin: top left; }
@media(max-width:700px) {
  .io-cap-panel { grid-template-columns: 1fr; }
  .io-cap-copy p { max-width: 40em; }
  .io-cap-tabs { margin-bottom: 2rem; }
  .io-dynamic .caps { padding-inline: 1.25rem; }
  .io-cap-caption { font-size: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .io-motion-home .hero-logo img { animation: none; }
  .io-opening video { display: none; }
}

.io-cap-motion { display: block; margin: 16px 0 0 auto; min-height: 44px; padding: 0 0 0 16px; background: none; border: 0; font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #bcae9c; cursor: pointer; }
.io-cap-motion span { padding-left: 8px; }
.io-cap-motion[hidden] { display: none; }

.io-opening-poster[hidden] { display: none; }

/* Contact information stays editable through the existing content model. */
.io-contact-details { margin-top: clamp(3rem,7vw,5rem); }
.io-contact-team { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr)); gap: 2rem 1.5rem; }
.io-contact-details h3 { color: var(--white); font-size: 20px; font-weight: 500; line-height: 1.25; margin-bottom: .5rem; }
.io-contact-role { color: #b2a89b; font-size: 14px; margin-bottom: .65rem; }
.io-contact-person a { display: block; color: #c5b49e; font-size: 16px; width: fit-content; overflow-wrap: anywhere; }
.io-contact-person a:hover { color: #ede9e0; text-decoration: underline; text-underline-offset: 4px; }
.io-contact-office, .io-contact-rep { margin-top: 2.5rem; }
.io-contact-office h3 { font-size: 14px; color: #b2a89b; text-transform: uppercase; letter-spacing: .12em; }
.io-contact-office address { color: var(--white); font-style: normal; font-size: 16px; white-space: pre-line; }
.contact a.mail { overflow-wrap: anywhere; }