/* MEDIADIVA: creator phones and photographic production cards */
:root{--bg:#24191f;--muted:#c0b2b8}
header{background:#24191ff5}
.monogram{background:var(--wine);color:#f3e9de;border:1px solid #a05a73}
.analytics{background:#24191f}
.hero-composition{grid-template-columns:1.05fr 1fr;gap:35px}
.hero-composition h1{font-size:clamp(60px,7.8vw,130px)}
.content-scene{height:auto;min-height:470px;padding-top:35px;width:100%;max-width:100%;overflow:hidden}
.wall-heading{top:12px;color:#e1d0d5;font-size:8px}
.creator-rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:24px 5px 18px;scroll-behavior:smooth}
.creator-rail::-webkit-scrollbar{display:none}
.creator-phone{flex:0 0 calc((100% - 32px)/3);min-width:145px;margin:0;scroll-snap-align:start;transform:translateY(calc(var(--media-shift) * -.15));transition:transform .2s}
.creator-phone:nth-child(3n+2){transform:translateY(calc(12px + var(--media-shift) * .2))}
.phone-screen{display:block;position:relative;width:100%;aspect-ratio:9/17;padding:4px;border:1px solid #e2b6ab;border-radius:25px;background:linear-gradient(120deg,#dfb9a8,#702c42 40%,#23131c 55%,#cfab9a);box-shadow:3px 7px 12px #10070d66;overflow:hidden;cursor:zoom-in}
.phone-screen img{display:block;width:100%;height:100%;border-radius:20px;object-fit:cover;object-position:center;animation:none}
.phone-screen:hover,.phone-screen:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.device-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:10px;border-radius:20px;background:#151115;box-shadow:0 1px 0 #fff2}
.device-island:after{content:'';display:block;position:absolute;right:5px;top:3px;width:4px;height:4px;border-radius:50%;background:#302a46}
.device-home{position:absolute;bottom:10px;left:35%;width:30%;height:3px;border-radius:10px;background:#fff9}
.phone-open{position:absolute;bottom:20px;right:12px;width:26px;height:26px;border:1px solid #fff6;border-radius:50%;display:grid;place-items:center;background:#24191f99;color:#fff;font-size:15px}
.creator-phone figcaption{padding:13px 3px 0;display:grid;gap:6px}
.creator-phone figcaption small{font-size:7px;letter-spacing:.7px;color:#c8aeb9;min-height:9px}
.creator-phone figcaption strong{font-size:20px;letter-spacing:-.7px}
.rail-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;border-top:1px solid var(--line);padding-top:14px}
.rail-controls>span{font-size:7px;letter-spacing:1px;color:#c8aeb9}
.rail-controls>div{display:flex;gap:7px}
.rail-controls button{width:36px;height:36px;border:1px solid #bd8b9d;background:transparent;color:var(--paper);font-size:20px}
.rail-controls button:hover{background:var(--wine)}
.rail-controls button:disabled{opacity:.3;cursor:default}
.creator-disclaimer{font-size:12px;line-height:1.5;margin:13px 0 18px;color:#f3e9de}
.creator-disclaimer span{font-size:10px;color:#c8aeb9}
.creator{isolation:isolate;overflow:hidden;background-color:#3b2530;background-image:linear-gradient(0deg,#160912bb,transparent 65%),url('assets/production-triptych.png');background-size:100% 100%,300% 100%;color:#fff;border-color:#c8aa9780;box-shadow:4px 8px 18px #0004}
.creator.c1{background-position:0 0,0 0}
.creator.c2{background-position:0 0,50% 0}
.creator.c3{background-position:0 0,100% 0}
.creator span{font-size:8px;text-shadow:0 1px 5px #000;background:#24191f80;padding:5px;margin:-5px -7px 0}
.creator b{margin-top:auto;font-size:19px;text-shadow:0 2px 7px #000}
.creator i{font-size:24px;margin-top:8px;color:var(--lime)}
@media(min-width:1500px){.content-scene{min-height:540px}.creator-phone{min-width:170px}}
@media(max-width:1000px){.hero-composition{gap:24px}.creator-phone{flex-basis:calc((100% - 16px)/2);min-width:140px}.content-scene{min-height:440px}.hero-composition h1{font-size:8vw}}
@media(max-width:700px){.hero-composition{grid-template-columns:1fr;gap:0}.hero-composition h1{font-size:15vw}.content-scene{min-height:0;margin:5px 0 16px;padding-top:25px}.creator-phone{flex-basis:43%;min-width:138px}.creator-rail{gap:16px;padding-top:22px}.phone-screen{border-radius:25px}.creator-phone figcaption strong{font-size:21px}.creator-phone figcaption small{font-size:7px}.wall-heading{font-size:7px;top:7px}.creator-disclaimer{font-size:12px}.creator-disclaimer span{font-size:11px}.rail-controls>span{font-size:6px;max-width:165px;line-height:1.5}.creator-phone:nth-child(3n+2){transform:translateY(8px)}.creator b{font-size:18px}}
.no-motion .creator-phone{transform:none;transition:none}.no-motion .creator-rail{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){.creator-phone,.creator-phone:nth-child(3n+2){transform:none;transition:none}.creator-rail{scroll-behavior:auto}}

/* Small interface refinements, preserving the original composition. */
.monogram{border-radius:9px}
.button{border-radius:12px;border:1px solid #ffffff18;transition:transform .2s,box-shadow .2s,background .2s}
.button span{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:50%;background:#00000010;border:1px solid currentColor;transition:transform .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}
.button:hover span{transform:rotate(8deg)}
.navcta{border:1px solid #dcff5255;border-radius:999px;padding:11px 16px;background:#dcff5208;transition:background .2s,border-color .2s}
.navcta:hover{background:#dcff5218;border-color:var(--lime)}
.rail-controls button{border-radius:50%;transition:background .2s,border-color .2s}
.platform svg{box-sizing:content-box;padding:11px;border:1px solid #ffffff1c;border-radius:15px;background:linear-gradient(145deg,#ffffff0d,#ffffff02);box-shadow:inset 0 1px 0 #ffffff08;transition:transform .2s,border-color .2s,color .2s}
.platform:hover svg{transform:translateY(-3px);border-color:#dcff5266}
.dash-tabs button{border-radius:9px}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
#leadDialog{box-sizing:border-box;width:680px;max-width:calc(100vw - 24px);height:min(820px,90dvh);max-height:90dvh;padding:0;border:1px solid #d4c4c4;border-radius:22px;background:#f3eee7;color:#24191f;text-align:left;box-shadow:0 24px 100px #0006;overflow:hidden}
#leadDialog[open]{display:flex;flex-direction:column}
.lead-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 26px 18px;border-bottom:1px solid #701c3c22}
.lead-eyebrow{font-size:9px;letter-spacing:1.2px;color:#701c3c}
#leadTitle{font-size:clamp(20px,4vw,28px);line-height:1.15;letter-spacing:-.6px;margin:8px 0 0}
.lead-close{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid #701c3c33;background:#701c3c0a;color:#701c3c;font-size:28px;cursor:pointer}
.lead-close:hover{background:#701c3c18}
#leadFrame{display:block;width:100%;flex:1;min-height:0;border:0;background:transparent}
.lead-foot{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;padding:14px 26px;border-top:1px solid #701c3c22;font-size:11px;line-height:1.5}
.lead-foot a{color:#701c3c;text-decoration:underline;text-underline-offset:3px}
#leadDialog :focus-visible{outline-color:#701c3c}
@media(max-width:700px){.navcta{padding:10px 12px}.platform svg{padding:9px;border-radius:13px}.lead-head{padding:20px 18px 16px}.lead-foot{padding:12px 18px}}
@media(prefers-reduced-motion:reduce){.button,.button span,.platform svg,.navcta,.rail-controls button{transition:none}.button:hover,.button:hover span,.platform:hover svg{transform:none}}
.no-motion .button,.no-motion .button span,.no-motion .platform svg{transition:none}
.no-motion .button:hover,.no-motion .button:hover span,.no-motion .platform:hover svg{transform:none}
/* Centered modal shell and more legible production labels. */
#leadDialog{width:620px}
.lead-head{position:relative;justify-content:center;text-align:center;padding:22px 58px 18px}
.lead-head>div{width:100%}
.lead-close{position:absolute;right:15px;top:15px;width:34px;height:34px;font-size:24px}
#leadTitle{font-size:clamp(20px,4vw,26px)}
.lead-foot{justify-content:center;text-align:center}
.button{padding:17px 21px;gap:25px}
.chips span{font-size:12px;line-height:1.35;padding:8px 12px;border-radius:7px}
.platform svg{color:var(--brand-color,var(--paper));background:#ffffff08}
.platform:hover svg{color:var(--brand-color,var(--paper))}
.platform-0 svg,.platform-1 svg,.platform-7 svg{background:#fff}
.platform-3 svg{background:#101014;filter:drop-shadow(1px 0 0 #fe2c55) drop-shadow(-1px -1px 0 #25f4ee)}
.platform-4 svg{color:#fff;background:#202022}
.platform-2 svg{color:var(--paper);background:#701c3c44}
.legal-details{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:18px 5% 26px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--muted)}
@media(max-width:700px){.legal-details{justify-content:center;text-align:center}.legal-details span:first-child{width:100%}.lead-head{padding:22px 48px 17px}.lead-close{right:9px;top:12px}}
.platform .brand-icon{box-sizing:content-box;display:block;width:29px;height:29px;object-fit:contain;padding:11px;border:1px solid #ffffff1c;border-radius:15px;background:#fff;transition:transform .2s,border-color .2s}
.platform-4 .brand-icon{background:#202022}
.platform:hover .brand-icon{transform:translateY(-3px);border-color:#dcff5266}
@media(max-width:700px){.platform .brand-icon{padding:9px;border-radius:13px}}
@media(prefers-reduced-motion:reduce){.platform .brand-icon{transition:none}.platform:hover .brand-icon{transform:none}}
.no-motion .platform .brand-icon{transition:none}.no-motion .platform:hover .brand-icon{transform:none}