@font-face{font-family:Inter;src:url('/visedra/fonts/inter/inter-latin-opsz-normal.woff2') format('woff2-variations'),url('/visedra/fonts/inter/inter-latin-opsz-normal.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--canvas:#F6F6F6;--surface:#FFFFFF;--surface-alt:#EEEEEE;--text:#000000;--text-soft:#262626;--text-muted:#6B6B6B;--divider:#E4E4E4;--control:#8A8A8A;--accent:#0A6CFF;--accent-hover:#0057E0;--on-accent:#FFFFFF;--accent-text:#0A5FE0;--focus-ring:#0A6CFF;--d-canvas:#020109;--d-surface:#0E0D14;--d-surface-alt:#2B2A31;--d-surface-active:#4D4C52;--d-text:#FFFFFF;--d-text-muted:#9A99A1;--d-divider:#2B2A31;--d-control:#807F87;--d-accent:#4D9BFF;--d-accent-hover:#7AB4FF;--d-accent-text:#7AB4FF;--d-focus-ring:#6DB0FF;--font-text:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:var(--font-text);--font-poster:var(--font-text);--paper:var(--surface);--paper-2:var(--canvas);--ink:var(--text);--ink-2:var(--text-soft);--muted:var(--text-muted);--line:var(--divider);--line-2:var(--control);--blue:var(--accent);--blue-deep:var(--accent-hover);--ease:cubic-bezier(.22,1,.36,1);--ease-out:var(--ease);--track:-.02em;--track-display:-.03em}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}body{margin:0;color:var(--text);background:var(--surface);font:400 16px/1.45 var(--font-text);letter-spacing:var(--track);font-optical-sizing:auto;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}button,input,select,textarea{font:inherit;letter-spacing:inherit}button{cursor:pointer}img{max-width:100%;display:block}svg{flex-shrink:0}[hidden]{display:none!important}a{color:inherit}h1,h2,h3{overflow-wrap:break-word;font-family:var(--font-display);font-weight:400;letter-spacing:var(--track-display);text-wrap:balance}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}button:disabled{opacity:.5;cursor:default}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;min-height:44px;min-width:44px;padding:10px 12px 10px 20px;font:400 16px/1.1 var(--font-text);letter-spacing:var(--track);text-decoration:none;max-width:100%;transition:background-color .25s var(--ease),color .25s var(--ease)}.button-primary{background:var(--accent);color:var(--on-accent)}.button-soft{background:var(--canvas);color:var(--text)}.button-outline{box-shadow:inset 0 0 0 1px var(--control);color:var(--text);background:transparent}.button svg{width:18px;height:18px;transition:transform .3s var(--ease)}.button .button-arrow{box-sizing:content-box;width:12px;height:12px;padding:3px;border-radius:50%;background:rgb(255 255 255/.24)}.button-soft .button-arrow,.button-outline .button-arrow{background:var(--accent);color:var(--on-accent)}.button:active{background:var(--accent-hover);color:var(--on-accent)}.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;text-underline-offset:5px}.skip{position:fixed;left:16px;top:12px;z-index:100;background:var(--surface);padding:12px 20px;border-radius:999px;transform:translateY(-160%)}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.button-primary:hover{background:var(--accent-hover);color:var(--on-accent)}.button-soft:hover{background:var(--surface-alt)}.button:hover svg{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.button svg{transition:none}.button:hover svg{transform:none}}
/* Moving between pages: the capsule stays put while the page fades in and settles, as in an app.
   Browsers without cross-document view transitions simply load the page. */
@view-transition{navigation:auto}
.design-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.22,1,.36,1) both}
::view-transition-group(site-header){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.design-header{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);height:48px;padding:4px;background:var(--d-canvas);color:var(--d-text);border-radius:999px;box-shadow:0 0 0 1px rgb(255 255 255/.08);--focus-ring:var(--d-focus-ring)}
.design-header a{color:inherit;text-decoration:none}
.design-logo{display:inline-flex;align-items:center;gap:7px;height:40px;min-width:44px;padding:0 14px 0 14px;font-size:15px;letter-spacing:-.02em;flex-shrink:0}.design-logo .mark{width:18px;height:18px}
.design-desktop-nav{position:relative;display:flex;align-items:center;height:40px;padding:0 2px;border-radius:999px;background:var(--d-surface-alt);isolation:isolate}
.design-desktop-nav a{position:relative;z-index:1;display:flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;font-size:15px;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:rgb(255 255 255/.86);transition:color .25s var(--ease)}
.design-desktop-nav a[aria-current]{color:#fff}
.nav-pill{position:absolute;z-index:0;top:2px;left:0;height:36px;width:0;border-radius:999px;background:var(--d-surface-active);opacity:0;pointer-events:none}
.design-desktop-nav:not([data-pill]) a[aria-current]{background:var(--d-surface-active)}
.lang-menu{position:relative;flex-shrink:0}.lang-menu summary{display:flex;align-items:center;gap:4px;height:40px;min-width:44px;padding:0 10px;border-radius:999px;font-size:14px;cursor:pointer;list-style:none;color:rgb(255 255 255/.86)}.lang-menu summary::-webkit-details-marker{display:none}.lang-menu summary svg{transition:transform .25s var(--ease)}.lang-menu[open] summary svg{transform:rotate(180deg)}
.lang-menu-panel{position:absolute;top:calc(100% + 10px);right:0;display:grid;min-width:88px;padding:6px;border-radius:20px;background:var(--d-canvas);box-shadow:0 0 0 1px rgb(255 255 255/.1)}
.design-languages a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;border-radius:999px;font-size:14px;color:rgb(255 255 255/.8)}.design-languages a[aria-current]{background:var(--d-surface-active);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 18px;border-radius:999px;background:#fff;color:#000!important;font-size:15px;letter-spacing:-.02em;white-space:nowrap;flex-shrink:0;transition:background-color .25s var(--ease)}
.nav-cta-dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;transition:transform .35s var(--ease)}
.header-request-short{display:none}
.design-menu{display:none}.design-menu summary{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;list-style:none;background:var(--d-surface-alt)}.design-menu summary::-webkit-details-marker{display:none}.menu-close-icon,.design-menu[open] .menu-open-icon{display:none}.design-menu[open] .menu-close-icon{display:block}.design-menu:not([open]) .design-menu-panel{display:none}
.design-menu-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--d-canvas);color:var(--d-text);padding:14px 20px 20px;border-radius:24px;box-shadow:0 0 0 1px rgb(255 255 255/.1);max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain}
.design-menu-panel nav{display:grid}.design-menu-panel nav>a{display:flex;align-items:center;min-height:48px;font-size:22px;letter-spacing:-.03em;border-bottom:1px solid var(--d-divider)}
.design-menu-preferences{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}.design-menu-preferences .button{justify-content:space-between;color:var(--on-accent)}.design-menu-preferences .design-languages{display:flex}
@media(hover:hover) and (pointer:fine){.design-desktop-nav a:hover{color:#fff}.lang-menu summary:hover,.design-languages a:hover{color:#fff;background:var(--d-surface-alt)}.nav-cta:hover .nav-cta-dot{transform:translateX(3px) scale(1.06)}.nav-cta:hover{background:#EDEDED}.design-menu summary:hover{background:var(--d-surface-active)}}
.design-footer{position:relative;background:var(--canvas);color:var(--text);padding:clamp(72px,9vw,140px) clamp(16px,2.8vw,40px) 28px;--focus-ring:var(--accent)}
.design-footer-main{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-mail{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;text-decoration:none}.footer-contact p{margin:0;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;color:var(--text-muted)}
.design-footer h2{margin:0 0 10px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.design-footer nav>a{display:flex;align-items:center;min-height:36px;font-size:16px;text-decoration:none}
.footer-languages{display:flex;gap:4px;margin-top:10px}.footer-languages a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;border-radius:999px;font-size:14px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--divider)}.footer-languages a[aria-current]{background:var(--text);color:var(--surface);box-shadow:none}
.design-footer-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(80px,12vw,200px)}
.footer-signature{display:block;font-size:clamp(64px,13.2vw,220px);line-height:.8;letter-spacing:-.06em;text-decoration:none;margin-left:-.04em}
.footer-notes{max-width:34ch;padding-bottom:6px}.footer-notes p{margin:0 0 4px;font-size:13px;line-height:1.45;color:var(--text-muted)}
.design-currency{display:flex;border:1px solid var(--control);border-radius:999px}.design-currency button{min-width:44px;min-height:44px;background:transparent;color:inherit;border:0;border-radius:999px}.design-currency [aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
@media(hover:hover) and (pointer:fine){.design-footer nav>a:hover,.footer-mail:hover{text-decoration:underline;text-underline-offset:5px}}
/* Seven links since the 3D floor plan page joined the bar: tighter cells until the bar has room. */
@media(max-width:1359px) and (min-width:1181px){.design-desktop-nav a{padding:0 8px}}
@media(max-width:1180px){.design-desktop-nav{display:none}.design-menu{display:block}.design-header{gap:6px}}
@media(max-width:1180px) and (min-width:744px){.design-header{padding-right:4px}}
@media(max-width:743px){.design-header{top:12px;left:12px;right:12px;transform:none;width:auto;max-width:none;justify-content:space-between}.design-logo{margin-right:auto;padding-left:12px}.lang-menu{display:none}.header-request{display:none}.header-request-short{display:inline-flex}.nav-cta{padding-left:14px;font-size:14px}.design-menu-panel{left:0;right:0}.design-footer-main{grid-template-columns:1fr 1fr;gap:36px 20px}.footer-contact{grid-column:1/-1}.design-footer-bottom{flex-direction:column;align-items:flex-start}.footer-signature{font-size:24vw}}
.footer-social{display:flex;flex-wrap:wrap;gap:6px 20px}
@media(pointer:coarse){.design-footer nav>a,.footer-languages a{min-height:44px}.footer-linkedin{display:inline-flex;align-items:center;min-height:44px}}
@media(prefers-reduced-motion:reduce){.design-desktop-nav a,.nav-cta,.nav-cta-dot,.lang-menu summary svg{transition:none}}

h1,h2,h3,p,figure,dl,dd,dt,ol,ul{margin:0}ol,ul{padding:0;list-style:none}
.sfy-home{overflow-x:clip}main>section{position:relative}.section-anchor{position:absolute;top:0;scroll-margin-top:84px}
.sf-label{font-size:13px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.sf-try-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;font-size:16px}
.text-link svg{width:18px;height:18px}

/* Hero: a sticky stage for seven scenes. */
.sf-hero{--panel-w:calc((100vw - 48px)/5);--panel-h:min(calc(var(--panel-w)*1.43),46vh);--band-top:45%;--phone-h:min(74vh,780px);--phone-w:calc(var(--phone-h)*.47);--room-w:min(62vw,96vh);background:var(--surface)}
@media(max-height:900px) and (min-width:744px){.sf-hero{--panel-h:min(calc(var(--panel-w)*1.43),40vh);--band-top:46%}}
.sf-hero-stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--surface)}
.js .sf-hero{height:calc(max(560px,100vh)*7.5);height:calc(max(560px,100svh)*7.5)}.js .sf-hero-stage{position:sticky;top:0}
.sf-hero-copy{position:absolute;left:0;right:0;top:16%;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 16px;text-align:center;z-index:3}
.sf-hero-copy h1{font-size:clamp(32px,3.34vw,64px);line-height:1.1;letter-spacing:-.03em}
/* One plain sentence under the title says what Visedra does. */
.sf-hero-lead{max-width:60ch;font-size:clamp(16px,1.18vw,20px);line-height:1.4;letter-spacing:-.01em;color:var(--text-muted);text-wrap:balance}
.sf-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 4px;border-radius:999px;background:var(--canvas);font-size:12px;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:359px){.sf-badge{padding:0 12px}.sf-badge .sf-faces{display:none}}
.sf-faces{display:flex}.sf-faces img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--canvas)}.sf-faces img+img{margin-left:-8px}
.sf-band{position:absolute;left:0;right:0;top:var(--band-top);display:flex;justify-content:center;gap:12px;z-index:1}
.sf-panel{position:relative;flex:0 0 var(--panel-w);height:var(--panel-h);display:flex;flex-direction:column;padding:12px;background:var(--canvas)}
.sf-panel-title{font-size:clamp(18px,1.67vw,28px);line-height:1.2;letter-spacing:-.03em;color:var(--text-soft)}
.sf-panel-media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:0 -12px;padding:2% 0 14%}
.sf-panel-media img{width:100%;height:auto;max-height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.sf-plus{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#000;color:#fff;transition:transform .45s var(--ease),background-color .3s var(--ease)}
.sf-plus::before{content:'';position:absolute;inset:-6px}
.sf-room{position:absolute;left:50%;top:50%;width:var(--room-w);transform:translate(-50%,-50%) translateY(100vh);z-index:1;pointer-events:none}
.sf-room img{width:100%;height:auto}.sf-room .sf-room-furnished{position:absolute;inset:0;opacity:0}
.sf-phone{position:absolute;left:50%;top:50%;width:var(--phone-w);height:var(--phone-h);margin:calc(var(--phone-h)/-2) 0 0 calc(var(--phone-w)/-2);border:clamp(7px,.7vw,11px) solid #000;border-radius:calc(var(--phone-w)*.17);transform:translateY(110vh);z-index:4;pointer-events:none}
.sf-phone-screen{--screen:1;position:absolute;inset:0;border-radius:calc(var(--phone-w)*.17 - 10px);overflow:hidden;background:rgb(255 255 255/var(--screen))}
.sf-island{position:absolute;z-index:3;top:3.2%;left:50%;width:30%;height:4%;transform:translateX(-50%);border-radius:999px;background:#000}
.sf-phone-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:24% 9% 9%;font-size:clamp(11px,.9vw,14px);letter-spacing:-.01em;color:#000}
.sf-phone-name{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:var(--text-muted)}.sf-phone-name strong{font-weight:400;font-size:1.45em;letter-spacing:-.03em;color:#000}
.sf-phone-toggle{position:absolute;left:50%;bottom:6%;z-index:2;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;transform:translateX(-50%);border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0/.06),0 8px 24px -12px rgb(0 0 0/.3);font-size:clamp(11px,.9vw,14px);letter-spacing:-.01em;white-space:nowrap}.sf-phone-toggle i{position:relative;width:34px;height:20px;border-radius:999px;background:#C9C9C9;transition:background-color .35s var(--ease)}.sf-phone-toggle i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .45s var(--ease)}.sf-phone-toggle.is-on i{background:var(--accent)}.sf-phone-toggle.is-on i::after{transform:translateX(14px)}
.sf-phone-interior{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.sf-fly{position:absolute;left:50%;top:50%;width:calc(var(--phone-w)*.86);z-index:5;opacity:0;pointer-events:none;transform-origin:50% 50%;transform:translate(-50%,-50%)}
.sf-fly img{width:100%;height:auto}
.sf-lines{position:absolute;left:24px;top:50%;width:min(36vw,640px);height:3em;transform:translateY(-50%);font-size:clamp(22px,2.22vw,42px);line-height:1.2;letter-spacing:-.03em;z-index:6}
.sf-lines p{position:absolute;left:0;top:0;opacity:0}
.sf-try{position:absolute;right:24px;top:50%;display:flex;align-items:center;gap:12px;transform:translateY(-50%);font-size:16px;opacity:0;z-index:6}
.sf-statement{position:absolute;left:8.3vw;right:8.3vw;top:12%;font-size:clamp(36px,5.55vw,104px);line-height:1;letter-spacing:-.035em;opacity:0;z-index:6;max-width:25ch}
.sf-steps{position:absolute;left:16px;bottom:16px;display:flex;gap:6px;z-index:7}
.sf-steps button{min-width:24px;height:24px;padding:0 7px;border:0;border-radius:999px;background:#E6F1FF;color:var(--accent-text);font-size:11px;line-height:24px;letter-spacing:0;transition:background-color .3s var(--ease),color .3s var(--ease),min-width .45s var(--ease)}
.sf-steps button.is-done,.sf-steps button[aria-current]{background:var(--accent);color:#fff}.sf-steps button[aria-current]{min-width:38px}
.sf-scroll{position:absolute;left:50%;bottom:6px;display:flex;flex-direction:column;align-items:center;min-height:44px;white-space:nowrap;transform:translateX(-50%);color:var(--accent-text);font-size:16px;text-decoration:none;z-index:7}
.sf-scroll svg{animation:sf-nudge 2.4s var(--ease) infinite}
@keyframes sf-nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}
.sf-char{display:inline-block;white-space:pre}
.sf-lines.is-split p{opacity:1}.sf-lines:not(.is-split) p.is-active{opacity:1}
.sf-lines.is-split .sf-char{opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .4s var(--ease),filter .4s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i)*6ms)}
.sf-lines.is-split p.is-active .sf-char{opacity:1;filter:blur(0);transform:none;transition-duration:.55s,.55s,.8s;transition-delay:calc(160ms + var(--i)*16ms)}
.sf-sword{display:inline-block;opacity:0;transform:translateY(.28em);transition:opacity .45s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*20ms)}
.sf-statement.is-active .sf-sword{opacity:1;transform:none;transition-delay:calc(180ms + var(--i)*45ms)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth iframe{pointer-events:none}
.js .sf-hero-copy,.js .sf-band{will-change:transform,opacity}
html:not(.js) .sf-hero-stage{height:auto;min-height:0;padding:120px 0 64px;overflow:visible}html:not(.js) .sf-hero-copy,html:not(.js) .sf-band{position:static}html:not(.js) .sf-band{margin-top:40px;overflow:hidden}html:not(.js) .sf-room,html:not(.js) .sf-phone,html:not(.js) .sf-fly,html:not(.js) .sf-steps,html:not(.js) .sf-scroll,html:not(.js) .sf-try{display:none}html:not(.js) .sf-lines,html:not(.js) .sf-statement{position:static;opacity:1;transform:none;width:auto;height:auto;margin:40px 16px 0}html:not(.js) .sf-lines p{position:static;opacity:1;margin-bottom:12px}

/* Demos: a full-bleed stage; the white card loads the real viewer. */
.sf-demos{--stage-h:max(560px,min(100svh,64vw));background:var(--surface)}
.sf-demos-bar{--focus-ring:var(--d-focus-ring);position:absolute;left:16px;top:calc(var(--stage-h) - 64px);z-index:6;display:flex;align-items:center;gap:6px;height:48px;padding:4px 4px 4px 18px;border-radius:999px;background:var(--d-canvas);color:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.08)}
.sf-demos-bar h2{font-size:15px;letter-spacing:-.02em;padding-right:8px;white-space:nowrap}
.demo-switch{display:flex;gap:2px;height:40px;padding:2px;border-radius:999px;background:var(--d-surface-alt)}
.demo-switch .control{min-height:36px;padding:0 16px;border-radius:999px;background:transparent;color:rgb(255 255 255/.86);box-shadow:none}.demo-switch .control[aria-current=true]{background:#fff;color:#000;text-decoration:none}
.sf-demos-note{flex-basis:100%;font-size:13px;color:var(--text-muted)}
.demo-panel{scroll-margin-top:0}
/* The example penthouse: two stills, afternoon and dusk, cross-fading on the same stage. */
.home-media picture{position:absolute;inset:0;transition:opacity .9s var(--ease)}.home-dusk{opacity:0}.home-frame[data-light=night] .home-dusk{opacity:1}
.home-rooms .control{text-decoration:none}.sf-card-home:hover .button-arrow{transform:translateX(4px)}
.sf-demos.is-home .demo-share>:not(.sf-demos-note){display:none!important}
.model-frame{position:relative;height:var(--stage-h);overflow:hidden;background:#EDF0EA}
.model-poster,.canvas-host{position:absolute;inset:0}
.sf-poster-media{position:absolute;inset:0;overflow:hidden}.sf-poster-media img{width:100%;height:112%;margin-top:-6%;object-fit:cover}
.sf-stage-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:#fff;pointer-events:none;background:radial-gradient(70% 60% at 50% 50%,rgb(0 0 0/.5),rgb(0 0 0/0));text-shadow:0 1px 24px rgb(0 0 0/.4)}
.sf-stage-title span{font-size:clamp(15px,1.25vw,20px);letter-spacing:-.02em}
.sf-stage-title strong{font-weight:400;font-size:clamp(72px,10.4vw,200px);line-height:.95;letter-spacing:-.05em}
.canvas-host canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px}
.viewer-status{position:absolute;left:50%;bottom:24px;z-index:7;width:min(460px,calc(100% - 32px));padding:18px 20px;transform:translateX(-50%);border-radius:18px;background:#fff;font-size:15px;box-shadow:0 20px 60px -20px rgb(0 0 0/.35)}
.viewer-status progress{display:block;width:100%;height:6px;margin-top:14px;accent-color:var(--accent)}.viewer-status>div{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sf-card{position:absolute;right:16px;bottom:16px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:clamp(240px,19.5vw,300px);aspect-ratio:1;padding:16px;background:#fff;color:#000;text-decoration:none;overflow:hidden}
.sf-card p{font-size:clamp(17px,1.4vw,22px);line-height:1.2;letter-spacing:-.03em}
.sf-card-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--accent-text);font-size:clamp(16px,1.25vw,20px);letter-spacing:-.02em;text-align:left;cursor:pointer}
.sf-card-link .button-arrow{width:16px;height:16px;transition:transform .35s var(--ease)}.sf-card-link[aria-disabled=true]{cursor:progress}
.sf-card-object{position:absolute;right:12px;bottom:12px;width:56%;transition:width .5s var(--ease)}.sf-card-object img{width:100%;height:auto}
.demo-controls{padding:10px 16px 0}
.demo-dock{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:6px 0 14px;border-bottom:1px solid var(--divider)}
.dock-group{display:flex;align-items:center;gap:10px;min-width:0}.dock-label{font-size:13px;color:var(--text-muted);white-space:nowrap}
.choice-group{display:flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:999px;background:var(--canvas)}
.control{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#000;font:400 15px/1 var(--font-text);letter-spacing:-.02em;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.control[aria-pressed=true]{background:#000;color:#fff}.control:disabled{opacity:.4;cursor:default}
.icon-control{width:40px;min-width:40px;padding:0;background:var(--canvas)}
.camera-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:auto}
/* Zoom and turn only mean something once the 3D is open: until then the panel shows stills. */
.demo-panel:not(.is-loaded) .camera-tools{display:none}.camera-tools>.control:last-child{background:var(--canvas)}
.viewer-hint,.poster-note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--text-muted);max-width:80ch}.is-loaded .poster-note{display:none}
.static-alternative{margin-top:8px}.static-alternative summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-size:14px}.static-alternative summary::-webkit-details-marker{display:none}.static-alternative>p{font-size:14px;color:var(--text-muted);margin:4px 0 12px}.static-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}.static-gallery img{width:100%;height:auto}
.demo-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 16px 0;scroll-margin-top:96px}.demo-share [data-share-explore]{display:none}.demo-share .sf-demos-note{flex:1 1 100%;margin-top:2px}
.demo-share>p{flex:1 1 280px;font-size:15px;color:var(--text-muted)}.demo-share>p.has-selection{color:#000}
.copy-result{flex-basis:100%;font-size:14px}.copy-result:empty{display:none}.manual-link{display:grid;gap:8px;width:100%;font-size:14px}.manual-link input{min-height:48px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--canvas);font-size:16px}

/* Audiences: the owner and the broker side by side, then the free sample of their building. */
.sf-audience{margin:clamp(96px,10vw,168px) 16px 0;scroll-margin-top:72px}
.sf-audience>h2{margin-top:12px;font-size:clamp(28px,2.6vw,48px);line-height:1.12;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.sf-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.sf-audience-col{padding:28px clamp(20px,2.4vw,40px) 32px;background:var(--canvas)}
.sf-audience-col h3{font-size:clamp(20px,1.5vw,26px);line-height:1.2;letter-spacing:-.02em}
.sf-audience-col ul{display:grid;gap:14px;margin:20px 0 0;padding:0;list-style:none}
.sf-audience-col li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--text-soft)}
.sf-audience-col li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sf-sample{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:16px;padding:28px clamp(20px,2.4vw,40px);background:#E6F1FF}
.sf-sample h3{font-size:clamp(20px,1.5vw,26px);line-height:1.2;letter-spacing:-.02em}
.sf-sample p{margin-top:8px;max-width:62ch;font-size:16px;line-height:1.5;color:var(--text-soft)}
.sf-sample .button{flex:none}
.sf-audience-pay{margin-top:18px;font-size:15px;color:var(--text-muted)}
@media(max-width:743px){.sf-audience{margin-top:88px}.sf-audience-grid{grid-template-columns:1fr}.sf-sample{flex-direction:column;align-items:flex-start}}
/* About: statement, three large images, three terms. */
.sf-about{padding:clamp(120px,13vw,220px) 16px 0}
.sf-about-head{position:relative;display:flex;align-items:flex-end;gap:clamp(20px,3vw,48px);padding:0 0 48px clamp(0px,4vw,64px);border-bottom:1px solid var(--divider)}
.sf-about-object{flex:0 0 clamp(90px,9vw,170px);margin-bottom:-8px}.sf-about-object img{width:100%;height:auto}
.sf-about-head h2{font-size:clamp(28px,2.22vw,42px);line-height:1.18;letter-spacing:-.03em;max-width:24ch}
.sf-about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:48px}
.sf-about-media{aspect-ratio:1;overflow:hidden;background:var(--canvas)}.sf-about-media img{width:100%;height:112%;margin-top:-6%;object-fit:cover}
.sf-about-item figcaption{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;padding-top:20px;font-size:16px;line-height:1.25;letter-spacing:-.02em}
.sf-about-item strong{font-weight:400}.sf-about-item figcaption strong{text-wrap:balance}.sf-about-item figcaption span{color:var(--text-muted)}
.sf-facts{padding:56px 16px 0}
.sf-facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:44px;border-top:1px solid var(--divider)}
.sf-facts-row>div{display:flex;flex-direction:column-reverse;gap:28px}
.sf-facts-row dd{font-size:clamp(88px,9.7vw,190px);line-height:.85;letter-spacing:-.055em}
.sf-facts-row dt{font-size:clamp(18px,1.4vw,24px);letter-spacing:-.02em;color:var(--text-muted)}
.sf-facts-link{margin-top:28px;font-size:16px}

