/* SAMTECH 3D scenes (assets/js/st3d.js). Same drawing language as the rest of the site:
   line work in the section's own colours (white on black, graphite on white), one violet ink. No boxes around the scenes; they sit on the page like plates in a drawing set. */
.st3d{position:relative;width:100%}
.st3d__frame{position:relative;width:100%;aspect-ratio:var(--st3d-ratio,4/3)}
.st3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.st3d__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.st3d.is-live .st3d__poster{display:none}
.st3d__hint{margin:6px 0 0;font:500 13px/1.4 var(--font-body);color:var(--muted)}
.st3d__hint::before{content:"";display:inline-block;width:14px;height:2px;margin:0 8px 3px 0;background:var(--accent-line);vertical-align:middle}
.st3d:not(.is-live) .st3d__hint{display:none}
@media (hover:none){.st3d__hint .st3d__drag{display:none}}
@media (hover:hover){.st3d__hint .st3d__swipe{display:none}}
.st3d__cta{margin:var(--s5) 0 0}

/* Story: the scene stays on screen while the steps change as you scroll */
.st3d--story{--head:72px}
.st3d__stage{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);align-items:center}
.st3d__copy{display:flex;flex-direction:column;gap:var(--s5);position:relative}
.st3d__title{margin:0;max-width:16ch}
.st3d__steps{display:flex;flex-direction:column;gap:var(--s6)}
.st3d__count{margin:0 0 var(--s2);font:600 14px/1.4 var(--font-body);color:var(--accent-text);font-variant-numeric:tabular-nums}
.st3d__step h3{margin:0 0 var(--s2);font:600 clamp(21px,.9vw + 1rem,28px)/1.2 var(--font-head);letter-spacing:-.018em;max-width:24ch}
.st3d__step p:last-child{margin:0;color:var(--text-2);max-width:44ch}
.st3d--story .st3d__cta .btn{min-height:54px}
@media(min-width:1024px){
  .st3d__stage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px)}
  /* the pinned scene runs to the edge of the screen, so anything it crops is cropped by the screen, not mid-page */
  .st3d--story.is-story .st3d__frame{width:auto;margin-right:calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2)))}
}

/* live story (JS on, motion allowed): one step at a time, scene pinned */
.st3d--story.is-story{height:calc(100vh + var(--steps,3) * 70vh)}
.st3d--story.is-story .st3d__stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));min-height:520px}
.st3d--story.is-story .st3d__frame{aspect-ratio:auto;height:100%;max-height:calc(100vh - var(--head) - 24px)}
.st3d--story.is-story .st3d__steps{display:grid}
.st3d--story.is-story .st3d__step{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.st3d--story.is-story .st3d__step.is-on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:1023px){
  .st3d--story.is-story{height:calc(100vh + var(--steps,3) * 60vh)}
  .st3d--story.is-story .st3d__stage{grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:var(--s4);padding-bottom:var(--s5)}
  .st3d--story.is-story .st3d__frame{order:-1;max-height:none}
  .st3d--story.is-story .st3d__title{font-size:clamp(24px,6vw,32px)}
  .st3d--story.is-story .st3d__step h3{font-size:20px}
  .st3d--story.is-story .st3d__step p:last-child{font-size:15px}
  .st3d--story.is-story .st3d__copy{gap:var(--s3)}
  .st3d--story.is-story .st3d__cta{margin:0}
}
/* the editor shows every step so the text can be edited */
.elementor-editor-active .st3d--story .st3d__step{opacity:1!important;transform:none!important}

/* in a hero image slot the scene replaces the picture; the floating chip still sits on it */
.e-con.tiltwrap .elementor-widget-st_3d{width:100%}
.tiltwrap .st3d__frame{border:0}

/* Section that holds a scene full width */
.e-con.st-sec .elementor-widget-st_3d{width:100%}
@media (prefers-reduced-motion:reduce){.st3d__step{transition:none!important}}
/* in a hero the headline and button come first: no hint under the picture (the cursor still says it can be turned) */
.tiltwrap .st3d__hint{display:none}
/* the "Included" chip was made for photos; on a drawing it would cover labels, so it becomes the plate's caption */
.e-con.tiltwrap:has(.st3d)>.elementor-widget.float-chip,.tiltwrap:has(.st3d) .float-chip{position:relative!important;inset:auto!important;transform:none!important;margin:var(--s3) 0 0!important;width:auto;max-width:100%;align-self:flex-start}
/* phones: wide panels get a 4:3 plate and the busy system drawing a 5:4 one, so labels have room */
@media(max-width:559px){
  .st3d--panel .st3d__frame{aspect-ratio:4/3}
  .st3d--panel[data-scene="system"] .st3d__frame{aspect-ratio:5/4}
}