/* Case study: Showcase layout (inc/case-study-showcase.php). Scoped to .cs2 and body.cs-showcase. */
/* Lets the stage pieces hang past the page edge; clip keeps the old sideways cut. */
body.cs-showcase .content{overflow:visible!important;overflow-x:clip!important}
.cs2{--ink:#0B0B0F;--muted:#6B6B73;--line:#E6E6EB;--blue:#1264FF;--sand:#F0EDE4;--gold:var(--accent,#A5803C);--brown:#302B25;
 font-family:"Space Grotesk",Helvetica,Arial,sans-serif;color:var(--ink);padding:0 clamp(20px,6vw,96px)}
.cs2 *{box-sizing:border-box}
.cs2 .wrap{max-width:1320px;margin:0 auto}
.cs2 h1,.cs2 h2,.cs2 h3,.cs2 .big{font-family:Gilroy,sans-serif;margin:0}
.cs2 .eyebrow{font:600 13px/1 "Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs2 img{display:block;width:100%;height:100%;object-fit:cover}
.cs2 .r{border-radius:24px;overflow:hidden}
/* hero */
.cs2 .hero{position:relative;height:min(78vh,820px);min-height:520px;border-radius:28px;overflow:hidden;margin-top:24px;background:#1F1B16}
.cs2 .hero img{position:absolute;inset:0;opacity:.62}
.cs2 .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,9,.15) 30%,rgba(15,12,9,.85))}
.cs2 .hero .in{position:absolute;left:56px;right:56px;bottom:52px;z-index:2;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cs2 .hero .eyebrow{color:#E8D7B4}
.cs2 .hero h1{font-weight:600;font-size:clamp(46px,7.4vw,112px);line-height:.92;letter-spacing:normal;margin-top:18px;color:#fff!important}
.cs2 .hero p{max-width:360px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.85);margin:0}
/* facts */
.cs2 .facts{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:32px;padding:34px 0 40px;border-bottom:1px solid var(--line);align-items:start}
.cs2 .facts b{display:block;font:700 17px/1.35 Gilroy,sans-serif;margin-top:10px}
.cs2 .btn{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;text-decoration:none;font:600 15px Gilroy,sans-serif;padding:16px 24px;border-radius:999px;white-space:nowrap}
/* statement */
.cs2 .statement{display:grid;grid-template-columns:3fr 9fr;gap:40px;padding:120px 0 90px}
.cs2 .statement .big{font-weight:600;font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:normal}
.cs2 .statement .big em{font-style:normal;color:var(--gold)}
.cs2 .two{display:grid;grid-template-columns:3fr 4.5fr 4.5fr;gap:40px;padding-bottom:110px}
.cs2 .two h3{font-weight:700;font-size:22px;margin-bottom:14px}
.cs2 .two p{font-size:17px;line-height:1.7;color:#2b2b31;margin:0}
/* built list */
.cs2 .built{display:grid;grid-template-columns:5fr 7fr;gap:60px;padding:130px 0 120px}
.cs2 .built .stick{position:sticky;top:120px;align-self:start}
.cs2 .built h2{font-weight:600;font-size:clamp(40px,4.6vw,68px);line-height:.98;letter-spacing:normal;margin-top:18px}
.cs2 .built .lead{font-size:17px;line-height:1.65;color:var(--muted);max-width:400px;margin-top:22px}
.cs2 .row{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:28px 0;border-top:1px solid var(--line)}
.cs2 .row:last-child{border-bottom:1px solid var(--line)}
.cs2 .row .n{font:600 15px Gilroy,sans-serif;color:var(--blue);padding-top:5px}
.cs2 .row h3{font-weight:700;font-size:24px;letter-spacing:-.01em}
.cs2 .row p{margin:8px 0 0;font-size:16px;line-height:1.6;color:#45454d}
/* mosaic */
.cs2 .mosaic{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:1fr 1fr;gap:32px;height:min(70vw,940px)}
.cs2 .mosaic .a{grid-row:1/3}
/* brand */
.cs2 .brand{margin-top:32px;border-radius:28px;overflow:hidden;position:relative;background:var(--sand) var(--texture,none) center/cover;padding:clamp(56px,8vw,128px) clamp(24px,6vw,104px);color:var(--brown)}
.cs2 .brand:before{content:"";position:absolute;inset:0;background:rgba(240,237,228,.78)}
.cs2 .brand>*{position:relative}
.cs2 .brand .grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(40px,6vw,96px);align-items:start}
.cs2 .brand h2{font-weight:600;font-size:clamp(36px,4vw,56px);letter-spacing:normal;line-height:1;margin-top:16px;color:var(--brown)}
.cs2 .brand .lead{font-size:17px;line-height:1.65;margin-top:18px}
.cs2 .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs2 .sw div{border-radius:18px;height:170px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;font:600 13px "Space Grotesk";}
.cs2 .type{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.cs2 .type>div{background:rgba(255,255,255,.7);border-radius:18px;padding:36px 40px}
.cs2 .type .aa{font-size:96px;line-height:1}
.cs2 .type small{display:block;margin-top:12px;font:600 13px "Space Grotesk";color:#6b6355}
/* pages */
.cs2 .pages{display:grid;grid-template-columns:4fr 8fr;gap:60px;padding:150px 0 56px;align-items:end}
.cs2 .pages h2{font-weight:600;font-size:clamp(36px,4vw,56px);letter-spacing:normal;line-height:1;margin-top:16px}
.cs2 .pages p{font-size:17px;line-height:1.65;color:var(--muted);margin:18px 0 0}
/* next */
.cs2 .next{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:150px 0 140px}
.cs2 .card{border-radius:28px;padding:clamp(32px,4.5vw,64px);min-height:340px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.cs2 .card h3{font-weight:600;font-size:clamp(30px,3vw,44px);letter-spacing:normal;line-height:1.05;margin-top:14px;overflow-wrap:anywhere}
.cs2 .card.live{background:#1F1B16;color:#fff} .cs2 .card.live .eyebrow{color:#E8D7B4} .cs2 .card.live h3{color:#fff!important}
.cs2 .card.nx{background:#EEEEF2;color:var(--ink);position:relative;overflow:hidden}
.cs2 .card.nx img{position:absolute;right:-40px;bottom:-30px;width:56%;height:auto;border-radius:18px;transform:rotate(-4deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.cs2 .arrow{font:600 16px Gilroy,sans-serif;display:flex;gap:10px;align-items:center}
@media (max-width:900px){
 .cs2 .hero .in{left:24px;right:24px;bottom:28px;flex-direction:column;align-items:flex-start}
 .cs2 .facts{grid-template-columns:1fr 1fr} .cs2 .facts .btn{grid-column:1/3;justify-content:center}
 .cs2 .statement,.cs2 .two,.cs2 .built,.cs2 .brand .grid,.cs2 .pages,.cs2 .next{grid-template-columns:1fr;gap:24px}
 .cs2 .statement{padding:70px 0 50px} .cs2 .built{padding:80px 0} .cs2 .pages{padding-top:80px} .cs2 .next{padding:80px 0}
 .cs2 .built .stick{position:static}
 .cs2 .mosaic{grid-template-columns:1fr;grid-template-rows:auto;height:auto} .cs2 .mosaic .a{grid-row:auto;aspect-ratio:3/4} .cs2 .mosaic>div{aspect-ratio:4/3}
 .cs2 .brand{padding:56px 24px} .cs2 .mosaic{gap:20px} .cs2 .sw{grid-template-columns:1fr 1fr} .cs2 .type{grid-template-columns:1fr}
 .cs2 .card{padding:32px;min-height:260px;min-width:0} .cs2 .card h3{font-size:30px;overflow-wrap:anywhere} .cs2 .card.nx img{width:62%}
}
/* inside the site: a browser window with real components lifted off the page (the Studio Keys look) */
.cs2 .tour-head{text-align:center;padding:120px 0 0;max-width:760px;margin:0 auto}
.cs2 .tour-head h2{font-weight:600;font-size:clamp(40px,4.6vw,68px);line-height:.98;letter-spacing:normal;margin-top:18px}
.cs2 .tour-head .lead{font-size:18px;line-height:1.6;color:var(--muted);margin:20px auto 0;max-width:520px}
.cs2 .stage{--p:1;--d:.5;position:relative;isolation:isolate;max-width:1040px;margin:64px auto 0;perspective:1800px}
.cs2 .stage:before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:45%;bottom:-120px;background:var(--sand)}
.cs2 .desk{position:relative;margin:0;border-radius:18px;background:#fff;border:1px solid #E1E1E6;overflow:hidden;box-shadow:0 2px 6px rgba(12,12,24,.05),0 60px 120px -50px rgba(12,12,24,.45);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--p)) * 14deg)) scale(calc(.94 + var(--p) * .06))}
.cs2 .bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#F6F6F8;border-bottom:1px solid #E6E6EB}
.cs2 .bar i{width:11px;height:11px;border-radius:50%;background:#DADAE0}
.cs2 .bar span{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:0 14px;height:26px;border-radius:8px;background:#fff;border:1px solid #E6E6EB;font:600 14px/1 Gilroy,sans-serif;color:var(--muted)}
.cs2 .bar svg{width:12px;height:12px;color:var(--gold)}
.cs2 .desk img{height:auto;aspect-ratio:16/10;object-position:50% 0}
.cs2 .phone{position:absolute;margin:0;right:-8%;bottom:-6%;width:clamp(140px,21%,236px);container-type:inline-size;transform:translateY(calc((1 - var(--p)) * 90px))}
.cs2 .phone img{height:auto;border:3.6cqw solid #0C0C0E;border-radius:15.5cqw;background:#0C0C0E;box-shadow:0 0 0 1px #2A2A30,0 50px 90px -40px rgba(12,12,24,.6)}
.cs2 .pop{position:absolute;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(12,12,24,.08),0 40px 80px -30px rgba(12,12,24,.55)}
.cs2 .pop img{height:auto}
.cs2 .pop-a{left:-9%;bottom:-4%;width:min(290px,28%);transform:translateY(calc((1 - var(--p)) * 70px))}
.cs2 .pop-b{right:-5%;top:-9%;width:min(380px,34%);transform:translateY(calc((1 - var(--p)) * 50px))}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
 .cs2 .pop-a{translate:calc(var(--d) * -40px) calc(var(--d) * 40px)}
 .cs2 .pop-b{translate:calc(var(--d) * 30px) calc(var(--d) * -50px)}
 .cs2 .phone{translate:calc(var(--d) * 40px) calc(var(--d) * -60px)}
}
.cs2 .points{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 56px;margin:170px 0 120px;padding:0;list-style:none}
.cs2 .points li{border-top:1px solid var(--line);padding-top:24px}
.cs2 .points .k{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;font:700 13px Gilroy,sans-serif}
.cs2 .points h3{font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.01em;margin-top:16px}
.cs2 .points p{margin:10px 0 0;font-size:16px;line-height:1.6;color:#45454d}
@media (max-width:900px){
 .cs2 .tour-head{padding:80px 0 0;text-align:left}
 .cs2 .stage{margin-top:48px}
 .cs2 .pop-b{display:none}
 .cs2 .pop-a{left:-2%;bottom:-24%;width:29%} .cs2 .phone{right:-2%;bottom:-16%;width:28%}
 .cs2 .points{grid-template-columns:1fr 1fr;gap:36px 28px;margin:130px 0 80px}
}
@media (max-width:600px){
 .cs2 .points{grid-template-columns:1fr;margin:110px 0 64px}
 .cs2 .bar{height:28px;padding:0 10px} .cs2 .bar i{width:8px;height:8px} .cs2 .bar span{height:20px;font-size:12px;padding:0 8px}
 .cs2 .desk{border-radius:12px} .cs2 .pop{border-radius:10px}
}
/* motion */
@keyframes cs2rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.cs2.anim .hero img{animation:cs2zoom 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes cs2zoom{from{transform:scale(1.12)}to{transform:none}}
.cs2.anim .hero .eyebrow{animation:cs2rise .9s .2s both} .cs2.anim .hero h1{animation:cs2rise 1s .35s cubic-bezier(.2,.7,.2,1) both} .cs2.anim .hero p{animation:cs2rise 1s .55s both}
.cs2.anim .rv{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.cs2.anim .rv.in{opacity:1;transform:none}
.cs2.anim .r.rv img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cs2.anim .r.rv.in img{transform:none}
/* Mixed widths (owner, 2026-11-12): picture bands run edge to edge, reading sections stay in the 1320 column. */
.cs2{--gut:max(clamp(20px,6vw,96px),calc((100vw - 1320px) / 2))}
.cs2 .hero,.cs2 .mosaic,.cs2 .brand{margin-inline:calc(50% - 50vw)}
.cs2 .hero{border-radius:0;height:min(88vh,960px)}
.cs2 .hero .in{left:var(--gut);right:var(--gut)}
.cs2 .mosaic{padding-inline:12px;gap:12px;height:min(64vw,1180px)}
.cs2 .mosaic .r{border-radius:16px}
.cs2 .brand{margin-top:12px;border-radius:0;padding-inline:var(--gut)}
@media (max-width:900px){
 .cs2 .hero .in{left:24px;right:24px}
 .cs2 .mosaic{height:auto;gap:12px} .cs2 .brand{padding:72px 24px}
}
/* Full width, content too (owner, 2026-11-12): sections spread across the page at different widths, like the circlesco.tech case studies.
   A 12-column grid with a slim gutter; headings left, text offset right, never one shared max width. */
.cs2{--gut:clamp(20px,3.4vw,64px);padding-inline:var(--gut)}
.cs2 .wrap{max-width:none}
.cs2 .hero .in{left:var(--gut);right:var(--gut)}
.cs2 .hero h1{font-size:clamp(46px,8.4vw,164px)}
.cs2 .hero p{max-width:440px}
.cs2 .facts{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.cs2 .brand{padding-inline:var(--gut)}
@media (min-width:1100px){
 .cs2 .statement,.cs2 .two,.cs2 .tour-head,.cs2 .pages{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,2.6vw,48px)}
 .cs2 .statement{padding:180px 0 140px}
 .cs2 .statement .eyebrow{grid-column:1/4}
 .cs2 .statement .big{grid-column:4/-1;font-size:clamp(40px,4.3vw,90px);line-height:1.04}
 .cs2 .two>div:first-child{display:none}
 .cs2 .two>div:nth-child(2){grid-column:4/8}
 .cs2 .two>div:nth-child(3){grid-column:9/13}
 .cs2 .two p{font-size:18px}
 .cs2 .tour-head{max-width:none;text-align:left;align-items:end;padding-top:190px}
 .cs2 .tour-head .eyebrow{grid-column:1/-1}
 .cs2 .tour-head h2{grid-column:1/8;font-size:clamp(48px,5.4vw,104px)}
 .cs2 .tour-head .lead{grid-column:9/13;margin:0;max-width:none}
 .cs2 .stage{max-width:min(1480px,76vw);margin-top:110px}
 .cs2 .points{padding-left:25%;gap:56px clamp(32px,3vw,64px)}
 .cs2 .pages{padding-top:190px}
 .cs2 .pages>div{grid-column:1/7} .cs2 .pages h2{font-size:clamp(44px,5vw,96px)}
 .cs2 .pages p{grid-column:9/13}
 .cs2 .pages+.r{width:74%;margin-left:auto}
 .cs2 .next{grid-template-columns:1fr 1fr}
}
.cs2 .card.nx h3{max-width:50%;position:relative;z-index:1;overflow-wrap:normal;font-size:clamp(26px,2.3vw,44px)}
.cs2 .card.live h3{overflow-wrap:normal;word-break:normal;font-size:clamp(26px,2.3vw,44px)}
@media (max-width:900px){.cs2 .card.nx h3{max-width:none} .cs2 .card.live h3{overflow-wrap:anywhere;font-size:28px}}