/* Original Noluvio Concept Lab — three distinct fictional, accessible visual directions.
   No remote fonts, images, trackers, UI frameworks or customer records. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
button,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent }
button{cursor:pointer}a{text-decoration:none;color:inherit}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #00A7FF;outline-offset:4px}
.skip{position:absolute;top:-90px;inset-inline-start:15px;background:white;color:#12263F;padding:9px 15px;z-index:100}
.skip:focus{top:12px}
.concept-root{
 --bg:#101D32;--ink:#F6FAFC;--accent:#74E2CF;--scene:#143457;
 --surface:#F8FBFD;--body-ink:#122840;--line:#D6E5F3;--muted:#576F81;
 --contact:#0C2942;--cta-ink:#0C243B;--big-shape:#317EAF;
 background:var(--surface);color:var(--body-ink);overflow-x:clip
}
.concept-root[data-demo=construction]{--bg:#101D32;--accent:#74E2CF}\n.concept-root[data-demo=studio]{
 --bg:#F4E9DE;--ink:#1D2431;--accent:#E95846;--scene:#F6D6C4;
 --surface:#FFF9F3;--body-ink:#2A2530;--line:#E9D6C9;--muted:#766158;
 --contact:#2B2533;--cta-ink:#FFFFFF;--big-shape:#F28277
}
.concept-root[data-demo=cafe]{
 --bg:#22382D;--ink:#F8F4E9;--accent:#E8BC7F;--scene:#385143;
 --surface:#F6F2E8;--body-ink:#24372E;--line:#DBDED2;--muted:#687469;
 --contact:#243F33;--cta-ink:#253D31;--big-shape:#D2A777
}
.concept-wrap{max-width:1310px;width:calc(100% - 100px);margin-inline:auto}
.concept-preview-bar{background:#0C1424;color:#DCECF5;font-size:11px;line-height:1.6}
.concept-bar-inner{display:flex;align-items:center;min-height:44px;gap:23px}
.concept-preview-logo{font-size:11px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.concept-preview-logo b{font-weight:550;color:#7FC9E9;margin-inline-start:5px}
#concept-top-note{flex:1;color:#ADC5D6}
#concept-back{font-weight:800;color:#9BE2F7;border-bottom:1px solid #45667D;white-space:nowrap}
.concept-nav{position:sticky;top:0;z-index:15;background:var(--bg);color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent);backdrop-filter:blur(16px)}
.concept-nav-inner{display:flex;align-items:center;gap:29px;min-height:91px}
.concept-brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:830;letter-spacing:-.035em;flex:none}
.concept-brand:hover,.concept-menu a:hover{text-decoration:none}
.concept-brand-glyph{display:grid;place-items:center;border-radius:11px;background:var(--accent);color:var(--bg);font-weight:900;font-size:20px;width:42px;height:42px}
.concept-menu{display:flex;gap:27px;margin-inline:auto;font-size:12px;font-weight:730;white-space:nowrap}
.concept-menu a{opacity:.82;transition:opacity .2s}
.concept-menu a:hover{opacity:1}
.concept-actions{display:flex;align-items:center;gap:10px}
.concept-switch-label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;opacity:.67}
#concept-switcher,#concept-language{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);min-height:41px;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:750}
#concept-switcher{max-width:140px}
#concept-switcher option{background:#F6F8FB;color:#12233B}
#concept-language{padding-inline:16px}
#concept-language:hover,#concept-switcher:hover{border-color:var(--accent)}
.concept-hero{position:relative;overflow:hidden;background:var(--bg);color:var(--ink)}
.concept-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 44%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 40%)}
.concept-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);align-items:center;gap:30px;min-height:680px;padding-block:76px 82px}
.concept-hero-copy{position:relative;z-index:2;max-width:670px}
.concept-eyebrow,.section-overline{font-size:11px;line-height:1.4;letter-spacing:.17em;font-weight:850;text-transform:uppercase}
.concept-eyebrow{color:var(--accent);margin:0 0 34px}
.concept-hero h1{font-size:clamp(56px,6.5vw,100px);letter-spacing:-.065em;line-height:1.02;font-weight:840;text-wrap:balance;margin:0 0 29px}
.concept-intro{font-size:clamp(17px,1.5vw,21px);line-height:1.8;max-width:540px;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.concept-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:34px}
.concept-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--cta-ink);min-height:58px;border-radius:5px;padding:15px 26px;font-size:13px;font-weight:860;box-shadow:0 16px 34px color-mix(in srgb,var(--accent) 12%,transparent);transition:transform .22s,box-shadow .22s}
.concept-primary:hover{transform:translateY(-3px);box-shadow:0 19px 45px color-mix(in srgb,var(--accent) 22%,transparent);text-decoration:none}
.concept-hero-aside{max-width:230px}
#concept-hero-aside{max-width:210px;font-size:12px;line-height:1.65;opacity:.73}
.concept-scene{position:relative;isolation:isolate;width:100%;height:560px;margin:auto}
.scene-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at center,#000 21%,transparent 70%);opacity:.7}
.scene-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:50%;transform:rotate(-20deg)}
.orbit-a{width:520px;height:415px;top:11%;inset-inline-start:6%}
.orbit-b{width:390px;height:490px;top:6%;inset-inline-end:9%;transform:rotate(32deg)}
.scene-structure{position:absolute;inset:12% 12% 13% 12%;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:9px;transform:rotate(-6deg);background:linear-gradient(135deg,color-mix(in srgb,var(--scene) 91%,transparent),color-mix(in srgb,var(--bg) 92%,transparent));box-shadow:0 35px 80px rgba(0,0,0,.2);overflow:hidden}
.scene-structure>div:not(.structure-caption){position:absolute}
.structure-one{width:39%;height:75%;bottom:-10%;inset-inline-start:10%;background:var(--big-shape);clip-path:polygon(0 16%,67% 0,100% 100%,0 100%)}
.structure-two{width:44%;height:57%;bottom:-5%;inset-inline-end:3%;background:var(--accent);clip-path:polygon(35% 0,100% 18%,100% 100%,0 100%)}
.structure-three{width:45%;height:28%;top:18%;inset-inline-start:29%;background:color-mix(in srgb,var(--ink) 22%,transparent);transform:rotate(-24deg);border-radius:2px}
.structure-line-one,.structure-line-two{height:2px;width:105%;background:color-mix(in srgb,var(--ink) 50%,transparent);transform:rotate(-24deg);top:39%;inset-inline-start:-7%}
.structure-line-two{top:56%;transform:rotate(18deg);opacity:.6}
.structure-caption{position:absolute;bottom:0;inset-inline:0;display:flex;justify-content:space-between;align-items:center;padding:16px 23px;background:color-mix(in srgb,var(--bg) 83%,transparent);color:var(--ink);font-size:11px;font-weight:850;letter-spacing:.15em;backdrop-filter:blur(11px)}
.scene-stamp{position:absolute;top:4%;inset-inline-end:0;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);background:var(--bg);padding:13px 17px;font-weight:800;font-size:9px;line-height:1.6;letter-spacing:.15em;color:var(--accent);transform:rotate(7deg)}
.concept-root[data-demo=studio] .scene-structure{border-radius:44% 56% 62% 38%;transform:rotate(16deg);background:linear-gradient(120deg,#F2B2A4,#F4E6B9)}
.concept-root[data-demo=studio] .structure-one{width:63%;height:64%;bottom:-3%;inset-inline-start:-10%;background:#EA6355;border-radius:50%;clip-path:none}
.concept-root[data-demo=studio] .structure-two{width:55%;height:52%;bottom:5%;inset-inline-end:-9%;background:#FFDD58;clip-path:none;border-radius:43%}
.concept-root[data-demo=studio] .structure-three{width:80px;height:80px;border-radius:50%;background:#1D2538;inset-inline-start:37%;top:15%;transform:none}
.concept-root[data-demo=cafe] .scene-structure{border-radius:50%;transform:rotate(-9deg);background:radial-gradient(circle,#E5CEAA 0 17%,#87664F 18% 27%,#F7E7C7 28% 38%,#4C5941 39% 100%)}
.concept-root[data-demo=cafe] .structure-one{width:53%;height:20%;bottom:25%;inset-inline-start:20%;background:rgba(255,255,255,.24);clip-path:none;border-radius:50%;transform:rotate(22deg)}
.concept-root[data-demo=cafe] .structure-two{width:28%;height:17%;top:11%;inset-inline-end:14%;background:#D8AD70;border-radius:44% 48% 50% 40%;clip-path:none}
.concept-root[data-demo=cafe] .structure-three{width:20%;height:13%;top:72%;inset-inline-start:44%;background:#DBBC83;border-radius:50%;transform:rotate(5deg)}
.concept-intro-strip{background:var(--surface);color:var(--body-ink);padding-block:105px}
.intro-strip-inner{display:grid;grid-template-columns:.5fr 1.2fr 1fr;align-items:center;gap:55px}
.section-overline{color:color-mix(in srgb,var(--body-ink) 65%,transparent)}
.intro-strip-inner h2{font-size:clamp(38px,3.9vw,60px);letter-spacing:-.055em;line-height:1.12;font-weight:830;margin:0;text-wrap:balance}
.intro-strip-inner>p:last-child{font-size:16px;line-height:1.85;color:var(--muted);margin:0}
.concept-work{padding-block:104px 116px;border-top:1px solid var(--line);background:var(--surface);scroll-margin-top:105px}
.concept-section-header{display:grid;grid-template-columns:1fr .65fr;align-items:end;gap:70px;margin-bottom:39px}
.concept-section-header h2{font-size:clamp(40px,4.6vw,65px);letter-spacing:-.06em;line-height:1.1;margin:17px 0 0;font-weight:840;max-width:750px;text-wrap:balance}
.concept-section-header>p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.concept-case-grid{display:grid;grid-template-columns:1.22fr .93fr .85fr;gap:23px;align-items:start}
.concept-case:nth-child(2){margin-top:52px}.concept-case:nth-child(3){margin-top:103px}
.concept-case{min-width:0}
.concept-case-art{height:290px;border-radius:4px;position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.concept-case-art i{position:absolute;display:block}
.case-art-one{background:linear-gradient(128deg,var(--bg),var(--scene))}
.case-art-one i:nth-child(1){width:75%;height:75%;background:var(--big-shape);bottom:-20%;inset-inline-start:-15%;transform:rotate(26deg)}
.case-art-one i:nth-child(2){width:63%;height:57%;background:var(--accent);top:-15%;inset-inline-end:-18%;border-radius:50%}
.case-art-one i:nth-child(3){width:76%;height:3px;background:color-mix(in srgb,var(--ink) 68%,transparent);top:48%;inset-inline-start:8%;transform:rotate(-28deg)}
.case-art-two{background:linear-gradient(135deg,var(--scene),var(--bg))}
.case-art-two i:nth-child(1){width:68%;height:68%;border-radius:50%;border:36px solid var(--accent);top:15%;inset-inline-start:16%}
.case-art-two i:nth-child(2){width:50%;height:40%;background:var(--big-shape);bottom:-10%;inset-inline-end:-9%;transform:rotate(20deg)}
.case-art-two i:nth-child(3){width:54%;height:3px;background:var(--ink);top:22%;inset-inline-start:10%;transform:rotate(30deg)}
.case-art-three{background:linear-gradient(160deg,var(--bg),var(--scene))}
.case-art-three i:nth-child(1){width:62%;height:67%;background:var(--accent);top:12%;inset-inline-start:19%;border-radius:25% 75% 55% 45%}
.case-art-three i:nth-child(2){width:55%;height:34%;background:var(--big-shape);bottom:4%;inset-inline-end:-14%;transform:rotate(-24deg)}
.case-art-three i:nth-child(3){width:70%;height:70%;border:1px solid var(--ink);border-radius:50%;top:14%;inset-inline-start:16%;opacity:.6}
.case-meta{font-size:11px;letter-spacing:.11em;font-weight:850;color:var(--muted);margin:21px 0 12px}
.concept-case h3{font-size:clamp(23px,2.2vw,34px);line-height:1.22;letter-spacing:-.04em;font-weight:830;margin:0 0 10px}
.concept-case>p{font-size:14px;line-height:1.78;color:var(--muted);margin:0}
.concept-disclosure{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.65}
.concept-comparison{background:var(--bg);color:var(--ink);padding-block:112px;overflow:hidden}
.comparison-layout{display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:65px}
.comparison-copy h2{font-size:clamp(41px,4.5vw,65px);line-height:1.1;letter-spacing:-.055em;margin:18px 0 24px}
.comparison-copy>p:not(.section-overline){line-height:1.85;font-size:15px;color:color-mix(in srgb,var(--ink) 76%,transparent)}
.comparison-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:31px 0 19px}
.comparison-buttons button{border:1px solid color-mix(in srgb,var(--ink) 32%,transparent);background:transparent;color:var(--ink);border-radius:4px;padding:12px 18px;font-size:12px;font-weight:780;min-height:48px}
.comparison-buttons button[aria-pressed=true]{background:var(--accent);color:var(--cta-ink);border-color:var(--accent)}
#comparison-caption{font-size:12px!important;min-height:20px}
.comparison-display{padding:16px;min-width:0;position:relative}
.compare-browser{border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--body-ink);box-shadow:0 28px 60px rgba(0,0,0,.24);transform:rotate(2deg);transition:transform .3s}
.compare-browser-top{display:flex;gap:6px;align-items:center;padding:16px 20px;background:color-mix(in srgb,var(--surface) 92%,var(--bg))}
.compare-browser-top i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent)}
.compare-browser-top b{font-size:10px;letter-spacing:.12em;color:var(--muted);margin-inline-start:auto}
.compare-body{padding:55px clamp(28px,4vw,65px) 48px;min-height:380px}
#compare-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:840;color:var(--muted)}
.compare-body strong{display:block;font-size:clamp(32px,3.9vw,60px);line-height:1.11;letter-spacing:-.055em;max-width:510px;font-weight:840;margin:22px 0 18px}
.compare-body p{font-size:14px;line-height:1.75;color:var(--muted);max-width:470px}
.compare-action{display:inline-flex;background:var(--bg);color:var(--ink);padding:13px 19px;border-radius:4px;font-size:12px;font-weight:760;margin:14px 0 22px}
.compare-blocks{display:flex;gap:11px}.compare-blocks i{display:block;width:33%;height:35px;background:color-mix(in srgb,var(--big-shape) 22%,transparent);border-radius:4px}
.concept-root[data-view=basic] .compare-browser{transform:none;border-radius:0;box-shadow:none}
.concept-root[data-view=basic] .compare-browser-top{background:#EEE;color:#333}
.concept-root[data-view=basic] .compare-body{background:#F0F0F0;color:#293544}
.concept-root[data-view=basic] .compare-body strong{font-size:clamp(26px,2.8vw,42px);font-weight:520;letter-spacing:0}
.concept-root[data-view=basic] .compare-action{background:#888;color:white;border-radius:0}
.concept-root[data-view=basic] .compare-blocks i{border-radius:0;background:#DDD}
.concept-steps{background:var(--surface);padding-block:113px}
.concept-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.concept-step-grid article{border-top:1px solid var(--line);padding:24px 10px 0 0}
.concept-step-grid article>span{font-size:35px;letter-spacing:-.04em;font-weight:820;color:var(--muted)}
.concept-step-grid h3{font-size:24px;letter-spacing:-.04em;margin:30px 0 11px}
.concept-step-grid p{font-size:14px;line-height:1.7;color:var(--muted);max-width:335px}
.concept-contact{background:var(--contact);color:#FAFBFC;padding-block:95px}
.contact-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:56px}
.contact-inner .section-overline{color:#A7DBE4}
.contact-inner h2{font-size:clamp(40px,4.6vw,70px);line-height:1.09;letter-spacing:-.055em;font-weight:840;max-width:800px;margin:16px 0}
.contact-inner p:not(.section-overline){color:#CAD9E8;max-width:650px;line-height:1.8}
.contact-actions{display:grid;gap:17px;min-width:250px;justify-items:start}
#concept-brief-link{padding:17px 22px;background:#F8FAFC;color:#132B45;border-radius:4px;font-size:13px;font-weight:840;white-space:nowrap}
#concept-brief-link:hover{text-decoration:none;background:#DDF6F1}
#concept-contact-note{font-size:11px;line-height:1.6;color:#C5DBE3;max-width:300px}
#concept-footer{background:#0C1424;color:#DCEAF6;padding-block:32px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:23px;font-size:11px}
.footer-inner strong{font-size:15px;letter-spacing:.08em}.footer-inner strong small{font-size:9px;color:#88C9E4}
.footer-inner a{font-weight:750;color:#A8E6F5}
@media(max-width:1160px){
 .concept-nav-inner{gap:17px}.concept-menu{gap:16px}.concept-hero-grid{gap:10px}
 .concept-scene{height:500px}.concept-hero h1{font-size:clamp(54px,6.1vw,80px)}
 .concept-case-art{height:245px}.comparison-layout{gap:29px}
}
@media(max-width:920px){
 .concept-wrap{width:calc(100% - 58px)}
 .concept-nav-inner{flex-wrap:wrap;padding-block:15px}
 .concept-menu{order:3;width:100%;justify-content:center;padding-bottom:7px}
 .concept-actions{margin-inline-start:auto}
 .concept-hero-grid{grid-template-columns:1fr;gap:12px;padding-block:66px 42px;min-height:0}
 .concept-hero-copy{max-width:720px}
 .concept-hero h1{font-size:clamp(57px,8vw,89px)}
 .concept-scene{width:min(100%,660px);height:470px}
 .intro-strip-inner{grid-template-columns:1fr 2fr;gap:20px 45px}
 .intro-strip-inner>p:last-child{grid-column:2}
 .concept-case-grid{gap:13px}
 .concept-case-art{height:220px}
 .comparison-layout{grid-template-columns:1fr;gap:30px}
 .comparison-copy{max-width:720px}
 .contact-inner{grid-template-columns:1fr}
}
@media(max-width:760px){
 html{scroll-padding-top:120px}
 .concept-wrap{width:calc(100% - 36px)}
 .concept-bar-inner{flex-wrap:wrap;gap:5px 12px;padding-block:9px;font-size:10px}
 #concept-top-note{order:3;flex:0 0 100%}
 .concept-nav-inner{min-height:65px;gap:14px}
 .concept-brand{font-size:17px}.concept-brand-glyph{width:36px;height:36px;font-size:18px}
 .concept-menu{justify-content:space-between;gap:9px;font-size:11px}
 .concept-actions{gap:6px}
 .concept-switch-label{display:none}
 #concept-switcher{max-width:110px;font-size:10px;padding:7px}
 #concept-language{min-height:38px;padding:7px 10px;font-size:10px}
 .concept-hero-grid{padding-block:58px 32px}
 .concept-hero h1{font-size:clamp(45px,11vw,71px)}
 .concept-intro{font-size:15px}
 .concept-hero-actions{gap:16px}
 .concept-primary{min-height:52px;padding:12px 18px}
 .concept-scene{height:350px;max-width:540px}
 .orbit-a{height:290px;width:350px}.orbit-b{height:330px;width:290px}
 .scene-structure{inset:8% 12%}.scene-stamp{font-size:8px}
 .concept-intro-strip{padding-block:75px}
 .intro-strip-inner{grid-template-columns:1fr;gap:20px}
 .intro-strip-inner>p:last-child{grid-column:auto}
 .intro-strip-inner h2{font-size:clamp(38px,8vw,54px)}
 .concept-work{padding-block:74px}
 .concept-section-header{grid-template-columns:1fr;gap:15px;margin-bottom:28px}
 .concept-section-header h2{font-size:clamp(37px,9vw,51px)}
 .concept-case-grid{display:grid;grid-template-columns:1fr;gap:35px}
 .concept-case:nth-child(2),.concept-case:nth-child(3){margin-top:0}
 .concept-case-art{height:255px}
 .concept-case h3{font-size:27px}
 .concept-disclosure{margin-top:38px}
 .concept-comparison{padding-block:72px}
 .comparison-copy h2{font-size:clamp(37px,9vw,53px)}
 .comparison-display{padding:0}
 .compare-browser{transform:none}.compare-body{padding:32px 24px;min-height:300px}
 .compare-body strong{font-size:37px}
 .concept-steps{padding-block:74px}
 .concept-step-grid{grid-template-columns:1fr;gap:18px}
 .concept-step-grid article{padding-top:20px}
 .concept-step-grid h3{margin-top:15px}
 .concept-contact{padding-block:75px}
 .contact-inner h2{font-size:clamp(39px,9vw,57px)}
 .footer-inner{flex-wrap:wrap;align-items:start}
}
@media(max-width:420px){
 .concept-menu{flex-wrap:wrap;justify-content:flex-start}
 .concept-hero h1{font-size:45px}
 .concept-scene{height:300px}
 .scene-structure{inset:8% 11%}.scene-stamp{top:0}
 .intro-strip-inner h2{font-size:38px}
 .contact-actions{min-width:0}
 #concept-brief-link{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .concept-primary,.compare-browser,.concept-menu a{transition:none}
 .concept-primary:hover{transform:none}
}
html[dir=rtl] .concept-hero-copy,html[dir=rtl] .comparison-copy{text-align:start}
html[dir=rtl] .concept-case{text-align:start}


/* Industry-specific interactive examples — original designs and text-only fixed datasets.
   Clear, useful interactions; not a transaction, customer project, or live API. */