/* Process: split with a hairline, floating object, four steps. */
.sf-process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin:64px 16px 0;border-top:1px solid var(--divider);scroll-margin-top:72px}
.sf-process-aside{position:relative;padding:28px 24px 40px 24px;border-right:1px solid var(--divider)}
.sf-process-object{position:sticky;top:26vh;width:min(62%,300px);margin:26vh 0 0 8%}.sf-process-object img{width:100%;height:auto}
.sf-process-main{padding:28px 0 clamp(96px,10vw,160px) clamp(20px,2vw,32px)}
.sf-process-main h2{font-size:clamp(34px,3.34vw,64px);line-height:1.06;letter-spacing:-.035em}
.sf-process-text{max-width:46ch;margin-top:22px;font-size:16px;line-height:1.4;color:var(--text-muted)}
.sf-process-main .sf-try-row{margin-top:32px}
.sf-process-video{margin-top:28px}.sf-process-video a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);font-size:16px;text-decoration:underline;text-decoration-color:var(--divider);text-underline-offset:4px}.sf-process-video a:hover{text-decoration-color:currentColor}.sf-process-video svg{width:28px;height:28px;padding:6px;border-radius:50%;background:#000;color:#fff;flex-shrink:0}
.sf-process-main h2{text-wrap:pretty}
.sf-process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(140px,19vw,320px)}
.sf-process-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sf-process-steps li:not(:last-child)::after{content:'';position:absolute;top:60px;left:calc(50% + 78px);right:calc(-50% + 66px);border-top:1.5px dashed #9CC4FF}
.sf-step-tile{position:relative;display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:30px;background:var(--canvas);color:#000}
.sf-step-num{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#000;color:#fff;font-size:11px;letter-spacing:0}
.sf-process-steps h3{margin-top:18px;padding:6px 14px;border-radius:999px;background:var(--canvas);font-size:16px;letter-spacing:-.02em}
.sf-process-steps p{margin-top:10px;max-width:22ch;font-size:14px;line-height:1.35;color:var(--text-muted)}

/* Channels: electric blue panel and a list of places for the link. */
.sf-channels{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px}
.sf-blue{position:relative;min-height:max(640px,96vh);padding:24px;background:var(--accent);color:#fff;overflow:hidden}
.sf-blue h2{font-size:clamp(42px,5.55vw,106px);line-height:.98;letter-spacing:-.04em}
.sf-card-glass{position:absolute;right:11%;bottom:14%;left:auto;background:rgb(3 20 60/.3);box-shadow:inset 0 0 0 1px rgb(255 255 255/.2);color:#fff;backdrop-filter:blur(2px)}
.sf-card-glass .sf-card-link{color:#fff}
.sf-blue-text{position:absolute;left:24px;bottom:24px;max-width:34ch;font-size:16px;line-height:1.3}
.sf-channel-list{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:64px 24px;background:var(--canvas)}
.sf-channel-list li{display:flex;align-items:center;gap:22px;font-size:clamp(28px,3.34vw,60px);line-height:1.12;letter-spacing:-.035em}
.sf-channel-list li:nth-child(even){flex-direction:row-reverse}
.sf-channel-icon{display:flex;align-items:center;justify-content:center;width:clamp(48px,4.4vw,72px);aspect-ratio:1;border-radius:6px;background:#EAEAEA;color:var(--accent)}

/* Integration: the real embed inside a browser frame. */
.sf-integration{padding:clamp(120px,13vw,220px) 16px 0}
.sf-integration-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:24px;padding-bottom:40px}
.sf-integration-head h2{margin-top:16px;font-size:clamp(34px,3.34vw,64px);line-height:1.06;letter-spacing:-.035em}
.sf-integration-copy p{max-width:48ch;font-size:16px;line-height:1.4;color:var(--text-muted)}.sf-integration-copy .text-link{margin-top:8px}
.sf-code{max-width:52ch;margin:20px 0 8px}.sf-code figcaption{font-size:13px;color:var(--text-muted)}.sf-code pre{margin-top:8px;padding:14px 16px;border-radius:12px;background:var(--d-canvas);color:#E9ECF5;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.sf-browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--divider),0 60px 100px -60px rgb(0 0 0/.35)}
.sf-browser-bar{display:flex;gap:7px;padding:13px 16px;background:var(--canvas)}.sf-browser-bar i{width:11px;height:11px;border-radius:50%;background:#D6D6D6}
.embed-demo{margin:0}.embed-listing{background:#fff}.embed-listing-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px 20px;font-size:13px;color:var(--text-muted)}.embed-listing-head strong{font-weight:400;font-size:18px;letter-spacing:-.02em;color:#000}
.embed-pill{padding:4px 10px;border-radius:999px;background:var(--canvas);color:#000;font-size:12px}
.embed-stage{position:relative;height:min(72vh,720px);background:var(--canvas);overflow:hidden}.embed-stage>img{width:100%;height:100%;object-fit:cover}.embed-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-load{position:absolute;left:50%;bottom:28px;display:inline-flex;align-items:center;gap:10px;min-height:48px;max-width:calc(100% - 32px);padding:0 22px;transform:translateX(-50%);border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.embed-load small:empty,.embed-listing-facts:empty,.embed-demo figcaption:empty{display:none}
.embed-open{display:flex;align-items:center;min-height:48px;padding:0 20px;font-size:15px;text-underline-offset:4px}
.sf-integration-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.sf-integration-facts>div{padding-top:16px;border-top:1px solid var(--divider)}.sf-integration-facts dt{font-size:17px;letter-spacing:-.02em}.sf-integration-facts dd{margin-top:6px;font-size:14px;line-height:1.4;color:var(--text-muted)}

/* Spaces: near-black statement and an asymmetric gallery. */
.sf-spaces{margin-top:clamp(120px,13vw,220px);padding:clamp(120px,14vw,240px) 16px clamp(120px,12vw,200px);background:var(--d-canvas);color:#fff;--focus-ring:var(--d-focus-ring)}
.sf-giant{max-width:15ch;padding-left:clamp(0px,6vw,120px);font-size:clamp(44px,8.34vw,164px);line-height:.97;letter-spacing:-.05em}
.sf-space-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:clamp(72px,9vw,160px);margin-top:clamp(120px,14vw,240px)}
.sf-space a{display:block;color:inherit;text-decoration:none}
.sf-space-media{overflow:hidden;background:var(--d-surface)}.sf-space-media img{width:100%;height:112%;margin-top:-6%;object-fit:cover;transition:scale .9s var(--ease)}
.sf-space-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;margin-top:18px}.sf-space h3{min-width:0;overflow-wrap:break-word}.sf-space-num{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.03em;color:var(--d-text-muted)}.sf-space h3{font-size:clamp(24px,2.2vw,36px);letter-spacing:-.03em}
.sf-space p{margin-top:10px;max-width:42ch;font-size:15px;line-height:1.4;color:var(--d-text-muted)}
.sf-space .sf-space-more a{display:inline;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sf-space-0{grid-column:1/span 4}.sf-space-0 .sf-space-media{aspect-ratio:4/5}
.sf-space-1{grid-column:6/span 7;margin-top:28vh}.sf-space-1 .sf-space-media{aspect-ratio:5/4}
.sf-space-2{grid-column:2/span 6}.sf-space-2 .sf-space-media{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background:var(--canvas)}.sf-space-2 .sf-space-media img{width:84%;height:auto;margin:0;object-fit:contain}
.sf-space-3{grid-column:9/span 4;margin-top:16vh}.sf-space-3 .sf-space-media{aspect-ratio:3/4}
.sf-space-4{grid-column:1/span 7}.sf-space-4 .sf-space-media{aspect-ratio:16/10}
.sf-space-5{grid-column:8/span 4;margin-top:22vh}.sf-space-5 .sf-space-media{aspect-ratio:4/5}

/* Coast: split with a rising phone. */
.sf-coast{padding:0 16px clamp(120px,12vw,200px);background:var(--d-canvas);color:#fff;--focus-ring:var(--d-focus-ring)}
.sf-coast-inner{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);gap:24px;align-items:start}
.sf-coast h2{position:sticky;top:14vh;font-size:clamp(34px,4.17vw,80px);line-height:1.03;letter-spacing:-.04em;max-width:13ch}
.sf-coast-media{position:relative}.sf-coast-frame{height:min(112vh,1200px);overflow:hidden}.sf-coast-frame img{width:100%;height:112%;margin-top:-6%;object-fit:cover}
.sf-home-walk{padding-top:clamp(56px,6vw,110px)}.sf-home-walk .sf-coast-frame{height:min(88vh,980px)}.sf-home-walk .sf-coast-frame img{object-position:50% 70%}
@media(min-width:1024px){.sf-home-walk .sf-coast-inner{grid-template-columns:minmax(0,1.45fr) minmax(0,.95fr)}.sf-home-walk h2{order:2}.sf-home-walk .sf-coast-media{order:1}.sf-home-walk .sf-coast-phone{left:41%;right:auto}}
.sf-card-white{position:absolute;right:auto;top:36%;left:24px;bottom:auto;aspect-ratio:auto;gap:14px;padding:18px 20px 16px}
.sf-coast-phone{position:absolute;left:33%;bottom:-8%;width:clamp(170px,14vw,250px);z-index:3}
.sf-mini-phone{position:relative;border:8px solid #000;border-radius:38px;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgb(0 0 0/.7)}.sf-mini-phone img{width:100%;height:auto}.sf-mini-phone .sf-island{height:3.2%;top:2%}

/* Gallery: images drift at different speeds around a fixed message. */
.sf-gallery{position:relative;height:230vh;background:#fff;overflow:clip}
.sf-float-layer{position:absolute;inset:0}
.sf-float{position:absolute;overflow:hidden;background:var(--canvas)}.sf-float img{width:100%;height:auto}
.f1{left:1%;top:3%;width:19vw}.f2{left:22%;top:1%;width:8vw}.f3{right:2%;top:2%;width:14vw}.f4{left:4%;top:33%;width:8vw}.f5{left:17%;top:27%;width:13vw}.f6{right:18%;top:23%;width:9vw}.f7{right:2%;top:40%;width:12vw}.f8{left:6%;top:58%;width:14vw}.f9{right:12%;top:62%;width:17vw}
.sf-gallery-center{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:100vh;height:100svh;text-align:center;pointer-events:none}
.sf-gallery-center>*{pointer-events:auto}.sf-gallery-center h2{font-size:clamp(28px,2.22vw,42px);line-height:1.15;letter-spacing:-.03em}
.sf-gallery-copy{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 24px;border-radius:24px;background:rgb(255 255 255/.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* When the question and the button wrap on a phone they stay centred under the title. */
.sf-gallery-copy .sf-try-row{justify-content:center}

/* Questions. */
.sf-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:clamp(120px,12vw,200px) 16px}
.sf-faq-head h2{margin-top:16px;font-size:clamp(34px,3.34vw,64px);line-height:1.04;letter-spacing:-.035em}
.faq-list{border-bottom:1px solid var(--divider)}.faq-more{margin-top:28px}.faq-more p{margin:0 0 10px;font-size:14px;color:var(--text-muted)}.faq-more ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.faq-more a{display:inline-flex;align-items:center;min-height:36px;color:var(--text);font-size:16px;text-decoration:underline;text-decoration-color:var(--divider);text-underline-offset:4px}.faq-more a:hover{text-decoration-color:currentColor}.faq-list details{border-top:1px solid var(--divider)}
.faq-list summary{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;align-items:center;gap:12px;min-height:76px;padding:14px 0;cursor:pointer;list-style:none;font-size:clamp(18px,1.53vw,26px);line-height:1.2;letter-spacing:-.025em}
.faq-list summary::-webkit-details-marker{display:none}.question-number{font-size:14px;color:var(--text-muted)}
.faq-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--canvas);transition:transform .45s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.faq-list details[open] .faq-toggle{transform:rotate(45deg);background:#000;color:#fff}
.faq-answer{max-width:68ch;padding:0 52px 30px 68px;font-size:16px;line-height:1.5;color:var(--text-muted)}

/* Contact: grey panel, large statement, the real form. */
.sf-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);padding:clamp(72px,8vw,140px) clamp(16px,2.8vw,40px) clamp(40px,5vw,80px);background:var(--canvas);scroll-margin-top:84px}
.sf-contact-copy{display:flex;flex-direction:column}.sf-contact-copy h2{margin-top:16px;font-size:clamp(40px,4.44vw,86px);line-height:1;letter-spacing:-.045em}
.sf-contact-copy>p:not(.sf-label){max-width:42ch;margin-top:22px;font-size:16px;line-height:1.45;color:var(--text-muted)}
.sf-contact-object{width:min(100%,560px);margin-top:auto;padding-top:40px}.sf-contact-object img{width:100%;height:auto}

.contact-form{display:grid;gap:16px;align-content:start}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-field{display:grid;align-content:start;gap:8px;font-size:14px;letter-spacing:-.01em}.contact-field small{color:var(--text-muted);font-size:12px}
.contact-field input,.contact-field textarea{width:100%;min-height:52px;padding:14px 16px;border:0;border-radius:12px;background:#fff;color:#000;font-size:16px;box-shadow:inset 0 0 0 1px #8A8A8A;transition:box-shadow .2s var(--ease)}
.contact-field textarea{min-height:112px;resize:vertical}
.contact-role{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;border:0;font-size:14px;letter-spacing:-.01em}
.contact-role legend{width:100%;margin-bottom:8px;padding:0}.contact-role legend small{color:var(--text-muted);font-size:12px}
.contact-role label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #8A8A8A;cursor:pointer;font-size:15px}
.contact-role label:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-text)}
.contact-role input{accent-color:var(--accent);margin:0}
.contact-role label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.contact-sample{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;cursor:pointer}
.contact-sample input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.contact-field input:focus-visible,.contact-field textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#707070}
.contact-field [aria-invalid=true]{box-shadow:inset 0 0 0 2px #C4262E}
.field-error{min-height:0;font-size:13px;color:#B3261E}.field-error:empty{display:none}
.form-selection{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;border-radius:14px;background:#fff;font-size:14px}.form-selection .control{background:var(--canvas)}
.form-privacy,.form-note{font-size:13px;line-height:1.45;color:var(--text-muted)}.form-privacy a{color:#000}
.contact-form .button-primary{justify-self:start;min-height:52px;padding:0 8px 0 24px;font-size:16px}.contact-form .button-primary .button-arrow{width:14px;height:14px;padding:9px}
.form-status{padding:14px 16px;border-radius:12px;background:#fff;font-size:15px}.form-status.is-success{background:#E4F6EA}


/* Closing statement and objects. The footer continues the grey field. */
.sf-closing{padding:clamp(96px,11vw,200px) clamp(16px,2.8vw,40px) 0;background:var(--canvas);overflow:hidden}
.sf-closing-text{max-width:13.5ch;font-size:clamp(44px,8.34vw,164px);line-height:.97;letter-spacing:-.05em;color:#8A8A8A}
.sf-closing-objects{position:relative;height:clamp(320px,50vw,880px);margin-top:clamp(-280px,-15vw,-60px)}
.sf-obj{position:absolute}.sf-obj img{width:100%;height:auto}
.sf-obj-a{left:2%;bottom:2%;width:46%}.sf-obj-b{left:42%;bottom:24%;width:38%}.sf-obj-c{right:6%;bottom:0;width:21%}.sf-obj-d{left:43%;bottom:2%;width:13%}
.sf-cube{position:absolute;left:66%;top:6%;display:flex;align-items:center;justify-content:center;width:clamp(52px,4.6vw,76px);aspect-ratio:1;border-radius:24%;background:var(--accent);color:#fff;box-shadow:0 24px 50px -16px rgb(10 108 255/.55)}.sf-cube .mark{width:48%;height:48%}
.sfy-home .design-footer{padding-top:clamp(48px,6vw,96px)}

/* Scroll-linked word colour; spans are only created when motion is allowed. */
.sf-word{transition:color .5s var(--ease)}[data-words] .sf-word{color:var(--word-off,#8A8A8A)}[data-words] .sf-word.is-on{color:var(--word-on,currentColor)}
/* Words not yet revealed stay at 3:1 or more (large text). */.sf-about-head h2{--word-off:#8A8A8A;--word-on:#000}.sf-giant{--word-off:#5F5E66;--word-on:#fff}.sf-closing-text{--word-off:#8A8A8A;--word-on:#595959}

@media(hover:hover) and (pointer:fine){
 .sf-panel:hover .sf-panel-media img{transform:scale(1.045)}.sf-panel:hover .sf-plus,.sf-plus:focus-visible{transform:rotate(90deg);background:var(--accent)}.sf-panel:hover .sf-plus.is-local,.sf-plus.is-local:focus-visible{transform:translateY(3px)}
 .sf-card:hover .sf-card-object{width:50%}.sf-card:hover .sf-card-link .button-arrow{transform:translateX(3px)}
 .control:not([aria-pressed=true]):not(:disabled):hover{background:rgb(0 0 0/.06)}.demo-switch .control:not([aria-current=true]):hover{background:rgb(255 255 255/.12)}.demo-switch .control[aria-current=true]:hover{background:#fff;color:#000}
 .sf-space a:hover .sf-space-media img{scale:1.04}.sf-channel-list li:hover .sf-channel-icon{background:var(--accent);color:#fff}
 .faq-list summary:hover .faq-toggle{background:#000;color:#fff}.sf-steps button:hover{background:var(--accent);color:#fff}
}
.sf-channel-icon{transition:background-color .3s var(--ease),color .3s var(--ease)}

@media(max-width:1180px){.sf-hero{--band-top:46%}.sf-process-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}.sf-process-steps li:nth-child(2)::after{display:none}.sf-integration-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
 .sf-hero{--phone-h:min(66vh,700px);--room-w:min(88vw,120vh);--panel-w:240px;--panel-h:min(420px,38vh);--band-top:38%}
 .sf-lines{top:auto;bottom:12%;left:24px;transform:none}
 .sf-try{top:auto;bottom:12%;transform:none}
 .sf-about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-about-item:last-child{display:none}
 .sf-channels{grid-template-columns:minmax(0,1fr)}.sf-blue{min-height:640px}
 .sf-coast-inner{grid-template-columns:1fr}.sf-coast h2{position:static;padding:0 0 32px}.sf-coast-phone{left:auto;right:6%}
 .sf-faq{grid-template-columns:1fr}.sf-contact{grid-template-columns:1fr}.sf-contact-object{display:none}
 .sf-space-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.sf-space-0,.sf-space-2,.sf-space-4{grid-column:1/span 4}.sf-space-1,.sf-space-3,.sf-space-5{grid-column:3/span 4;margin-top:0}
}
@media(max-width:743px){
 h1,h2,h3{hyphens:auto}
 .sf-hero{--panel-w:210px;--panel-h:min(310px,38vh);--band-top:36%;--phone-h:min(58vh,520px);--room-w:128vw}

 /* On phones the sentence sits above the scroll hint, in the space under the band. */
 .sf-code pre{font-size:12px;padding:12px 14px}
 .sf-hero-copy{top:15%;bottom:calc(64px + env(safe-area-inset-bottom));gap:14px;pointer-events:none}/* The H1 says what Visedra is in full: smaller and balanced so it stays above the band. */.sf-hero-copy h1{font-size:25px;text-wrap:balance}.sf-hero-copy h1 br{display:none}.sf-hero-lead{margin-top:auto;max-width:34ch;font-size:15px}
 .sf-panel{padding:10px}.sf-panel-title{font-size:18px}.sf-plus{right:12px;bottom:12px}
 .sf-lines{left:16px;right:16px;bottom:7%;width:auto;height:2.6em;font-size:22px;text-align:center}.sf-lines p{left:0;right:0}
 .sf-try,.sf-steps{display:none}
 .sf-statement{left:16px;right:16px;top:13%;font-size:34px;line-height:1.05}
 
 .sf-demos{--stage-h:max(520px,78svh)}
 .sf-demos-bar{left:12px;top:calc(var(--stage-h) - 176px);padding-left:4px}.sf-demos-bar h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sf-card.load-action{left:12px;right:12px;bottom:12px;width:auto;aspect-ratio:auto;padding:14px 128px 14px 16px}.sf-card.load-action .sf-card-object{right:12px;bottom:50%;width:108px;transform:translateY(50%)}
 .sf-stage-title strong{font-size:64px}
 .sf-card{width:220px;padding:14px}.sf-card p{font-size:16px}
 .home-rooms .control{padding:0 10px}
 .demo-dock{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px}.dock-group{flex-direction:column;align-items:flex-start;gap:6px}.choice-group{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}.choice-group .control{flex-shrink:0;min-height:44px}.camera-tools{margin-left:0}.icon-control{width:44px;min-width:44px;min-height:44px}
 .sf-about{padding-top:96px}.sf-about-head{flex-direction:column;align-items:flex-start;padding-left:0}.sf-about-head h2{font-size:28px}.sf-about-object{flex-basis:auto;width:150px}
 .sf-about-grid{grid-template-columns:1fr;gap:40px}.sf-about-item:last-child{display:block}.sf-about-item figcaption{grid-template-columns:1fr;gap:6px}
 .sf-facts-row{grid-template-columns:1fr;gap:0;padding-top:0;border-top:0}.sf-facts-row>div{gap:14px;padding:28px 0;border-top:1px solid var(--divider)}.sf-facts-row dd{font-size:96px}
 .sf-process{grid-template-columns:1fr}.sf-process-aside{border-right:0;padding:24px 0 0}.sf-process-object{position:static;width:220px;margin:24px 0 0 auto}.sf-process-main{padding:24px 0 96px}
 .sf-process-steps{grid-template-columns:1fr 1fr;gap:40px 12px;margin-top:72px}.sf-process-steps li::after{display:none}.sf-step-tile{width:96px;height:96px;border-radius:24px}
 .sf-channels{gap:12px;padding:0 12px}.sf-blue{min-height:560px;padding:20px}.sf-blue h2{font-size:clamp(32px,10.4vw,42px);hyphens:auto}.sf-card-glass{right:16px;bottom:120px;width:200px}.sf-blue-text{left:20px;right:20px;bottom:20px}.sf-channel-list{padding:48px 16px;align-items:flex-start}.sf-channel-list li,.sf-channel-list li:nth-child(even){flex-direction:row;font-size:clamp(22px,7.6vw,30px)}.sf-channel-list li>span:last-child{min-width:0;overflow-wrap:break-word}
 .sf-integration{padding-top:96px}.sf-integration-head{grid-template-columns:1fr}.embed-stage{height:min(64vh,560px)}.sf-integration-facts{grid-template-columns:1fr}
 .sf-spaces{padding:96px 16px}.sf-giant{padding-left:0;font-size:44px}.sf-space-grid{grid-template-columns:1fr;row-gap:64px;margin-top:80px}.sf-space-0,.sf-space-1,.sf-space-2,.sf-space-3,.sf-space-4,.sf-space-5{grid-column:1;margin-top:0}.sf-space:nth-child(even){padding-left:18%}
 .sf-coast-frame{height:70vh}.sf-card-white{top:auto;bottom:16px;left:16px}.sf-coast-phone{display:none}
 .sf-gallery{height:190vh}.f1{width:34vw;left:2%}.f2{width:18vw;left:62%;top:2%}.f3{width:28vw;top:12%}.f4{width:20vw;top:30%}.f5{width:30vw;left:4%;top:70%}.f6{width:22vw;right:6%;top:36%}.f7{width:24vw;top:58%}.f8{width:26vw;left:4%;top:48%}.f9{width:30vw;right:4%;top:80%}
 .sf-gallery-center{padding:0 16px}.sf-gallery-center h2{font-size:30px}
 .sf-faq{padding:96px 16px}.faq-list summary{grid-template-columns:36px minmax(0,1fr) 36px;font-size:18px}.faq-answer{padding:0 0 24px 48px}
 .sf-contact{padding:64px 16px 40px}.contact-fields{grid-template-columns:1fr}
 .sf-closing-text{font-size:44px}.sf-closing-objects{height:360px;margin-top:12px}.sf-obj-a{left:0;bottom:8%;width:62%}.sf-obj-b{left:40%;bottom:36%;width:58%}.sf-obj-c{right:2%;bottom:0;width:30%}.sf-obj-d{left:46%;bottom:0;width:19%}.sf-cube{width:52px;left:72%;top:2%}
}
/* Narrow phones (360 px and less): the example switch sits a little higher so the card under it never covers it. */
@media(max-width:379px){.home-rooms .control{padding:0 7px;font-size:14px}.sf-demos-bar{top:calc(var(--stage-h) - 212px)}.sf-card.load-action{padding-right:108px}.sf-card.load-action .sf-card-object{width:88px}.sf-card.load-action p{font-size:15px}}
@media(max-width:743px) and (max-height:620px){.sf-hero{--panel-h:min(260px,34vh);--band-top:39%}.sf-hero-lead{font-size:14px}}
/* 320 px screens (small phones, Display Zoom): a smaller title keeps its third line clear of the panels. */
@media(max-width:359px){.sf-hero-copy{top:13%}.sf-hero-copy h1{font-size:22px}.sf-hero{--band-top:37%}}
@media(prefers-reduced-motion:reduce){.sf-scroll svg{animation:none}.sf-panel-media img,.sf-plus,.sf-card-object,.sf-space-media img,.faq-toggle,.sf-steps button,.sf-word,.home-media picture{transition:none}}