/* Dimensional studies: restrained movement, fully usable without animation. */
.opening { position: relative; isolation: isolate; background: radial-gradient(ellipse at 92% 8%,#244651 0,transparent 51%),linear-gradient(125deg,#0b202b,#102d38 72%,#193b44); }
.opening::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background-image:linear-gradient(#a1bac13b 1px,transparent 1px),linear-gradient(90deg,#a1bac13b 1px,transparent 1px); background-size:84px 84px; mask-image:linear-gradient(100deg,transparent 25%,black); }
.opening::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,#c29b63,transparent); }
.hero-showcase { perspective:1300px; }
.hero-visual { border:1px solid #829ba34a; box-shadow:8px 10px 0 #091b2480,0 30px 70px -35px #000c; }
.hero-photo { scale:1.035; translate:0 var(--hero-parallax,0px); }
.tooling-studio { background:linear-gradient(135deg,#eceee7,#e1e6de); border-top:1px solid #c5cec3; border-bottom:1px solid #b9c6bb; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr); border:1px solid #afbeb3; }
.studio-viewport { min-height:620px; min-width:0; position:relative; overflow:hidden; background:radial-gradient(ellipse at 45% 44%,#294854 0,#152e3a 48%,#0b202b 100%); color:#d7e4df; }
.studio-topline,.studio-bottomline { position:absolute; left:25px; right:25px; display:flex; align-items:center; justify-content:space-between; gap:15px; z-index:2; pointer-events:none; font:9px/1.7 monospace; letter-spacing:.7px; }
.studio-topline { top:24px; color:#b6cacf; }
.studio-topline i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#edbb73; margin-right:8px; }
.studio-topline>span:last-child { color:#93abb4; }
.studio-bottomline { bottom:23px; font-size:9px; letter-spacing:0; color:#b3c6cb; }
.studio-render-label { font-size:8px; letter-spacing:1px; white-space:nowrap; }
.studio-canvas { position:absolute; inset:55px 0 50px; min-width:0; }
.studio-canvas canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; outline-offset:-5px; }
.studio-canvas canvas:active { cursor:grabbing; }
.studio-canvas canvas:focus-visible { outline:2px solid #efb765; }
.studio-canvas>img { width:100%; height:100%; object-fit:contain; padding:30px; }
.studio-compass { position:absolute; left:25px; bottom:60px; width:55px; height:65px; color:#8ca8b2; font:8px monospace; pointer-events:none; }
.studio-compass svg { position:absolute; top:12px; left:0; width:54px; fill:none; stroke:#8ca8b2; stroke-width:1; }
.studio-compass span:first-child { position:absolute; left:25px; top:0; }
.studio-compass span:nth-last-child(2) { position:absolute; left:0; bottom:0; }
.studio-compass span:last-child { position:absolute; right:0; bottom:0; }
.studio-inspector { background:#f6f5ef; padding:34px 30px 28px; min-width:0; }
.studio-inspector h3 { font-size:31px; font-weight:500; line-height:1.13; letter-spacing:-1px; margin-top:16px; }
.studio-parts { margin-top:28px; border-top:1px solid #c2cdc2; }
.studio-parts button { display:flex; align-items:center; width:100%; gap:14px; background:transparent; color:#4f665d; padding:16px 0; border-bottom:1px solid #ced6cb; font-size:12px; text-align:left; }
.studio-parts button>span:first-child { font:10px monospace; color:#7b8c81; }
.studio-parts button>span:last-child { margin-left:auto; font-size:18px; }
.studio-parts button[aria-pressed=true] { color:#172f35; font-weight:600; }
.studio-parts button[aria-pressed=true]>span { color:#985e25; }
.studio-feature { min-height:109px; padding-top:17px; }
.studio-feature p { font-size:12px; line-height:1.8; color:#52685d; }
.studio-feature>span { display:block; margin-top:12px; font-size:8px; letter-spacing:.75px; color:#75522c; }
.studio-controls { border:0; padding:0; margin:20px 0 0; min-width:0; }
.studio-range-heading { display:flex; justify-content:space-between; font-size:11px; color:#29463e; }
.studio-range-heading output { font:11px monospace; }
.studio-controls input[type=range] { width:100%; accent-color:#a36b30; margin:13px 0 0; height:24px; padding:0; cursor:pointer; }
.studio-range-ends { display:flex; justify-content:space-between; }
.studio-range-ends button { padding:2px 0 8px; background:none; font-size:10px; color:#586c60; text-decoration:underline; text-underline-offset:4px; }
.studio-view-buttons { display:flex; gap:6px; margin-top:15px; }
.studio-view-buttons button { flex:1; min-height:38px; background:transparent; border:1px solid #b6c3b6; padding:7px 8px; color:#314e44; font-size:10px; }
.studio-view-buttons button[aria-pressed=true] { background:#17343e; color:#fff4df; border-color:#17343e; }
.studio-view-buttons button:disabled { opacity:.55; cursor:not-allowed; }
.studio-navigation { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:13px; }
.studio-navigation>span { font-size:7px; letter-spacing:.7px; margin-right:auto; }
.studio-navigation button { flex:0 0 29px; height:32px; border:1px solid #bdc9bd; background:transparent; color:#27463b; font-size:16px; }
.studio-status { margin-top:18px; font-size:10px; line-height:1.7; color:#63756a; min-height:34px; }
.studio-work-link { font-size:11px; margin-top:18px; gap:15px; }
.studio-inspector button:focus-visible,.studio-inspector input:focus-visible { outline:2px solid #9c591d; outline-offset:3px; }
.studio-canvas canvas[hidden],.studio-controls[hidden],.studio-render-label[hidden],#studio-fallback[hidden] { display:none; }
.section-heading h2 { text-wrap:balance; }
.customer-grid a { transition:box-shadow .25s ease; }
.customer-grid a:hover { box-shadow:inset 0 -3px #d7a767; }
@media(prefers-reduced-motion:no-preference) {
  .section-heading::after { transition:width .6s ease; }
  .studio-parts button { transition:color .2s,padding .25s; }
  .studio-parts button[aria-pressed=true] { padding-left:7px; }
  .studio-view-buttons button,.studio-navigation button { transition:background .2s,color .2s; }
  .credential { transition:transform .35s,box-shadow .35s; }
  .credential:hover { transform:translateY(-5px); box-shadow:0 15px 22px -18px #132c37aa; }
}
@media(hover:hover) {
  .studio-navigation button:hover,.studio-view-buttons button:hover { background:#e2e8dc; color:#172f35; }
  .studio-view-buttons button[aria-pressed=true]:hover { background:#244650; color:white; }
}
@media(max-width:1100px) {
  .studio-layout { grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr); }
  .studio-inspector { padding:28px 23px; }
  .studio-topline,.studio-bottomline { left:18px; right:18px; }
  .studio-topline>span:last-child { display:none; }
  .studio-render-label { display:none; }
}
@media(max-width:800px) {
  .studio-layout { grid-template-columns:1fr; }
  .studio-viewport { min-height:490px; }
  .studio-inspector { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; padding:30px; }
  .studio-inspector-heading { grid-column:1; }
  .studio-parts { grid-column:1; margin-top:22px; }
  .studio-feature { grid-column:1; min-height:0; }
  .studio-controls { grid-column:2; grid-row:1 / 4; align-self:center; margin:0; }
  .studio-status { grid-column:1; }
  .studio-work-link { grid-column:2; align-self:end; }
}
@media(max-width:590px) {
  .studio-viewport { min-height:380px; }
  .studio-canvas { inset:44px 0 42px; }
  .studio-inspector { display:block; padding:27px 22px; }
  .studio-inspector h3 { font-size:29px; }
  .studio-inspector h3 br { display:none; }
  .studio-parts { margin-top:22px; }
  .studio-parts button { font-size:13px; min-height:48px; }
  .studio-feature { min-height:0; }
  .studio-controls { margin-top:25px; }
  .studio-view-buttons button { min-height:44px; font-size:11px; }
  .studio-navigation button { flex-basis:34px; height:40px; }
  .studio-navigation>span { font-size:6px; }
  .studio-topline { top:18px; font-size:8px; }
  .studio-bottomline { bottom:17px; font-size:8px; }
  .studio-compass { left:18px; bottom:48px; scale:.8; transform-origin:left bottom; }
  .hero-photo { scale:1; translate:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  .hero-photo { scale:1; translate:none; }
  .credential,.customer-grid a,.studio-parts button { transition:none; }
  .credential:hover { transform:none; }
}
@media print { .studio-controls,.studio-compass { display:none; } .studio-viewport { min-height:350px; } }

.studio-quick-pause { pointer-events:auto; min-height:44px; padding:8px 12px; border:1px solid #91aab3; background:#102c38; color:#e8f0ed; font:10px/1.4 monospace; letter-spacing:0; cursor:pointer; }
.studio-quick-pause:hover { background:#244854; }
.studio-quick-pause:focus-visible { outline:2px solid #efb765; outline-offset:3px; }
.studio-quick-pause:disabled { opacity:.6; cursor:default; }
.studio-quick-pause[hidden] { display:none; }
@media(max-width:590px) { .studio-topline { top:10px; gap:8px; } .studio-quick-pause { padding:8px; font-size:9px; } .studio-canvas { top:58px; } }