.concept-lab{
  padding-block:110px 118px;
  background:color-mix(in srgb,var(--surface) 94%,var(--scene));
  color:var(--body-ink);
  border-top:1px solid var(--line);
  scroll-margin-top:112px;
}
.lab-heading{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:70px;margin-bottom:39px}
.lab-heading .section-overline{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em;font-weight:820}
.lab-heading h2{font-size:clamp(38px,4.7vw,69px);line-height:1.08;letter-spacing:-.055em;font-weight:840;max-width:810px;margin:15px 0 0;text-wrap:balance}
.lab-heading>p{font-size:15px;line-height:1.83;color:var(--muted);max-width:540px;margin:0}
.lab-shell{display:grid;grid-template-columns:minmax(235px,.38fr) minmax(0,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 27px 68px rgba(19,40,62,.07);background:#FFFFFF}
.lab-picker{display:flex;flex-direction:column;align-items:stretch;padding:clamp(24px,3vw,42px);background:color-mix(in srgb,var(--surface) 80%,#FFF);border-inline-end:1px solid var(--line)}
.lab-picker-caption{font-size:10px;color:var(--muted);font-weight:860;letter-spacing:.16em;line-height:1.6;margin:0 0 22px}
.lab-tabs{display:grid;gap:10px}
.lab-tab{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--body-ink);padding:17px 18px;min-height:56px;font-size:13px;font-weight:790;transition:background .18s,border-color .18s,transform .18s}
.lab-tab:after{content:"↗";font-size:17px;opacity:.4;flex:none}
.lab-tab:hover{border-color:var(--accent);transform:translateX(2px)}
.lab-tab[aria-selected=true]{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.lab-tab[aria-selected=true]:after{color:var(--accent);opacity:1}
.lab-tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#lab-picker-note{margin:24px 0 10px;font-size:12px;line-height:1.7;color:var(--muted)}
.lab-service-link{margin-top:auto;padding-top:20px;color:var(--body-ink);font-size:12px;line-height:1.6;font-weight:820;text-decoration:underline;text-underline-offset:5px}
.lab-panel{display:flex;flex-direction:column;min-width:0}
.lab-visual{
  --lab-base:#102D49;--lab-accent:#49CAE5;--lab-secondary:#1E6C94;--lab-foreground:#EAFBFF;
  min-height:320px;position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(142deg,var(--lab-base),color-mix(in srgb,var(--lab-base) 76%,var(--lab-secondary)));
}
.lab-art-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--lab-foreground) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--lab-foreground) 11%,transparent) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at center,#000 24%,transparent 90%)}
.lab-visual>i{position:absolute;display:block;transition:transform .35s,border-radius .35s,background-color .35s}
.lab-visual-one{width:31%;height:80%;bottom:-15%;inset-inline-start:14%;background:var(--lab-secondary);clip-path:polygon(5% 9%,78% 0,100% 100%,0 100%)}
.lab-visual-two{width:38%;height:64%;bottom:-9%;inset-inline-end:18%;background:var(--lab-accent);clip-path:polygon(35% 0,100% 15%,100% 100%,0 100%);opacity:.93}
.lab-visual-three{width:58%;height:3px;top:26%;inset-inline-start:23%;background:var(--lab-foreground);transform:rotate(-21deg);box-shadow:0 0 28px var(--lab-accent)}
.lab-art-label{position:absolute;inset-inline:27px;bottom:21px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--lab-foreground);font-size:10px;font-weight:870;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.19)}
.lab-art-label b{font-size:13px;letter-spacing:.03em}
.lab-shell[data-lab-index="1"] .lab-visual-one{transform:translateX(22%) rotate(9deg)}
.lab-shell[data-lab-index="1"] .lab-visual-two{transform:translateX(-18%) rotate(-11deg)}
.lab-shell[data-lab-index="1"] .lab-visual-three{transform:rotate(24deg)}
.lab-shell[data-lab-index="2"] .lab-visual-one{transform:translateX(-8%) scale(1.12)}
.lab-shell[data-lab-index="2"] .lab-visual-two{transform:translateX(11%) scale(.81)}
.lab-shell[data-lab-index="2"] .lab-visual-three{transform:rotate(-42deg)}
.lab-shell[data-lab-demo="construction"] .lab-visual{--lab-base:#102D49;--lab-accent:#49CAE5;--lab-secondary:#1F6A98;--lab-foreground:#EAFBFF}
.lab-shell[data-lab-demo="studio"] .lab-visual{--lab-base:#EEC4B4;--lab-accent:#F2D85D;--lab-secondary:#E86257;--lab-foreground:#202634}
.lab-shell[data-lab-demo="studio"] .lab-art-grid{opacity:.25}
.lab-shell[data-lab-demo="studio"] .lab-visual-one{width:42%;height:83%;border-radius:45% 55% 64% 36%;clip-path:none;transform:rotate(21deg);inset-inline-start:13%;bottom:-27%}
.lab-shell[data-lab-demo="studio"] .lab-visual-two{width:39%;height:77%;clip-path:none;border-radius:50%;inset-inline-end:10%;bottom:4%;mix-blend-mode:multiply}
.lab-shell[data-lab-demo="studio"] .lab-visual-three{width:90px;height:90px;border-radius:50%;top:22%;inset-inline-start:43%;background:#202634;box-shadow:none;transform:none}
.lab-shell[data-lab-demo="studio"][data-lab-index="1"] .lab-visual{--lab-base:#B6D9F3;--lab-accent:#38EACB;--lab-secondary:#526DEE}
.lab-shell[data-lab-demo="studio"][data-lab-index="1"] .lab-visual-one{transform:rotate(-32deg) scale(1.08)}
.lab-shell[data-lab-demo="studio"][data-lab-index="1"] .lab-visual-two{transform:translateX(-12%) rotate(25deg);border-radius:26% 74% 32% 68%}
.lab-shell[data-lab-demo="studio"][data-lab-index="2"] .lab-visual{--lab-base:#1C263C;--lab-accent:#F2D443;--lab-secondary:#E75E50;--lab-foreground:#FFFFFF}
.lab-shell[data-lab-demo="studio"][data-lab-index="2"] .lab-visual-one{transform:rotate(8deg);border-radius:4px}
.lab-shell[data-lab-demo="studio"][data-lab-index="2"] .lab-visual-two{transform:rotate(-25deg);border-radius:3px;mix-blend-mode:normal}
.lab-shell[data-lab-demo="studio"][data-lab-index="2"] .lab-visual-three{background:#FFFFFF;border-radius:0;transform:translateY(15px)}
.lab-shell[data-lab-demo="cafe"] .lab-visual{--lab-base:#D6E4CF;--lab-accent:#D6A46F;--lab-secondary:#58745B;--lab-foreground:#284735;background:linear-gradient(135deg,#E9EBDD,#C5D8C1)}
.lab-shell[data-lab-demo="cafe"] .lab-visual-one{clip-path:none;border-radius:50%;width:205px;height:205px;bottom:22px;inset-inline-start:18%;background:radial-gradient(circle,#8A644A 0 27%,#D9B689 28% 40%,#F4E5C9 41% 53%,#4D6D54 54% 64%,transparent 65%)}
.lab-shell[data-lab-demo="cafe"] .lab-visual-two{clip-path:none;border-radius:50%;width:165px;height:165px;bottom:42px;inset-inline-end:16%;background:radial-gradient(circle,#DEB68C 0 42%,#F7E8C5 43% 56%,#6D7F62 57% 67%,transparent 68%)}
.lab-shell[data-lab-demo="cafe"] .lab-visual-three{width:120px;height:6px;background:#846947;box-shadow:0 10px 7px rgba(72,64,44,.13);transform:rotate(-42deg);top:38%;inset-inline-end:11%}
.lab-shell[data-lab-demo="cafe"][data-lab-index="1"] .lab-visual{background:linear-gradient(135deg,#E7DCBD,#C49E79)}
.lab-shell[data-lab-demo="cafe"][data-lab-index="1"] .lab-visual-one{transform:rotate(22deg) scale(.93)}
.lab-shell[data-lab-demo="cafe"][data-lab-index="1"] .lab-visual-two{transform:translateX(-20px) rotate(-11deg)}
.lab-shell[data-lab-demo="cafe"][data-lab-index="2"] .lab-visual{background:linear-gradient(125deg,#BAD3C6,#BBD3B9)}
.lab-shell[data-lab-demo="cafe"][data-lab-index="2"] .lab-visual-one{transform:translateY(-17px) scale(.92)}
.lab-shell[data-lab-demo="cafe"][data-lab-index="2"] .lab-visual-two{transform:translateX(20px) scale(1.1)}
.lab-panel-content{padding:35px clamp(27px,4vw,56px) 36px}
.lab-step{font-size:11px;letter-spacing:.15em;font-weight:850;color:var(--muted);text-transform:uppercase;margin:0 0 13px}
.lab-panel h3{font-size:clamp(30px,3vw,43px);font-weight:830;letter-spacing:-.045em;line-height:1.15;margin:0 0 15px}
#lab-panel-body{font-size:15px;line-height:1.8;color:var(--muted);max-width:640px;margin:0}
.lab-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;list-style:none;margin:27px 0 21px;padding:0}
.lab-points li{font-size:12px;line-height:1.55;font-weight:740;border-top:2px solid var(--accent);padding-top:12px}
.lab-disclosure{border-top:1px solid var(--line);padding-top:17px;font-size:11px;line-height:1.7;color:var(--muted);margin:0}
html[dir=rtl] .concept-lab{text-align:start}
@media(max-width:1050px){.lab-heading{gap:28px}.lab-shell{grid-template-columns:minmax(215px,.37fr) minmax(0,1fr)}.lab-picker{padding:25px}.lab-visual{min-height:280px}.lab-points{gap:9px}}
@media(max-width:760px){
 .concept-lab{padding-block:78px}
 .lab-heading{grid-template-columns:1fr;gap:14px;margin-bottom:26px}
 .lab-heading h2{font-size:clamp(36px,9vw,53px)}
 .lab-shell{grid-template-columns:1fr}
 .lab-picker{border-inline-end:0;border-bottom:1px solid var(--line);padding:25px}
 .lab-picker-caption{margin:0 0 12px}
 .lab-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .lab-tab{font-size:11px;padding:12px 9px;min-height:52px;justify-content:center;text-align:center}
 .lab-tab:after{display:none}
 #lab-picker-note{margin-top:16px;font-size:11px}
 .lab-service-link{padding-top:10px}
 .lab-visual{min-height:270px}
 .lab-panel-content{padding:28px 23px}
 .lab-panel h3{font-size:32px}
 .lab-points{grid-template-columns:1fr;gap:8px}
 .lab-points li{padding-top:10px}
}
@media(max-width:420px){.lab-picker{padding:19px}.lab-tab{font-size:10px;padding:10px 6px}.lab-visual{min-height:230px}.lab-panel-content{padding:24px 19px}.lab-panel h3{font-size:29px}}
@media(prefers-reduced-motion:reduce){.lab-tab,.lab-visual>i{transition:none}.lab-tab:hover{transform:none}}


/* Keep concept navigation operable on very narrow screens without covering content. */
@media(max-width:480px){
  .concept-nav-inner{gap:10px}
  .concept-menu{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scroll-padding-inline:8px;white-space:nowrap;padding:5px 0 10px;gap:18px}
  .concept-menu a{flex:0 0 auto;min-height:34px;padding-block:7px}
  .concept-preview-bar #concept-top-note{font-size:10px}
}
@media(forced-colors:active){
  .concept-primary,.comparison-buttons button[aria-pressed=true],.lab-tab[aria-selected=true]{border:2px solid ButtonText}
}

/* Gallery exit is separate from the fictional brand's sample navigation. */
.concept-gallery-back{display:inline-flex;align-items:center;font-weight:800;font-size:11px;color:#92f7da;text-decoration:underline;text-underline-offset:3px;min-height:34px}
.concept-gallery-back:focus-visible{outline:3px solid #00d4ff;outline-offset:3px}
@media(max-width:760px){.concept-gallery-back{font-size:10px;min-height:30px}}