/* SAATHEE family / the single-view SAATHEE 2000 interactive studio. */
.saathi-family-nav { display:flex; gap:20px; align-items:center; margin:-15px 0 24px; font:10px/1.5 "Open Sans",sans-serif; }
.saathi-family-nav a { padding:7px 0; color:#8096a2; border-bottom:1px solid transparent; }
.saathi-family-nav .is-current { color:#d2e6ee; border-bottom-color:#95cbdc; }
.saathi-family-nav span { display:block; color:#78919f; font:7px/1.5 monospace; letter-spacing:.06em; text-transform:uppercase; }
.studio-demo-link { display:block; width:max-content; margin-top:18px; color:#9ab9c7; font-size:10px; }
.studio-demo-link:hover { color:white; }.studio-instruction { margin-top:9px; }
.studio-hotspot[aria-expanded="true"] .studio-hotspot__label { transition-delay:.13s; }
.studio-hotspot__label::after { content:""; display:block; width:0; height:2px; margin-top:7px; background:linear-gradient(90deg,#92ccd8 0 20%,transparent 20% 27%,#92ccd8 27% 60%,transparent 60% 67%,#92ccd8 67%); transition:width .5s .2s; opacity:.7; }
.studio-hotspot[aria-expanded="true"] .studio-hotspot__label::after { width:45px; }
.family-card--1000 .family-card__placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:32px; text-align:center; }
.family-card--1000 .family-card__placeholder > span { max-width:320px; font-size:clamp(30px,3vw,48px); }
.family-card--1000 .family-card__placeholder::after { content:"Product imagery to follow"; color:#6f8795; font:10px/1.5 "Open Sans",sans-serif; letter-spacing:.03em; }
.saathi-lab { --view-x:0px; --view-yaw:0deg; --view-skew:0deg; --view-depth:0px; --reflection-opacity:.24; --reflection-blur:1px; --camera-scale:1; --mode-scale:1; --camera-y:0px; --light-position:50%; position:relative; margin-top:40px; border-top:1px solid #ffffff1a; }
.lab-toolbar { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:78px; border-bottom:1px solid #ffffff12; transition:opacity .45s; }
.lab-modes { display:flex; align-items:stretch; gap:8px; }.lab-modes button { position:relative; min-height:48px; padding:14px 18px; border:0; color:#7e96a4; background:transparent; font:11px/1.5 "Open Sans",sans-serif; cursor:pointer; }
.lab-modes small { color:#516d7c; font:9px monospace; margin-right:10px; }.lab-modes button::after { content:""; position:absolute; bottom:0; left:18px; right:18px; height:1px; background:#b2e2ee; transform:scaleX(0); transform-origin:left; transition:transform .3s; }.lab-modes button[aria-pressed="true"] { color:#e8f3f6; }.lab-modes button[aria-pressed="true"]::after { transform:scaleX(1); }.lab-modes button:hover { color:#dceaf0; }
.lab-film-button { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; background:#afdae20a; border:1px solid #7b9ca640; border-radius:2px; font:10px/1.5 "Open Sans",sans-serif; color:#c5dce7; cursor:pointer; }.lab-film-button small { color:#6f8b9b; font:8px monospace; letter-spacing:.12em; margin-left:12px; }.lab-film-button:hover { border-color:#b1d5e3; }.lab-film-button > span { font-size:17px; }
.lab-stage { position:relative; isolation:isolate; height:650px; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:grab; background:#090e12; transition:background .7s; }
.lab-stage.is-dragging { cursor:grabbing; }.lab-stage button { touch-action:manipulation; }
.lab-backdrop { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at var(--light-position) 30%,#9fbed714,transparent 58%); transition:background .6s; }
.lab-floor { position:absolute; bottom:12%; left:28%; width:44%; height:8%; background:#0008; filter:blur(17px); border-radius:50%; transform:translateX(calc(var(--view-x) * -1.6)); transition:opacity .7s; }
.lab-orbit { position:absolute; width:70%; height:30%; top:58%; left:15%; border:1px solid #91becd19; border-radius:50%; transform:translateX(calc(var(--view-x) * -.65)); transition:opacity .5s; }
.lab-orbit i { position:absolute; width:1px; height:9px; background:#82a5b433; top:50%; }.lab-orbit i:first-child { left:0; }.lab-orbit i:nth-child(2) { right:0; }.lab-orbit i:last-child { bottom:-5px; top:auto; left:50%; }
.lab-stamp { position:absolute; z-index:4; left:28px; right:28px; top:25px; display:flex; justify-content:space-between; gap:20px; font:8px/1.5 monospace; letter-spacing:.13em; color:#67818f; pointer-events:none; }
.lab-object { position:absolute; z-index:1; width:min(940px,90%); aspect-ratio:1300/1080; left:50%; top:50%; transform:translate(-50%,-47%) translate3d(var(--view-x),var(--camera-y),0) perspective(1600px) rotateY(var(--view-yaw)) skewY(var(--view-skew)) scale(calc(var(--camera-scale) * var(--mode-scale))); transform-style:preserve-3d; }
.lab-object img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.lab-solid,.lab-shell,.lab-front { filter:brightness(1.12); transition:transform 1.15s cubic-bezier(.2,.75,.2,1),opacity .75s,filter .8s; }
.lab-solid { clip-path:url(#saathee-silhouette); opacity:1; z-index:4; }.lab-shell { clip-path:url(#saathi-shell); opacity:0; z-index:1; }.lab-front { clip-path:url(#saathi-front); opacity:0; z-index:3; }
.lab-reflection { clip-path:polygon(26% 79%,56% 83%,77% 65%,80% 100%,25% 100%); mask-image:linear-gradient(transparent 68%,#000 81%,transparent 99%); opacity:var(--reflection-opacity); filter:blur(var(--reflection-blur)); transform:translate3d(calc(var(--view-x) * -.7),calc(var(--view-depth) * .12),0); transition:opacity .7s; }
.lab-outline { position:absolute; z-index:5; inset:0; width:100%; height:100%; fill:none; stroke:#b5dbea; stroke-width:1; stroke-dasharray:2800; stroke-dashoffset:0; opacity:.16; transform:translateX(calc(var(--view-x) * .08)); transition:opacity .6s,stroke .6s; }
.lab-surface-light { position:absolute; z-index:5; inset:0; clip-path:url(#saathee-silhouette); pointer-events:none; opacity:.23; transition:opacity .6s; }
.lab-surface-light img { filter:brightness(1.6); mask-image:radial-gradient(ellipse at var(--light-position) 20%,#000 0,transparent 55%); }
[data-light="rim"] .lab-outline { stroke:#8edceb; opacity:.65; }[data-light="rim"] .lab-surface-light img { mask-image:linear-gradient(110deg,transparent 44%,#000 77%,transparent); }[data-light="warm"] .lab-outline { stroke:#d6b68e; opacity:.45; }[data-light="warm"] .lab-backdrop { background:radial-gradient(ellipse at 72% 43%,#b38f5010,transparent 60%); }[data-light="warm"] .lab-surface-light img { mask-image:radial-gradient(ellipse at 76% 45%,#000,transparent 50%); }
.lab-stage-hint { position:absolute; z-index:4; bottom:19px; left:0; width:100%; margin:0; text-align:center; color:#b2ccd8; font:10px/1.6 "Open Sans",sans-serif; pointer-events:none; transition:opacity .4s; }.lab-stage-hint > span { margin-right:8px; font-size:18px; }.lab-stage-hint small { display:block; color:#617e8f; font:8px/1.6 monospace; letter-spacing:.05em; }
.lab-controls { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:16px 25px; border-top:1px solid #ffffff18; border-bottom:1px solid #ffffff18; background:#0a1014; transition:opacity .45s; }
.lab-viewpoint { display:flex; align-items:center; gap:15px; }.lab-viewpoint label,.lab-lights > span { color:#627e8c; font:8px/1.5 monospace; letter-spacing:.1em; }.lab-viewpoint input { width:130px; accent-color:#a1d6e3; height:24px; cursor:ew-resize; }.lab-controls button { min-height:44px; padding:10px; border:0; background:transparent; color:#8aa8b8; font:10px/1.5 "Open Sans",sans-serif; cursor:pointer; }.lab-controls button:hover { color:#e2f5fa; }.lab-lights { display:flex; align-items:center; gap:4px; }.lab-lights > span { margin-right:12px; }.lab-lights button { border:1px solid transparent; padding:8px 12px; }.lab-lights button[aria-pressed="true"] { border-color:#709aab66; color:#cfedf6; }.lab-scan-button { display:flex; gap:25px; align-items:center; }.lab-scan-button span { font-size:18px; }
.lab-caption { display:flex; align-items:center; gap:12px; min-height:67px; padding:15px 24px; }.lab-caption p { font-size:11px; color:#90a9b7; margin:0; line-height:1.7; }.lab-caption > span:last-child { margin-left:auto; color:#5d7a89; font:8px/1.5 monospace; white-space:nowrap; letter-spacing:.06em; }
.lab-system-layers { position:absolute; z-index:2; inset:0; opacity:0; transition:opacity .6s .15s; }.lab-layer { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-width:1; transition:transform 1.15s cubic-bezier(.2,.75,.2,1),opacity .5s; }.lab-plane { stroke:#88bfd26e; fill:#7fb9ce04; }.lab-channel { stroke:#a1dce9; stroke-dasharray:10 65; animation:lab-channel-flow 8s linear infinite; opacity:.6; }.lab-layer--protection .lab-channel { stroke-dasharray:600; stroke:#bed9e5; opacity:.45; }.lab-layer--connection .lab-channel { stroke:#c3eaf7; animation-duration:5s; }
[data-mode="inside"] { --mode-scale:.9; }
[data-mode="inside"] .lab-solid { opacity:0; transform:translateY(-2%); }[data-mode="inside"] .lab-shell { opacity:.8; transform:translate3d(13%,-7%,0); }[data-mode="inside"] .lab-front { opacity:1; transform:translate3d(-12%,3%,0); }[data-mode="inside"] .lab-system-layers { opacity:1; }[data-mode="inside"] .lab-layer--energy { transform:translate(7%,-3%); }[data-mode="inside"] .lab-layer--protection { transform:translate(1%,-1%); }[data-mode="inside"] .lab-layer--connection { transform:translate(-5%,1%); }[data-mode="inside"] .lab-surface-light,[data-mode="inside"] .lab-outline { opacity:0; }[data-mode="inside"] .lab-reflection { opacity:.07; transform:translateY(2%); }
.lab-inside-label { position:absolute; z-index:4; display:flex; flex-direction:column; gap:7px; color:#c5dce7; font:11px/1.5 "Open Sans",sans-serif; opacity:0; transform:translateY(10px); transition:opacity .5s,transform .5s; pointer-events:none; }.lab-inside-label small { color:#6b8e9e; font:8px/1.4 monospace; letter-spacing:.08em; }.lab-inside-label::after { content:""; width:100%; height:1px; background:linear-gradient(90deg,#a0cedd,transparent); transform:scaleX(0); transform-origin:left; transition:transform .6s; }.lab-inside-label--front { top:65%; left:3%; }.lab-inside-label--shell { top:14%; right:4%; }
[data-mode="inside"] .lab-inside-label { opacity:1; transform:none; transition-delay:.7s; }[data-mode="inside"] .lab-inside-label::after { transform:scaleX(1); transition-delay:.6s; }.lab-concept-note { position:absolute; z-index:4; bottom:15px; width:100%; margin:0; text-align:center; font:9px/1.6 "Open Sans",sans-serif; color:#a6bbc6; opacity:0; transition:opacity .4s; pointer-events:none; }
[data-mode="inside"] .lab-concept-note,[data-mode="system"] .lab-concept-note { opacity:1; }[data-mode="inside"] .lab-stage-hint,[data-mode="system"] .lab-stage-hint { opacity:0; }
.lab-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; border-top:1px solid #ffffff17; }.lab-capabilities[hidden] { display:none; }.lab-capabilities li { padding:22px 24px; border-right:1px solid #ffffff13; }.lab-capabilities li:last-child { border:0; }.lab-capabilities small { color:#7095a6; font:8px/1.5 monospace; letter-spacing:.1em; }.lab-capabilities strong { display:block; font:400 15px/1.6 "Open Sans",sans-serif; color:#c7dfe9; margin:8px 0; }.lab-capabilities li > span { color:#7994a3; font:10px/1.7 "Open Sans",sans-serif; }
[data-mode="system"] .lab-solid { opacity:.14; filter:brightness(1.4); }[data-mode="system"] .lab-system-layers { opacity:1; }[data-mode="system"] .lab-outline { opacity:.65; }[data-mode="system"] .lab-layer--energy { transform:translate(5%,-2%); }[data-mode="system"] .lab-layer--connection { transform:translate(-3%,1%); }[data-mode="system"] .lab-reflection { opacity:.08; }[data-mode="system"] .lab-surface-light { opacity:0; }
.lab-flow { position:absolute; z-index:3; width:100%; height:100%; inset:0; fill:none; stroke:#88c7da4d; stroke-width:1; opacity:0; transition:opacity .8s; pointer-events:none; }.lab-flow circle { fill:#b3e3ef; stroke:none; }.lab-flow__current { stroke:#bcebf5; stroke-width:2; stroke-dasharray:14 280; animation:lab-through-flow 3s linear infinite; }.lab-flow__data { stroke-dasharray:6 200; animation:lab-through-flow 5s linear infinite; }
.lab-flow-label { position:absolute; z-index:4; opacity:0; font:11px/1.7 "Open Sans",sans-serif; transition:opacity .5s; pointer-events:none; }.lab-flow-label small { display:block; color:#789dad; font:8px/1.6 monospace; letter-spacing:.13em; }.lab-flow-label strong { color:#d3e8f1; font-weight:400; }.lab-flow-label--input { left:4%; top:48%; }.lab-flow-label--output { right:4%; top:48%; text-align:right; }.lab-flow-label--app { right:9%; top:17%; text-align:right; }
[data-mode="system"] .lab-flow,[data-mode="system"] .lab-flow-label { opacity:1; transition-delay:.5s; }
.lab-scan { position:absolute; z-index:6; inset:0; clip-path:url(#saathee-silhouette); opacity:0; pointer-events:none; background:linear-gradient(transparent calc(var(--scan-at,0%) - 1px),#d5f7ff var(--scan-at,0%),transparent calc(var(--scan-at,0%) + 1px)); }.lab-scan-marks { position:absolute; z-index:4; top:28%; left:15%; height:40%; display:flex; flex-direction:column; justify-content:space-between; opacity:0; border-left:1px solid #93bbcc55; padding-left:14px; background:repeating-linear-gradient(to bottom,transparent 0 19px,#83aec647 19px 20px) left/6px 100% no-repeat; }.lab-scan-marks span { color:#93b4c4; font:8px/1.5 monospace; letter-spacing:.1em; opacity:0; }
.saathi-lab.is-scanning .lab-scan { opacity:.8; animation:lab-scan-pass 3s ease-in-out both; }.saathi-lab.is-scanning .lab-outline { opacity:.8; stroke-dashoffset:2800; animation:lab-trace 2.6s ease forwards; }.saathi-lab.is-scanning .lab-scan-marks { opacity:1; }.saathi-lab.is-scanning .lab-scan-marks span { animation:lab-mark .5s .55s forwards; }.saathi-lab.is-scanning .lab-scan-marks span:nth-child(2) { animation-delay:1.3s; }.saathi-lab.is-scanning .lab-scan-marks span:nth-child(3) { animation-delay:2s; }.saathi-lab.is-scanning .lab-reflection { opacity:.38; }
.saathi-lab.is-inspected .lab-scan-marks { opacity:.6; }.saathi-lab.is-inspected .lab-scan-marks span { opacity:1; }
.lab-hero-shot { position:absolute; z-index:7; bottom:3%; left:0; width:100%; text-align:center; pointer-events:none; opacity:0; transform:translateY(12px); transition:opacity .7s,transform .7s; }.lab-hero-shot p { font:8px/1.5 monospace; letter-spacing:.35em; color:#8aa7b5; margin:0 0 7px; }.lab-hero-shot strong { display:block; font:400 32px/1.25 "Open Sans",sans-serif; letter-spacing:.16em; color:#ebf4f6; }.lab-hero-shot span { display:block; color:#94aab6; font:11px/1.7 "Open Sans",sans-serif; margin-top:9px; }
.lab-film-exit { position:absolute; z-index:10; right:22px; top:18px; border:1px solid #ffffff33; border-radius:2px; color:#c2d7e1; padding:8px 13px; min-height:44px; font:10px/1.5 "Open Sans",sans-serif; background:#0a1014b0; cursor:pointer; }.lab-film-exit span { margin-left:20px; }.lab-film-exit[hidden] { display:none; }
.saathi-lab.is-film .lab-toolbar,.saathi-lab.is-film .lab-controls { opacity:.12; pointer-events:none; }.saathi-lab.is-film .lab-stage { background:#030506; cursor:default; }.saathi-lab.is-film .lab-stamp,.saathi-lab.is-film .lab-stage-hint,.saathi-lab.is-film .lab-concept-note { opacity:0; }.saathi-lab.is-film .lab-backdrop { opacity:.3; }.saathi-lab.is-film .lab-object { transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }.saathi-lab[data-film-phase="dark"] .lab-solid { filter:brightness(.12); }.saathi-lab[data-film-phase="reveal"] .lab-solid { filter:brightness(1.15); }.saathi-lab[data-film-phase="reveal"] .lab-surface-light { opacity:.6; }.saathi-lab[data-film-phase="hero"] .lab-orbit,.saathi-lab[data-film-phase="hero"] .lab-backdrop,.saathi-lab[data-film-phase="hero"] .lab-outline { opacity:0; }.saathi-lab[data-film-phase="hero"] .lab-object { transform:translate(-50%,-49%) scale(.83); }.saathi-lab[data-film-phase="hero"] .lab-hero-shot { opacity:1; transform:none; }.saathi-lab[data-film-phase="hero"] .lab-reflection { opacity:.13; }
.saathi-lab:not(.is-inview) .lab-channel,.saathi-lab:not(.is-inview) .lab-flow__current,.saathi-lab:not(.is-inview) .lab-flow__data,.saathi-lab[data-mode="studio"] .lab-channel { animation-play-state:paused; }
@property --scan-at { syntax:"<percentage>"; inherits:false; initial-value:0%; }
@keyframes lab-scan-pass { from { --scan-at:14%; } to { --scan-at:84%; } }
@keyframes lab-trace { to { stroke-dashoffset:0; } }
@keyframes lab-mark { to { opacity:1; } }
@keyframes lab-channel-flow { to { stroke-dashoffset:-300; } }
@keyframes lab-through-flow { to { stroke-dashoffset:-294; } }
@media(max-width:1100px) { .lab-stage { height:580px; }.lab-modes button { padding-inline:11px; }.lab-modes small { margin-right:5px; }.lab-film-button { padding-inline:12px; }.lab-film-button small { display:none; }.lab-object { width:min(850px,96%); }.lab-controls { gap:12px; padding-inline:16px; }.lab-viewpoint { gap:9px; }.lab-viewpoint input { width:110px; }.lab-flow-label--input { left:3%; }.lab-flow-label--output { right:3%; }.lab-flow-label strong { font-size:10px; } }
@media(max-width:767px) {
  .saathi-family-nav { margin:-8px 0 18px; gap:22px; }.studio-demo-link { margin-top:14px; font-size:9px; }.studio-copy .s-kicker { margin-bottom:18px; }.studio-model { font-size:10px; }.saathi-family-nav a { font-size:9px; }.saathi-family-nav span { display:inline; margin-left:6px; font-size:6px; }.saathee-page .studio-hero h1 { font-size:clamp(48px,13vw,68px); }.studio-copy .s-actions { margin-top:17px; }
  .saathi-lab { margin-top:27px; }.lab-toolbar { flex-direction:column; gap:13px; padding:10px 0 16px; }.lab-modes { width:100%; justify-content:space-between; gap:0; }.lab-modes button { padding:10px 8px; font-size:10px; }.lab-modes small { font-size:7px; }.lab-film-button { width:100%; justify-content:center; min-height:44px; }.lab-film-button small { display:block; }
  .lab-stage { height:450px; margin-inline:-20px; }.lab-object { width:148%; transform:translate(-50%,-47%) translate3d(var(--view-x),var(--camera-y),0) perspective(1400px) rotateY(var(--view-yaw)) skewY(var(--view-skew)) scale(calc(var(--camera-scale) * var(--mode-scale))); }.lab-stamp { left:20px; right:20px; top:21px; font-size:6px; gap:8px; }.lab-stamp > span:last-child { text-align:right; max-width:110px; }.lab-orbit { width:90%; left:5%; }.lab-floor { left:15%; width:70%; }
  .lab-stage-hint { bottom:15px; font-size:9px; }.lab-stage-hint small { font-size:7px; }.lab-inside-label { font-size:8px; gap:4px; }.lab-inside-label small { font-size:6px; }.lab-inside-label--front { left:5%; top:79%; }.lab-inside-label--shell { right:5%; top:12%; }.lab-concept-note { font-size:8px; padding:0 22px; bottom:12px; }.lab-flow-label--input { left:5%; top:76%; }.lab-flow-label--output { right:5%; top:76%; }.lab-flow-label--app { top:10%; right:5%; }.lab-flow-label small { font-size:6px; }.lab-flow-label strong { font-size:9px; }
  .lab-flow { width:84%; left:8%; transform:rotate(90deg); opacity:0; }.lab-scan-marks { left:7%; top:26%; height:43%; }.lab-scan-marks span { font-size:6px; }.lab-controls { flex-wrap:wrap; gap:4px 10px; padding:8px 0; }.lab-viewpoint { width:100%; justify-content:space-between; border-bottom:1px solid #ffffff0d; padding-bottom:6px; }.lab-viewpoint input { width:45%; }.lab-controls button { font-size:9px; }.lab-lights > span { margin-right:4px; }.lab-lights button { padding-inline:10px; }.lab-controls .lab-scan-button { margin-left:auto; gap:10px; }.lab-caption { min-height:77px; padding:15px 0; }.lab-caption p { font-size:10px; }.lab-caption > span:last-child { display:none; }
  .lab-capabilities { grid-template-columns:1fr; }.lab-capabilities li { padding:16px 4px; border-right:0; border-bottom:1px solid #ffffff13; display:grid; grid-template-columns:1fr 1.5fr; gap:6px 15px; align-items:center; }.lab-capabilities strong { font-size:12px; margin:0; }.lab-capabilities small { font-size:7px; }.lab-capabilities li > span { grid-column:2; font-size:9px; }.lab-hero-shot { bottom:4%; }.lab-hero-shot strong { font-size:22px; letter-spacing:.12em; }.lab-hero-shot span { font-size:9px; }.saathi-lab[data-film-phase="hero"] .lab-object { transform:translate(-50%,-49%) scale(.83); }.lab-film-exit { font-size:9px; right:14px; top:12px; }
  [data-mode="inside"] { --mode-scale:.86; }[data-mode="inside"] .lab-shell { transform:translate3d(8%,-8%,0); }[data-mode="inside"] .lab-front { transform:translate3d(-9%,2%,0); }
}
@media(prefers-reduced-motion:reduce) {
  .lab-object,.lab-solid,.lab-shell,.lab-front,.lab-layer,.lab-outline,.lab-reflection,.lab-surface-light,.lab-backdrop,.lab-inside-label,.lab-concept-note,.lab-flow,.lab-flow-label,.lab-hero-shot,.lab-caption,.lab-controls,.lab-toolbar { transition:none!important; }
  .lab-channel,.lab-flow__current,.lab-flow__data { animation:none!important; }.lab-object { transform:translate(-50%,-47%) scale(var(--mode-scale))!important; }.lab-scan { display:none; }.lab-scan-marks span { animation:none!important; opacity:1; }.studio-hotspot__label::after { transition:none; }
  .saathi-lab[data-film-phase="hero"] .lab-object { transform:translate(-50%,-49%) scale(.83)!important; }
}
