/* Sabban&Co · signal intelligence, precision and conversational workflows. */
.experience-lab { --lab-accent:#b7bcff; --lab-line:#ffffff25; position:relative; isolation:isolate; }
.experience-lab [hidden] { display:none!important; }
.lab-brand { position:absolute; width:clamp(260px,45vw,650px); height:auto; right:-9%; top:7%; opacity:.04; filter:brightness(0) invert(1); pointer-events:none; z-index:-1; translate:var(--lab-x,0) var(--lab-y,0); transition:translate .35s ease-out; }
.lab-eyebrow { display:block; font-size:12px; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; opacity:.7; }
.lab-editorial { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end; margin-bottom:55px; }
.lab-editorial > p { max-width:480px; opacity:.75; }
.lab-options { display:grid; gap:10px; align-content:start; }
.lab-options button { display:flex; align-items:center; gap:17px; width:100%; min-height:66px; padding:18px 20px; color:inherit; background:transparent; border:1px solid var(--lab-line); border-radius:8px; font:inherit; font-size:15px; text-align:left; cursor:pointer; transition:background .3s,border-color .3s,translate .3s; }
.lab-options button > span { font-size:11px; opacity:.6; }
.lab-options button > b { font-weight:300; font-size:20px; margin-left:auto; }
.lab-options button:hover { background:#ffffff0d; translate:3px 0; }
.lab-options button[aria-pressed=true] { border-color:var(--lab-accent); background:color-mix(in srgb,var(--lab-accent) 12%,transparent); }
.experience-lab button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.lab-result { min-width:0; padding:35px; border:1px solid var(--lab-line); background:#101527; border-radius:14px; }
.lab-result-top { display:flex; justify-content:space-between; gap:20px; font-size:11px; letter-spacing:.035em; opacity:.6; margin-bottom:30px; }
.experience-lab .lab-result :is(h3,h4) { font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-.035em; font-weight:300; margin:22px 0; color:inherit; }
.experience-lab .lab-result p { font-size:16px; line-height:1.75; opacity:.75; }
.lab-outcome { border-top:1px solid var(--lab-line); padding-top:22px; margin-top:30px; }
.lab-outcome > small { display:block; font-size:11px; opacity:.6; margin-bottom:9px; }
.lab-outcome > strong { font-size:18px; font-weight:350; line-height:1.4; }
.lab-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.lab-tags > span { padding:6px 10px; border:1px solid var(--lab-line); border-radius:25px; font-size:11px; }
.su-intelligence { background:radial-gradient(ellipse at 70% 25%,#262342,transparent 58%),#0c1020; }
.lab-signal-system { display:grid; grid-template-columns:1fr 1.05fr 1fr; align-items:center; gap:35px; padding-block:20px 60px; }
.lab-source-stack > .lab-eyebrow { margin-bottom:25px; }
.lab-source-stack > div { position:relative; display:flex; align-items:center; gap:12px; padding:18px 0; font-size:13px; border-bottom:1px solid #ffffff1c; }
.lab-source-stack > div > span { margin-left:auto; color:#aaa6e6; }
.lab-source-stack i { width:5px; height:5px; border-radius:50%; background:#9ddbda; animation:lab-signal 3s calc(var(--step)*.55s) infinite; }
.lab-ai-core { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; min-height:300px; border:1px solid #b5b5ee38; border-radius:50%; background:radial-gradient(#55588030,transparent 68%); overflow:hidden; }
.lab-ai-core .lab-brand { opacity:.04; width:110%; right:-10%; top:5%; }
.lab-core-clock { font-size:90px; letter-spacing:-.09em; line-height:1; color:#c9caff; }
.lab-core-clock > small { font:inherit; color:#6974a5; }
.lab-ai-core > strong { font-size:17px; font-weight:350; margin-top:21px; }
.lab-ai-core > span:last-of-type { font-size:10px; letter-spacing:.04em; margin-top:11px; color:#9fa9c4; }
.lab-core-pulses { display:flex; gap:7px; margin-top:22px; }
.lab-core-pulses i { width:5px; height:5px; border-radius:50%; background:#b7bcff; animation:lab-signal 2s infinite; }.lab-core-pulses i:nth-child(2) { animation-delay:.3s; }.lab-core-pulses i:nth-child(3) { animation-delay:.6s; }
.lab-source-output > strong { display:block; font-size:32px; line-height:1.15; letter-spacing:-.03em; font-weight:300; margin:24px 0; }
.lab-source-output p { color:#9fa9c4; }
.lab-console { display:grid; grid-template-columns:.8fr 1.2fr; gap:35px; }
.lab-console .lab-result { min-height:470px; }
.lab-palette { display:flex; gap:12px; align-items:center; height:70px; margin-bottom:30px; }
.lab-palette i { flex:1; background:var(--color); height:70%; border-radius:30px; animation:lab-palette 5s calc(var(--step)*-.75s) ease-in-out infinite; }
/* The opposing panes visibly compress before settling into their 20% rail. */
.aj-heading { position:relative; overflow:hidden; background:radial-gradient(ellipse at 90% 15%,#f2e5e8,transparent 62%),#fff; }
.aj-heading::after { content:''; position:absolute; width:370px; height:370px; right:4%; top:-45%; background:url('/sabban-co-icon-v50.svg') center/contain no-repeat; opacity:.04; pointer-events:none; }
.aj-switch button { position:relative; overflow:hidden; min-height:78px; }
.aj-switch button .aj-choice-label { display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-size:15px; opacity:1; }
.aj-choice-label small { font-size:10px; font-weight:300; opacity:.65; letter-spacing:.02em; }
.aj-choice-arrow { margin-left:12px; font-size:22px; font-weight:300; animation:aj-invite 2.8s ease-in-out infinite; }
.aj-switch button[aria-pressed=false]::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,#531f2b0c 46%,transparent 67%); translate:-100% 0; animation:aj-choice-shine 6s ease-in-out infinite; }
.aj-switch button[aria-pressed=true] .aj-choice-arrow { animation:none; opacity:.5; rotate:90deg; }
.aj-pane { transition:padding .85s cubic-bezier(.22,.7,.2,1); }
.aj-pane-heading h3 { transition:font-size .8s ease,line-height .8s ease; }
.aj-expanded { animation:none; transform-origin:left center; }
.aj-professional .aj-expanded { transform-origin:right center; }
.aj-pane.is-compressing .aj-expanded { pointer-events:none; user-select:none; max-width:none; }
.aj-pane.is-compressing .aj-pane-heading { opacity:.75; }
.aj-rail-preview { margin-top:35px; overflow:hidden; border-radius:3px; background:#fff; opacity:.86; }
.aj-rail-preview img { width:100%; height:auto; display:block; }
.aj-depth { background:#531f2b; color:#fff; --lab-accent:#e7bec9; --lab-line:#ffffff35; }
.lab-jewelry-console { display:grid; grid-template-columns:1fr 1.3fr; gap:40px; }
.aj-depth .lab-result { background:#401823; border-color:#ffffff26; }
.lab-layout-count { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.lab-layout-count span { display:grid; place-items:center; width:39px; height:39px; border:1px solid #ffffff40; border-radius:50%; font-size:15px; animation:lab-layout-pulse 7s calc(var(--step)*.65s) infinite; }
.aj-close-look { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:60px; background:#fff; }
.lab-jewelry-macro { min-width:0; }
.lab-zoom-image { display:block; position:relative; width:100%; aspect-ratio:1; padding:0; background:#fff; border:1px solid #531f2b20; border-radius:50% 50% 8px 8px; overflow:hidden; cursor:zoom-in!important; }
.lab-zoom-image img { width:100%; height:100%; object-fit:contain; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.lab-zoom-image.is-zoomed { cursor:zoom-out!important; }.lab-zoom-image.is-zoomed img { transform:scale(1.85); }
.lab-zoom-image > span { position:absolute; bottom:18px; inset-inline:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 16px; color:#531f2b; background:#ffffffeb; border:1px solid #531f2b20; border-radius:5px; font-size:12px; }
.lab-zoom-image b { font-size:23px; font-weight:300; }
.lab-macro-caption { padding:24px 0; }.lab-macro-caption span { display:block; font-size:11px; opacity:.6; }.lab-macro-caption strong { display:block; font-size:22px; line-height:1.3; font-weight:300; margin-top:9px; }
.lab-close-copy p:not(.ai-kicker) { margin-top:26px; color:#87616c; }
.lab-facts { display:flex; gap:45px; padding-top:30px; margin-top:32px; border-top:1px solid #531f2b25; }.lab-facts strong { display:block; font-size:50px; letter-spacing:-.05em; font-weight:250; }.lab-facts span { display:block; font-size:12px; opacity:.65; }
.aj-collection { background:#f5ecef; --lab-line:#531f2b30; --lab-accent:#531f2b; }
.lab-collection { display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; margin-top:45px; }
.lab-collection-images { padding:15px; background:#fff; border-radius:9px; }.lab-collection figure { margin:0; }.lab-collection img { display:block; width:100%; height:auto; }.lab-collection figcaption { padding:12px; text-align:center; font-size:12px; color:#805764; }.lab-collection .lab-options { margin-top:30px; }
/* The office worlds share WhatsApp's conversational familiarity, each with its own color. */
.ai-office-hero { position:relative; isolation:isolate; background:radial-gradient(ellipse at 8% 0%,#c0ece0,transparent 50%),radial-gradient(ellipse at 85% 75%,#d0cfee70,transparent 55%),#edf3ef; }
.ai-office-hero::before { content:''; position:absolute; width:65%; aspect-ratio:1; left:-20%; top:20%; opacity:.035; background:url('/sabban-co-icon-v50.svg') center/contain no-repeat; pointer-events:none; z-index:-1; }
.ai-invoices .ai-office-hero { background:radial-gradient(ellipse at 0% 5%,#275747,transparent 60%),radial-gradient(ellipse at 90% 70%,#34305288,transparent 58%),#0c1f21; }.ai-invoices .ai-office-hero::before { filter:brightness(0) invert(1); opacity:.035; }
.ai-office .ai-chat-shell { box-shadow:16px 25px 0 -13px #aac9b2,30px 42px 0 -23px #c6b6df,0 40px 80px #14372c40; }
.ai-invoices .ai-chat-shell { box-shadow:16px 25px 0 -13px #547b6b,30px 42px 0 -23px #5e5378,0 40px 80px #0006; }
.ai-playground { --lab-accent:#9de0c1; --lab-line:#d7ffef30; background:radial-gradient(ellipse at 12% 10%,#285953,transparent 60%),#102c2d; color:#e8f7ef; overflow:hidden; }
.ai-playground.lab-billing { --lab-accent:#c1b3ee; background:radial-gradient(ellipse at 82% 8%,#47354f,transparent 60%),#201e32; color:#f0eafa; }
.ai-playground.lab-mail h3 em { color:#a7ddc9; }.ai-playground.lab-billing h3 em { color:#d6bdea; }
.lab-office-console { display:grid; grid-template-columns:.78fr 1.22fr; gap:40px; align-items:start; }
.lab-command-deck > .lab-eyebrow { margin-bottom:25px; }.lab-command-note { font-size:12px!important; opacity:.55; margin-top:18px!important; }
.lab-office-result { background:#f4faf6; color:#23463e; border:0; box-shadow:0 30px 70px #0003; translate:var(--lab-x,0) var(--lab-y,0); transition:translate .4s ease-out; min-height:650px; }
.lab-billing .lab-office-result { background:#f8f4fc; color:#49394e; }
.lab-request { margin-left:12%; background:#d8eee2; padding:22px; border-radius:16px 4px 16px 16px; }
.lab-billing .lab-request { background:#e6ddf2; }
.lab-request > span { display:block; font-size:11px; opacity:.6; margin-bottom:9px; }.lab-request strong { display:block; font-size:17px; line-height:1.5; font-weight:350; }
.lab-assistant { margin-top:30px; }.lab-assistant .lab-eyebrow { font-size:11px; }.ai-experience .lab-assistant h4 { font-size:30px; margin:16px 0; }
.lab-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-block:1px solid #173e3325; padding:23px 0; margin-top:28px; }
.lab-metrics strong { display:block; font-size:clamp(22px,2.4vw,36px); font-weight:300; line-height:1.2; letter-spacing:-.045em; overflow-wrap:anywhere; }.lab-metrics span { display:block; font-size:11px; margin-top:9px; opacity:.6; }
.lab-status { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.5; padding-block:22px; }.lab-status i { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#4c9279; }.lab-billing .lab-status i { background:#9c7dad; }
.lab-path { padding:0; margin:15px 0 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; }
.lab-path li { position:relative; padding-top:17px; border-top:2px solid #244c3c25; }.lab-path li::before { content:''; position:absolute; left:0; top:-2px; width:25%; height:2px; background:#52a48c; animation:lab-flow 4s calc(var(--step)*.6s) infinite; }.lab-billing .lab-path li::before { background:#9b82bd; }
.lab-path li > span { display:block; font-size:10px; opacity:.45; }.lab-path strong { display:block; font-size:11px; line-height:1.4; font-weight:400; margin-top:9px; }
.lab-next { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; padding:15px 0 0; border:0; border-top:1px solid #173e3325; color:inherit; background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer; }.lab-next span { font-size:25px; }
.lab-orbit-label { display:flex; align-items:center; gap:20px; padding:40px 0; margin-top:20px; font-size:13px; line-height:1.6; color:#b4d9c8; }.lab-billing .lab-orbit-label { color:#c4b4d8; }
.lab-whatsapp-symbol { width:64px; height:64px; flex-shrink:0; background:#b4d9c8; mask:url('/assets/social/whatsapp.svg') center/contain no-repeat; -webkit-mask:url('/assets/social/whatsapp.svg') center/contain no-repeat; animation:lab-icon-float 5s ease-in-out infinite; }.lab-billing .lab-whatsapp-symbol { background:#c4b4d8; }
.ai-experience .lab-disclaimer { max-width:850px; font-size:12px; opacity:.5; margin-top:35px; }
.experience-lab:not(.lab-is-visible) *, .experience-lab:not(.lab-is-visible) *::before,
.motion-paused .experience-lab *, .motion-paused .experience-lab *::before,
.ai-jewelry.motion-paused .aj-switch *,.ai-jewelry.motion-paused .aj-switch *::after { animation-play-state:paused!important; }
@keyframes lab-signal { 0%,100% { opacity:.3; } 45% { opacity:1; box-shadow:0 0 11px currentColor; } }
@keyframes lab-palette { 0%,100% { scale:1 .8; } 50% { scale:1 1.1; } }
@keyframes lab-layout-pulse { 0%,14% { background:#ffffff20; border-color:#fff9; } 28%,100% { background:transparent; border-color:#fff3; } }
@keyframes lab-flow { 0% { translate:0 0; opacity:0; } 20% { opacity:1; } 85%,100% { translate:290% 0; opacity:0; } }
@keyframes lab-icon-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes aj-invite { 0%,100% { translate:0 0; } 50% { translate:5px 0; } }
@keyframes aj-choice-shine { 0%,40% { translate:-100% 0; } 80%,100% { translate:100% 0; } }
@media(max-width:1000px) {
  .lab-editorial,.lab-jewelry-console,.lab-office-console,.lab-collection,.aj-close-look { gap:35px; }.lab-signal-system { gap:23px; grid-template-columns:1fr 1fr; }.lab-source-output { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; column-gap:35px; }.lab-source-output > .lab-eyebrow { grid-column:1/-1; }.lab-source-output strong { margin-bottom:0; }.lab-source-output p { align-self:center; }.lab-result { padding:27px; }.lab-ai-core { min-height:300px; }
}
@media(max-width:760px) {
  .lab-editorial { grid-template-columns:1fr; gap:28px; margin-bottom:35px; }.lab-editorial > p { max-width:none; }.lab-console,.lab-jewelry-console,.lab-office-console,.lab-collection,.aj-close-look { grid-template-columns:1fr; }.lab-console .lab-options,.lab-jewelry-console .lab-options { grid-template-columns:1fr 1fr; gap:9px; }.lab-options button { min-height:64px; padding:14px; font-size:13px; gap:12px; }.lab-options button b { font-size:18px; }.lab-result { padding:25px; }.lab-console .lab-result { min-height:450px; }.lab-office-result { min-height:620px; translate:none; }.lab-collection { gap:30px; }.aj-close-look { gap:35px; }.lab-jewelry-macro { max-width:520px; }.lab-orbit-label { padding:20px 0 0; margin-top:10px; }.lab-whatsapp-symbol { width:45px; height:45px; }.lab-command-deck > .lab-eyebrow { margin-bottom:18px; }.lab-facts strong { font-size:45px; }.aj-choice-label small { font-size:9px; }.aj-switch button .aj-choice-label { font-size:12px; }.aj-choice-arrow { font-size:18px; margin-left:0; }.aj-switch button { gap:10px; padding-inline:14px; }.aj-rail-preview { margin-top:25px; margin-inline:-6px; }
}
@media(max-width:480px) {
  .lab-signal-system { grid-template-columns:1fr; gap:28px; padding-bottom:40px; }.lab-ai-core { width:280px; max-width:100%; margin:auto; }.lab-source-output { display:block; }.lab-source-output strong { margin:18px 0; }.lab-console .lab-result { min-height:520px; }.lab-palette { height:60px; gap:9px; }.lab-result-top { font-size:10px; gap:12px; }.experience-lab .lab-result :is(h3,h4) { font-size:29px; }.lab-result { padding:24px 20px; }.experience-lab .lab-result p { font-size:15px; }.lab-tags span { font-size:10px; }.lab-layout-count { gap:7px; }.lab-layout-count span { width:31px; height:31px; font-size:13px; }.lab-options button { font-size:12px; gap:9px; }.lab-options button > span { font-size:9px; }.lab-request { margin-left:7%; padding:18px; }.lab-request strong { font-size:15px; }.lab-metrics { gap:9px; }.lab-metrics strong { font-size:25px; }.lab-metrics span { font-size:10px; }.lab-path { grid-template-columns:1fr 1fr; gap:22px 17px; }.lab-next { font-size:12px; }.lab-office-result { min-height:770px; }.aj-switch button { padding:17px 10px; }.aj-switch button > span:first-child { display:none; }.aj-choice-label small { max-width:110px; line-height:1.3; }.aj-choice-arrow { margin-left:auto; }.lab-editorial > p { font-size:15px; }.lab-disclaimer { font-size:11px!important; }
}
@media(prefers-reduced-motion:reduce) {
  .experience-lab *, .experience-lab *::before,.aj-switch *, .aj-switch *::after { animation:none!important; transition:none!important; }.experience-lab .lab-office-result,.experience-lab .lab-brand { translate:none; }.aj-switch button[aria-pressed=false]::after { display:none; }
}

/* Keep the new longer headline and floating platforms clear on small screens. */
.studio-world.social-universe .su-title { font-size:clamp(60px,7.7vw,110px); }
@media(max-width:760px) {
 .studio-world.social-universe .su-title { font-size:clamp(48px,10vw,72px); }
 .su-world-stage { position:relative; }
 .su-world-stage .su-hero-platforms { inset:0; height:auto; }
}
@media(max-width:450px) { .studio-world.social-universe .su-title { font-size:clamp(38px,10.5vw,47px); } }

.ai-jewelry.motion-paused :is(.aj-split,.aj-pane,.aj-pane-heading h3),
.motion-paused .experience-lab * { transition:none!important; }
.aj-pane { min-height:0; }