/* Editorial grid follows Threat Zone: 766px copy, 32/40 headings, 20/24 body. */
.case-body{background:#080d0c;color:#f1f6f4;font-family:Firs,Arial,sans-serif;padding-top:1px}
.intro,.chapter,.results{width:calc(100% - 80px);max-width:766px;margin:0 auto}.intro{padding:96px 0 0}.eyebrow{font-size:12px;line-height:1.4;color:#62a397;letter-spacing:.06em}.intro h2,.copy h2{font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.025em;margin:0 0 20px}.intro h2{margin-top:24px}.lead,.copy p{font-size:20px;line-height:1.3;color:#b9c9c5;margin:0 0 24px}.copy p:last-child{margin-bottom:0}.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0 0;margin-top:40px;border-top:1px solid #233d36}.meta span{font-size:12px;color:#6f958a}.meta p{font-size:14px;line-height:20px;color:#cedad6;margin:10px 0 0}.chapter{display:block;padding:96px 0}.chapter-label{display:none}.media-slot{position:relative;aspect-ratio:var(--ratio);margin:0 24px;background:#0d1916;border:1px solid #1b3830;border-radius:16px;overflow:hidden}.slot-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#74998c;font-size:14px}.slot-mark{font-size:30px;line-height:1;color:#237b65}.media-slot figcaption{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:#527467}.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 24px 0}.media-pair .media-slot{margin:0}.media-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080d0c}.media-slot:has(img) .slot-center,.media-slot:has(img) figcaption{display:none}.results{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:96px}.results>div{padding-top:24px;border-top:1px solid #25473d}.results strong{font-size:48px;line-height:1;font-weight:500;letter-spacing:-.04em;color:#04d9b6}.results span{display:block;font-size:14px;line-height:20px;color:#a5bab1;margin-top:16px}.case-body footer,.portfolio-return{max-width:1200px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;font-size:14px}.case-body footer{border-top:1px solid #1c332b}.case-body a{color:#a8c4b9;text-decoration:none}.case-body a:hover{color:#00e2ba}.case-body a:focus-visible{outline:2px solid #00e2ba;outline-offset:6px}.portfolio-return{padding-bottom:0}.portfolio-return+.intro{padding-top:64px}
@media(min-width:1600px){.media-slot,.media-pair{max-width:1552px;margin-left:auto;margin-right:auto}.media-pair .media-slot{width:100%}}
@media(max-width:959px){.intro,.chapter,.results{width:calc(100% - 120px);max-width:640px}}
@media(max-width:639px){.intro,.chapter,.results{width:calc(100% - 40px)}.intro{padding-top:64px}.intro h2,.copy h2{font-size:24px;line-height:30px;margin-bottom:20px}.lead,.copy p{font-size:14px;line-height:20px;margin-bottom:20px}.chapter{padding:64px 0}.meta{grid-template-columns:1fr;gap:20px;margin-top:28px;padding-top:24px}.meta p{margin-top:6px}.media-slot{margin:0 12px;border-radius:10px;min-height:210px}.media-pair{margin:12px 12px 0;gap:10px}.media-pair .media-slot{min-height:230px}.slot-center{font-size:11px;text-align:center;padding:12px}.media-slot figcaption{left:12px;right:12px;bottom:14px;font-size:8px}.results{grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:64px}.results strong{font-size:40px}.results span{font-size:12px;line-height:18px}.case-body footer,.portfolio-return{padding:24px 20px;font-size:12px}.portfolio-return{padding-bottom:0}.portfolio-return+.intro{padding-top:48px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Continuous cover lighting and technical frame. */
body,.case-body{background:#000}.case-body{position:relative;isolation:isolate;padding-bottom:80px;background-image:linear-gradient(#19332d,#19332d),linear-gradient(#19332d,#19332d);background-size:1px 100%;background-position:2.04vw 0,97.96vw 0;background-repeat:no-repeat}.case-body:before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;left:0;width:100%;height:45vw;background:radial-gradient(ellipse 55vw 34vw at 0 0,rgba(0,149,121,.56) 0%,rgba(0,100,80,.25) 36%,rgba(0,55,45,.08) 62%,transparent 100%)}
.hero .glow-left{display:none}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 660px 408px at 0 650px,rgba(0,149,121,.56) 0%,rgba(0,100,80,.25) 36%,rgba(0,55,45,.08) 62%,transparent 100%)}.hero .binary-field{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 58%,transparent 96%);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 58%,transparent 96%)}
.intro h2,.copy h2{text-transform:uppercase}.chapter{position:relative;scroll-margin-top:40px}.chapter:before{content:"";position:absolute;top:0;left:calc((766px - 95.92vw)/2);width:95.92vw;height:1px;background:#19332d}.chapter:after{content:"＋";position:absolute;top:-11px;left:calc((766px - 95.92vw)/2 - 6px);width:14px;height:22px;color:#1fa68b;font-size:18px;line-height:22px;font-family:Arial,sans-serif;text-shadow:calc(95.92vw - 1px) 0 #1fa68b;pointer-events:none}.intro{padding-bottom:80px}.media-slot{background:#050c0a;border-color:#19332d;border-radius:0;margin-left:2.04vw;margin-right:2.04vw}.media-pair{margin-left:2.04vw;margin-right:2.04vw}.media-pair .media-slot{margin:0}.case-body footer{border-top-color:#19332d}.case-body footer:before{content:"＋";color:#1fa68b}.case-body footer{position:relative}.case-body footer:before{position:absolute;left:0;top:-11px}.case-body .case-dock a{color:#fff}
.case-dock{position:fixed;z-index:990;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;padding:4px;min-height:32px;border-radius:12px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);font-family:Firs,Arial,sans-serif;max-width:calc(100vw - 32px)}.case-dock a{display:flex;align-items:center;justify-content:center;flex:none;min-height:24px;padding:4px 12px;border-radius:8px;font-size:12px;line-height:16px;text-decoration:none;color:#fff;transition:background .2s,color .2s}.case-dock a:hover,.case-dock a[aria-current="location"]{background:#fafeaa;color:#181818}.case-dock .dock-top{width:28px;padding:4px}.dock-top svg{width:14px;height:14px}.case-dock a:focus-visible{outline:2px solid #00ffd8;outline-offset:2px}html{scroll-behavior:smooth}
@media(min-width:1200px){.case-dock{bottom:2vw;padding:.3333vw;border-radius:1vw;min-height:2.6667vw}.case-dock a{font-size:1vw;line-height:1.3333vw;min-height:2vw;padding:.3333vw 1vw;border-radius:.6667vw}.case-dock .dock-top{width:2.3333vw}.dock-top svg{width:1.1667vw;height:1.1667vw}}
@media(max-width:959px){.chapter:before{left:calc((100% - 95.92vw)/2)}.chapter:after{left:calc((100% - 95.92vw)/2 - 6px)}}
@media(max-width:639px){.intro{padding-bottom:56px}.case-dock{bottom:16px;max-width:calc(100vw - 24px);overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.case-dock a{padding:5px 8px;font-size:10px}.case-dock::-webkit-scrollbar{display:none}.case-body{padding-bottom:76px}.chapter:after{font-size:15px}.media-slot{border-radius:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Use the original 1200 x 8 hero rule, with identical cross size and geometry. */
.case-body{background-position:2% 0,98% 0}.chapter:before{left:calc((100% - var(--case-width,100vw))/2);top:calc(var(--case-width,100vw) / -300);width:var(--case-width,100vw);height:calc(var(--case-width,100vw) / 150);background:url('assets/fa722.svg') center/100% 100% no-repeat;pointer-events:none}.chapter:after,.case-body footer:before{content:none}.media-slot{margin-left:2%;margin-right:2%}.media-pair{margin-left:2%;margin-right:2%}.media-pair .media-slot{margin:0}

/* Match Threat Zone menu weight and rhythm; CICADA8 active color. */
.case-dock{gap:4px}.case-dock a{font-weight:500;line-height:1.55;padding-top:0;padding-bottom:0;height:24px}.case-dock .dock-top{width:30px}.case-dock a:hover,.case-dock a[aria-current="location"]{background:#00ffd8;color:#000}@media(min-width:1200px){.case-dock{gap:.33333vw}.case-dock a{height:2vw}.case-dock .dock-top{width:2.5vw}}

/* All case rules use the hero SVG stroke: white at 13% opacity. */
.case-body{background-image:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)),linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13))}.meta,.results>div,.case-body footer,.media-slot{border-color:rgba(255,255,255,.13)}

/* Figma 56:2 — second screen, 1200px Zero Block autoscale. */
.overview{position:relative;width:100%;height:calc(var(--case-width,100vw) * 912 / 1200)}
.overview-stage{position:absolute;top:0;left:0;width:1200px;height:912px;transform-origin:top left}
.overview-intro{position:absolute;left:217px;top:4px;width:766px;color:#fff}
.overview-intro h2{font-size:32px;line-height:40px;font-weight:500;letter-spacing:0;margin:0 0 24px;text-transform:uppercase}
.overview-intro p{font-size:20px;line-height:24px;font-weight:400;max-width:625px;color:rgba(255,255,255,.7);margin:0}
.overview-grid{position:absolute;left:0;top:304px;width:1200px;height:608px}
.overview-grid>img{position:absolute;display:block;max-width:none}
.overview-tablet{left:24px;top:0;width:702px;height:608px}
.overview-top-fill{position:absolute;left:600px;top:0;width:576px;height:303px;background:rgba(217,217,217,.1)}
.overview-grid strong{display:block;font-size:80px;line-height:80px;letter-spacing:-3.2px;font-weight:500;color:#00ffd8}
.overview-grid span{display:block;font-size:12px;line-height:16px;font-weight:500;color:#fff}
.overview-pages{position:absolute;left:57px;top:410px}.overview-pages strong{font-size:160px;line-height:150px;letter-spacing:-6.4px}
.overview-social{position:absolute;left:625px;top:24px}.overview-sales{position:absolute;left:912px;top:24px}
.overview-social1{left:625px;top:174.4375px;width:111.5625px;height:111.5625px;border-radius:8px}
.overview-social2{left:751.4375px;top:174.4375px;width:111.5625px;height:111.5625px;border-radius:8px}
.overview-booklet{left:1034.0508px;top:113px;width:117.304px;height:166px;border-radius:8px}
.overview-diagram{left:718px;top:294.0764px;width:462.3791px;height:266.4749px}
.overview-charts{position:absolute;left:625px;top:484px}.overview-charts img{display:block}
.overview-line{position:absolute;background:rgba(255,255,255,.13)}
.overview-line-middle{left:600px;top:0;width:1px;height:608px}.overview-line-quarter{left:887px;top:0;width:1px;height:304px}.overview-line-horizontal{left:600px;top:303px;width:576px;height:1px}
.overview-rule{left:0;width:1200px;height:8px}.overview-rule-top{top:-4px}.overview-rule-bottom{top:604px}
.overview-cross{width:8px;height:8px}
.overview + #context{padding-top:188px}.overview + #context:before{display:none}
@media(max-width:639px){.overview + #context{padding-top:64px}}

/* Keep the technical grid above imagery, including the outside rails. */
.overview-grid{isolation:isolate}
.overview-tablet{z-index:-1}
.overview-grid:after{content:"";position:absolute;z-index:5;inset:0 24px;pointer-events:none;border-left:1px solid rgba(255,255,255,.13);border-right:1px solid rgba(255,255,255,.13)}
.overview-line,.overview-rule,.overview-cross{z-index:6;pointer-events:none}
.overview-social1,.overview-social2,.overview-booklet{clip-path:inset(.6px round 8px)}
.overview-diagram{clip-path:inset(9px 0 0)}

/* One continuous foreground grid: opaque color prevents changes over artwork. */
:root{--case-line:rgba(255,255,255,.13);--case-line-width:calc(var(--case-width,100vw) / 1200)}
.case-body{background-image:none}
.case-body:after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background-image:linear-gradient(var(--case-line),var(--case-line)),linear-gradient(var(--case-line),var(--case-line));background-size:var(--case-line-width) 100%;background-position:2% 0,98% 0;background-repeat:no-repeat}
.overview-grid:after{content:none}
.overview-line{background:var(--case-line)}
.meta,.results>div,.case-body footer,.media-slot{border-color:var(--case-line);border-width:var(--case-line-width)}
.case-body:after{background-position:calc(2% - var(--case-line-width)/2) 0,calc(98% - var(--case-line-width)/2) 0}
.overview-stage{z-index:21}
.overview-stage:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(var(--case-line),var(--case-line)) 23.5px 0/1px 100% no-repeat,linear-gradient(var(--case-line),var(--case-line)) 1175.5px 0/1px 100% no-repeat}
.overview-grid{isolation:auto}
.overview-tablet{z-index:0}
.case-body:after{background-position:calc(var(--case-width,100vw) * .02 - var(--case-line-width)/2) 0,calc(var(--case-width,100vw) * .98 - var(--case-line-width)/2) 0}

/* White translucent grid; only one pair of rails within the overview. */
.case-body:after{top:calc(var(--case-width,100vw) * 912 / 1200)}

.overview-intro p{font-weight:400;font-synthesis:none;max-width:766px}
/* More breathing room for the second-screen introduction. */
.overview-intro p{line-height:28px}

/* Product page demonstration: the device stays still, only its screen scrolls. */
.site-showcase{position:relative;margin:0;width:100%;aspect-ratio:1200/608;isolation:isolate}
.site-monitor{position:absolute;left:36.666667%;top:0;width:61.333333%;height:100%;overflow:hidden;z-index:0}
.site-monitor img{position:absolute;width:119.37%;height:107.89%;max-width:none;left:-.04%;top:0}
.ipad{position:absolute;left:9.75%;top:8.06%;width:32.5%;height:auto;aspect-ratio:390/510;padding:1%;border:1px solid #646769;border-radius:calc(var(--case-width,100vw)*.018);background:#111213;box-shadow:inset 0 0 0 2px #292b2d,0 12px 32px #0008;z-index:2}
.ipad-screen{height:auto;aspect-ratio:366/486;overflow:hidden;border-radius:calc(var(--case-width,100vw)*.009);background:#000;position:relative}
.ipad-page{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.ipad-camera{position:absolute;left:50%;top:1%;width:4px;height:4px;border-radius:50%;background:#17242c;box-shadow:0 0 0 1px #050505}
.ipad-toggle{position:absolute;right:5%;bottom:4%;width:28px;height:28px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#111c;color:#fff;font:14px sans-serif;cursor:pointer;opacity:0;transition:opacity .2s;z-index:3}
.ipad:hover .ipad-toggle,.ipad:focus-within .ipad-toggle{opacity:1}
.showcase-divider{position:absolute;left:50%;top:0;height:100%;width:var(--case-line-width);background:var(--case-line);z-index:3;pointer-events:none}
.showcase-rule{position:absolute;left:0;width:100%;height:auto;z-index:4;pointer-events:none}
.showcase-rule-top{top:0;transform:translateY(-50%)}.showcase-rule-bottom{bottom:0;transform:translateY(50%)}
@media(hover:none){.ipad-toggle{opacity:1}}
@media(max-width:639px){.site-showcase{aspect-ratio:600/900}.site-monitor{left:2%;top:46%;width:96%;height:54%}.ipad{left:20%;top:3%;width:60%;height:auto;aspect-ratio:390/510;padding:1.85%;border-radius:18px}.ipad-screen{border-radius:9px}.showcase-divider{display:none}.ipad-toggle{width:24px;height:24px}}

/* Touch marker follows the same timeline as the page scroll. */
.ipad-gesture{position:absolute;left:75%;top:65%;width:clamp(14px,1.65vw,28px);aspect-ratio:1;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(255,255,255,.28);box-shadow:0 0 0 5px rgba(255,255,255,.07),0 2px 12px #0005;opacity:0;pointer-events:none;z-index:4;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.ipad-gesture{display:none}}

/* A single light field eliminates the horizontal seam between sections. */
body{background:#000 radial-gradient(ellipse calc(var(--case-width,100vw)*.55) calc(var(--case-width,100vw)*.34) at 0 calc(var(--case-width,100vw)*650/1200),rgba(0,149,121,.56) 0%,rgba(0,100,80,.25) 36%,rgba(0,55,45,.08) 62%,transparent 100%) 0 0/100% calc(var(--case-width,100vw)*1100/1200) no-repeat}
.hero,.case-body{background-color:transparent}
.hero:before,.case-body:before{content:none}
.case-body{padding-top:0;margin-top:calc(var(--case-width,100vw)*-32/1200)}
.overview + #context{padding-top:64px;padding-bottom:56px}
@media(max-width:639px){.overview + #context{padding-top:40px;padding-bottom:40px}}

/* Third block follows the original 1200px design scale. */
#context{width:calc(var(--case-width,100vw)*766/1200);max-width:none}
.overview + #context{padding-top:calc(var(--case-width,100vw)*64/1200);padding-bottom:calc(var(--case-width,100vw)*56/1200)}
#context h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#context p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0}
@media(max-width:639px){#context{width:calc(100% - 40px)}.overview + #context{padding:40px 0}#context h2{font-size:24px;line-height:30px;margin-bottom:20px}#context p{font-size:14px;line-height:20px}}

/* Graphics copy scales with the 1200px canvas. */
#graphics{width:calc(var(--case-width,100vw)*766/1200);max-width:none;padding-top:calc(var(--case-width,100vw)*64/1200);padding-bottom:calc(var(--case-width,100vw)*56/1200)}
#graphics h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#graphics p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0 0 calc(var(--case-width,100vw)*24/1200)}
#graphics p:last-child{margin-bottom:0}
@media(max-width:639px){#graphics{width:calc(100% - 40px);padding:40px 0}#graphics h2{font-size:24px;line-height:30px;margin-bottom:20px}#graphics p{font-size:14px;line-height:20px;margin-bottom:20px}}

/* Two unique seven-image strips, recycled only outside the viewport. */
.graphics-gallery{position:relative;margin:0 2%;padding:calc(var(--case-width,100vw)*64/1200) 0;border-top:var(--case-line-width) solid var(--case-line);border-bottom:var(--case-line-width) solid var(--case-line);overflow:hidden;background:#000}
.graphics-row{height:calc(var(--case-width,100vw)*240/1200);overflow:hidden}
.graphics-track{display:flex;width:max-content;gap:calc(var(--case-width,100vw)*48/1200);will-change:transform}
.graphics-track img{display:block;flex:none;width:calc(var(--case-width,100vw)*240/1200);height:calc(var(--case-width,100vw)*240/1200);object-fit:contain}
.graphics-toggle{position:absolute;right:16px;bottom:12px;z-index:2;background:#1a1a1a;border:1px solid #ffffff22;color:#00ffd8;border-radius:50%;width:28px;height:28px;cursor:pointer;opacity:0;transition:opacity .2s}
.graphics-gallery:hover .graphics-toggle,.graphics-gallery:focus-within .graphics-toggle{opacity:1}
@media(hover:none){.graphics-toggle{opacity:1}}
@media(max-width:639px){.graphics-gallery{padding:32px 0}.graphics-row{height:180px}.graphics-track{gap:32px}.graphics-track img{width:180px;height:180px}}
@media(prefers-reduced-motion:reduce){.graphics-row{overflow-x:auto}.graphics-track{will-change:auto}.graphics-toggle{display:none}}

/* Sales chapter follows the same 1200px type scale. */
#sales{width:calc(var(--case-width,100vw)*766/1200);max-width:none;padding:calc(var(--case-width,100vw)*64/1200) 0 calc(var(--case-width,100vw)*56/1200)}
#sales h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#sales p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0 0 calc(var(--case-width,100vw)*24/1200)}
#sales p:last-child{margin-bottom:0}
@media(max-width:639px){#sales{width:calc(100% - 40px);padding:40px 0}#sales h2{font-size:24px;line-height:30px;margin-bottom:20px}#sales p{font-size:14px;line-height:20px;margin-bottom:20px}}

/* Social copy scales with the original 1200px composition. */
#social{width:calc(var(--case-width,100vw)*766/1200);max-width:none;padding:calc(var(--case-width,100vw)*64/1200) 0 calc(var(--case-width,100vw)*56/1200)}
#social h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#social p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0 0 calc(var(--case-width,100vw)*24/1200)}
#social p:last-child{margin-bottom:0}
@media(max-width:639px){#social{width:calc(100% - 40px);padding:40px 0}#social h2{font-size:24px;line-height:30px;margin-bottom:20px}#social p{font-size:14px;line-height:20px;margin-bottom:20px}}
.social-showcase{position:relative;width:100%;aspect-ratio:1200/608;margin:0;isolation:isolate;overflow:hidden;background:#000}.social-showcase>img{position:absolute;display:block}.social-photo{left:36.666667%;top:0;width:61.333333%;height:100%;object-fit:contain}.social-cards{left:11.916667%;top:10.526316%;width:26.593407%;height:78.947368%;object-fit:contain}.social-showcase .showcase-rule{z-index:3}

.event-showcase{position:relative;margin:0;padding:6% 10%;background:radial-gradient(ellipse at 50% 60%,#071d21,transparent 70%);overflow:hidden}.event-ipad{position:relative;padding:2.3%;border-radius:4.5% / 6%;background:#141617;border:2px solid #555b5e;box-shadow:inset 0 0 0 3px #282c2e;aspect-ratio:4/3;box-sizing:border-box}.event-camera{position:absolute;left:50%;top:1.4%;width:.7%;aspect-ratio:1;border-radius:50%;background:#15262e;border:1px solid #050809}.event-screen{position:relative;overflow:hidden;width:100%;height:100%;border-radius:2.5% / 3.3%;background:#02070a;container-type:inline-size}.event-video{position:absolute;width:100%;height:100%;object-fit:cover}.event-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,6,9,.48),transparent 65%)}.event-logo{position:absolute;top:6.95%;left:4%;width:16.0833%;height:auto}.event-content{position:absolute;left:4%;bottom:7%;width:48%;color:white;font-family:InterTight,sans-serif;font-weight:500}.event-details{display:flex;gap:.67cqw;margin-bottom:2.67cqw;white-space:nowrap;font-size:1.333cqw;line-height:2cqw}.event-details span{padding:.67cqw 1cqw;border-radius:1cqw;background:#20242d}.event-content h3{font-family:DrukWide,sans-serif;font-size:4.667cqw;line-height:5.333cqw;font-weight:700;margin:0 0 .67cqw;letter-spacing:0}.event-content p{font-size:1.667cqw;line-height:2.333cqw;margin:0 0 2.667cqw}.event-register{display:inline-block;padding:1cqw 2cqw;background:#00e9cd;color:#00120e;border-radius:.667cqw;font-size:1.333cqw;line-height:2cqw;font-weight:600}.event-pause{position:absolute;right:2%;bottom:2%;border:1px solid #ffffff33;border-radius:50%;width:32px;height:32px;color:white;background:#101719bb;cursor:pointer}.event-showcase>.showcase-rule{position:absolute;left:0;width:100%;z-index:3}@media(max-width:639px){.event-showcase{padding:8% 4%}.event-pause{width:24px;height:24px;font-size:10px}}

/* Match the 1200 × 608 visual sections; keep the tablet screen explicitly bounded. */
.event-showcase{width:100%;aspect-ratio:1200/608;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.event-ipad{width:56.75%;height:auto;aspect-ratio:4/3;padding:0;flex:none;border-radius:4.5% / 6%}
.event-screen{position:absolute;inset:3.1% 2.3%;width:auto;height:auto;isolation:isolate}
.event-video{inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.event-logo{top:4%;left:4%;z-index:2;object-fit:contain}
.event-content{left:4%;bottom:4%;z-index:2}
.event-pause{z-index:3}
@media(max-width:639px){.event-showcase{padding:0}.event-ipad{width:56.75%}.event-pause{width:20px;height:20px;padding:0}}

#event{width:calc(var(--case-width,100vw)*766/1200);max-width:none;padding:calc(var(--case-width,100vw)*64/1200) 0 calc(var(--case-width,100vw)*56/1200)}
#event h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#event p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0 0 calc(var(--case-width,100vw)*24/1200)}
#event p:last-child{margin-bottom:0}
@media(max-width:639px){#event{width:calc(100% - 40px);padding:40px 0}#event h2{font-size:24px;line-height:30px;margin-bottom:20px}#event p{font-size:14px;line-height:20px;margin-bottom:20px}}

.event-video{inset:0 0 auto;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center top;z-index:0}
.event-reflection{position:absolute;left:0;right:0;top:56.25cqw;bottom:0;overflow:hidden;z-index:0;background:#02070a}
.event-reflection img{display:block;width:100%;height:auto;transform:scaleY(-1);filter:brightness(.5)}
.event-reflection:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,7,10,.1),rgba(2,7,10,.85))}
.event-shade{z-index:1}
.event-details-art{display:block;width:31.333cqw;height:3.333cqw;max-width:none;object-fit:contain;margin:0 0 2cqw}
.event-reflection img{filter:brightness(.85)}
.event-reflection:after{background:linear-gradient(to bottom,transparent,rgba(2,7,10,.9))}

.event-showcase{background:radial-gradient(ellipse 44% 46% at 50% 52%,rgba(0,205,203,.28),rgba(0,120,150,.16) 48%,transparent 85%)}
.event-ipad{width:76%;height:auto;aspect-ratio:auto;padding:1.7%;border-radius:3.5% / 6%;box-shadow:inset 0 0 0 3px #282c2e,0 0 50px #00bcb321}
.event-screen{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:2% / 3.5%}
.event-video{inset:0;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.event-logo{background:none}
.event-details{display:flex;gap:1.333cqw;margin:0 0 2cqw;font-size:1.333cqw;line-height:2cqw}
.event-details span{display:flex;align-items:center;gap:.667cqw;padding:.667cqw 1cqw;border-radius:.667cqw;background:#20242d;font-weight:500}
.event-details svg{width:2cqw;height:2cqw;stroke:#00e6ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.event-details i{height:2cqw;border-left:1px solid #7a8087;margin:0 .15cqw}
@media(max-width:639px){.event-ipad{width:76%;padding:1.7%}}

#result{width:calc(var(--case-width,100vw)*766/1200);max-width:none;padding:calc(var(--case-width,100vw)*64/1200) 0 calc(var(--case-width,100vw)*56/1200)}
#result h2{font-size:calc(var(--case-width,100vw)*32/1200);line-height:calc(var(--case-width,100vw)*40/1200);margin-bottom:calc(var(--case-width,100vw)*24/1200)}
#result p{font-size:calc(var(--case-width,100vw)*20/1200);line-height:calc(var(--case-width,100vw)*28/1200);font-weight:400;margin:0 0 calc(var(--case-width,100vw)*24/1200)}
#result p:last-child{margin-bottom:0}
@media(max-width:639px){#result{width:calc(100% - 40px);padding:40px 0}#result h2{font-size:24px;line-height:30px;margin-bottom:20px}#result p{font-size:14px;line-height:20px;margin-bottom:20px}}
.event-showcase,.social-showcase{overflow:visible}

.event-laptop-showcase{display:block;position:relative;aspect-ratio:1200/608;background:#000;padding:0;isolation:isolate}
.event-composition{position:absolute;top:0;left:0;width:1200px;height:608px;transform-origin:0 0}
.event-person{position:absolute;left:440px;top:0;width:736px;height:608px}
.event-program{position:absolute;left:87px;top:64px;width:384px;height:480px;border-radius:16px}
.event-laptop-screen{position:absolute;left:0;top:0;inset:auto;width:1200px;height:675px;aspect-ratio:auto;transform-origin:0 0;transform:matrix3d(0.2642398904295464,-0.024959594618817783,0,8.465389668293564e-05,0.05974980391978963,0.2941355238852298,0,5.8237902588420525e-06,0,0,1,0,555.0,110.0,0,1);border-radius:10px;z-index:2}
/* Give the animated hero object more room beside the headline. */
.event-laptop-screen .event-content h3{font-size:3.7336cqw;line-height:4.2664cqw}
.event-laptop-screen .event-details span{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.event-laptop-screen .event-details i{border-color:rgba(255,255,255,.45)}

/* CICADA8 finale: original Figma logo and glow, 1200px composition. */
.case-finale{position:relative;width:100%;height:calc(var(--case-width,100vw)*320/1200);overflow:hidden;isolation:isolate;background:#000}
.case-finale .finale-matrix{position:absolute;inset:0;width:100%;height:100%;opacity:.32;mask-image:linear-gradient(to bottom,transparent 0%,#000 65%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 65%,#000 100%)}
.finale-glow{position:absolute;left:calc(50% - 622.5px);bottom:-270px;width:1245px;height:643px;transform:scale(var(--finale-scale,1));transform-origin:center calc(100% - 270px);pointer-events:none}
.finale-glow img{display:block}
.finale-brand{position:absolute;left:4%;bottom:-2px;width:1102px;height:136.683px;transform:scale(var(--finale-scale,1));transform-origin:left bottom;opacity:.1;mask:url('assets/footer-mask.svg') left top/1102px 136.683px no-repeat;-webkit-mask:url('assets/footer-mask.svg') left top/1102px 136.683px no-repeat}
.finale-brand img{display:block}
/* Keep the finale flush with the page and soften the top of the glow. */
.case-body{padding-bottom:0}
.finale-glow{mask-image:linear-gradient(to bottom,transparent 0%,transparent 20%,#000 65%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 20%,#000 65%)}
/* Bring the closing logo closer to the result text. */
#result{padding-bottom:calc(var(--case-width,100vw)*28/1200)}
.case-finale{height:calc(var(--case-width,100vw)*160/1200)}
@media(max-width:639px){#result{padding-bottom:20px}}
/* Intermediate spacing and a soft fade where the finale meets the text. */
.case-finale{height:calc(var(--case-width,100vw)*230/1200)}
.case-finale::before{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.82) 25%,rgba(0,0,0,0) 100%)}
/* Preserve the Figma glow and fade it at the edge of its visible frame. */
.case-finale::before{display:none}
.finale-glow{mask-image:none;-webkit-mask-image:none}
.case-finale{mask-image:linear-gradient(to bottom,transparent 0%,#000 48%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 48%)}

.ipad-toggle,.graphics-toggle,.event-pause{display:none!important}
/* Green registration marks at the gallery and book dividers. */
.graphics-gallery::before,.presentation-book::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;z-index:10;pointer-events:none;background:url('assets/14ce2.svg') left top/8px 8px no-repeat,url('assets/14ce2.svg') right top/8px 8px no-repeat}
/* Match the existing 8px cross marks, centered on both grid intersections. */
.graphics-gallery::before,.presentation-book::before{content:none}
#graphics::after,#sales::after{content:"";position:absolute;top:auto;bottom:calc(var(--case-width,100vw) * -4 / 1200);left:calc((100% - var(--case-width,100vw)) / 2);width:var(--case-width,100vw);height:calc(var(--case-width,100vw) * 8 / 1200);z-index:25;pointer-events:none;background-image:url('assets/14ce2.svg'),url('assets/14ce2.svg');background-repeat:no-repeat;background-size:calc(var(--case-width,100vw) * 8 / 1200) calc(var(--case-width,100vw) * 8 / 1200);background-position:calc(var(--case-width,100vw) * 20 / 1200) center,calc(var(--case-width,100vw) * 1172 / 1200) center}
/* The responsive cover has its own natural height: no desktop overlap. */
@media(max-width:959px){
 .case-body{margin-top:0;padding-top:32px}
}
@media(max-width:639px){.case-body{padding-top:24px}}
/* Anchor the left light to the cover's lower edge, as on desktop. */
@media(max-width:959px){
 body{background-image:radial-gradient(ellipse 55vw 34vw at 0 var(--hero-height),rgba(0,149,121,.56) 0%,rgba(0,100,80,.25) 36%,rgba(0,55,45,.08) 62%,transparent 100%);background-size:100% calc(var(--hero-height) + 50vw)}
}
/* Overview: preserve the desktop composition; reflow at tablet and mobile sizes. */
.overview-card{display:contents}
.overview-card>img{position:absolute;display:block;max-width:none}
@media(max-width:959px){
 .overview{height:auto;padding:0 2%;--overview-gap:16px}
 .overview-stage{position:relative;width:100%;height:auto;transform:none!important}
 .overview-stage:after{display:none}
 .overview-intro{position:relative;left:auto;top:auto;width:auto;padding:0 var(--overview-gap) 32px}
 .overview-intro h2{font-size:32px;line-height:1.25;margin:0 0 24px}
 .overview-intro p{font-size:20px;line-height:1.2;max-width:none}
 .overview-grid{position:relative;left:auto;top:auto;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--case-line);border-left:1px solid var(--case-line);isolation:isolate}
 .overview-grid>.overview-line,.overview-grid>.overview-rule,.overview-grid>.overview-cross,.overview-top-fill{display:none}
 .overview-grid:after{display:none}
 .overview-card{display:grid;position:relative;min-width:0;padding:var(--overview-gap);border-right:1px solid var(--case-line);border-bottom:1px solid var(--case-line);gap:16px;align-content:start}
 .overview-card:before,.overview-card:after{content:"";position:absolute;width:8px;height:8px;background:url('assets/14ce2.svg') center/contain no-repeat;z-index:8;pointer-events:none;top:-4px}
 .overview-card:before{left:-4px}.overview-card:after{right:-4px}
 .overview-card>img,.overview-card>div{position:relative;left:auto;top:auto;width:auto;height:auto;max-width:100%;z-index:auto}
 .overview-card>img{object-fit:contain}
 .overview-card-pages{grid-column:1;grid-row:1 / 4;align-content:center;padding:0 0 24px}
 .overview-card-pages .overview-tablet{width:100%;height:auto}
 .overview-card-pages .overview-pages{padding:0 var(--overview-gap)}
 .overview-card-social{grid-column:2;grid-template-columns:1fr 1fr;background:rgba(217,217,217,.1)}
 .overview-card-social .overview-social{grid-column:1 / -1}
 .overview-card-social>img{width:100%;height:auto;aspect-ratio:1}
 .overview-card-sales{grid-column:2;grid-template-columns:1fr 1fr;align-items:center;background:rgba(217,217,217,.1)}
 .overview-card-sales .overview-booklet{width:100%;max-height:180px}
 .overview-card-charts{grid-column:2}
 .overview-card-charts .overview-diagram{width:100%;height:auto}
 .overview-grid strong{font-size:80px;line-height:1;letter-spacing:-.04em}
 .overview-grid span{font-size:12px;line-height:1.35;font-weight:400}
 .overview-charts img{width:80px;height:auto}
 .overview-card-charts:after{box-shadow:none}
 .case-body:after{top:0;background-size:1px 100%}
}
@media(max-width:639px){
 .overview{--overview-gap:12px}
 .overview-intro{padding-bottom:24px}
 .overview-intro h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 .overview-intro h2 br{display:none}
 .overview-intro p{font-size:14px;line-height:1.35}
 .overview-grid{grid-template-columns:1fr}
 .overview-card{grid-column:1;grid-row:auto;gap:16px}
 .overview-card-pages{padding-bottom:20px;align-content:start}
 .overview-card-pages .overview-tablet{width:100%}
 .overview-card-social{grid-template-columns:1fr 1fr}
 .overview-card-sales{grid-template-columns:1fr 1fr}
 .overview-card-sales .overview-booklet{max-height:220px}
 .overview-grid strong{font-size:36px;line-height:1;margin-bottom:8px}
 .overview-grid span{font-size:10px;line-height:1.15}
 .overview-charts img{width:44px;height:auto;margin-bottom:8px}
}
@media(min-width:640px) and (max-width:959px){
 .overview-card-pages{align-content:start}
}
@media(max-width:639px){.overview-intro h2 br{display:initial}}
/* Mobile overview retains the desktop photo overlay and paired metrics. */
@media(max-width:639px){
 .overview-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .overview-card-pages{grid-column:1 / -1;grid-row:1;padding:0;display:block}
 .overview-card-pages .overview-tablet{display:block;width:100%;height:auto}
 .overview-card-pages .overview-pages{position:absolute;left:0;right:0;bottom:16px;padding:0 var(--overview-gap);z-index:2}
 .overview-card-pages .overview-pages strong{font-size:80px;line-height:.95;margin-bottom:8px}
 .overview-card-social{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-content:start}
 .overview-card-sales{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;align-items:start}
 .overview-card-social .overview-social,.overview-card-sales .overview-sales{min-height:75px}
 .overview-card-social>img{align-self:end}
 .overview-card-sales .overview-booklet{width:100%;height:auto;max-height:150px;justify-self:center}
 .overview-card-charts{grid-column:1 / -1;grid-row:3}
}
/* Same paired-metric composition on phones and portrait tablets. */
@media(max-width:959px){
 .overview-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .overview-card-pages{grid-column:1 / -1;grid-row:1;display:block;padding:0}
 .overview-card-pages .overview-tablet{display:block;width:100%;height:auto}
 .overview-card-pages .overview-pages{position:absolute;left:0;right:0;bottom:5%;padding:0 var(--overview-gap);z-index:2}
 .overview-card-pages .overview-pages strong{font-size:clamp(80px,13.333vw,128px);line-height:.95;margin-bottom:8px}
 .overview-card-social,.overview-card-sales{display:block;position:relative;container-type:inline-size;aspect-ratio:287 / 304;padding:0;background:transparent}
 .overview-card-social{grid-column:1;grid-row:2}
 .overview-card-sales{grid-column:2;grid-row:2}
 .overview-card-charts{grid-column:1 / -1;grid-row:3}
 .overview-card-social .overview-social,.overview-card-sales .overview-sales{position:absolute;left:8.71%;top:7.89%;min-height:0;width:82.58%;padding:0}
 .overview-card-social strong,.overview-card-sales strong{font-size:27.875cqw;line-height:1;letter-spacing:-.04em;margin:0 0 3.48cqw}
 .overview-card-social span,.overview-card-sales span{font-size:4.181cqw;line-height:1.35;font-weight:400}
 .overview-card-social .overview-social1,.overview-card-social .overview-social2{position:absolute;top:57.38%;width:38.87%;height:auto;aspect-ratio:1;border-radius:2.79cqw}
 .overview-card-social .overview-social1{left:8.71%}
 .overview-card-social .overview-social2{left:52.76%}
 .overview-card-sales .overview-booklet{position:absolute;left:51.24%;top:37.17%;width:40.87%;height:auto;max-height:none;border-radius:2.79cqw}
}
/* Keep the desktop/landscape metric background above the overlapping photo. */
@media(min-width:960px){
 .overview-top-fill{z-index:1}
 .overview-social,.overview-sales,.overview-social1,.overview-social2,.overview-booklet{z-index:2}
}
/* Third screen: shared copy scale and devices that reflow without overlap. */
@media(max-width:959px){
 #context{width:calc(96% - 32px);max-width:none}
 .overview + #context{padding:40px 0 32px}
 #context h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #context p{font-size:20px;line-height:1.2}
 .site-showcase{overflow:visible}
 .site-showcase>.showcase-rule{height:8px;object-fit:fill}
}
@media(max-width:639px){
 #context{width:calc(96% - 24px)}
 .overview + #context{padding:32px 0 24px}
 #context h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #context p{font-size:14px;line-height:1.35}
 .site-showcase{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 0 0}
 .site-showcase .ipad{position:relative;left:auto;top:auto;width:70%;height:auto;aspect-ratio:390/510;padding:1.85%;flex:none;order:0}
 .site-showcase .site-monitor{position:relative;left:auto;top:auto;width:96%;height:auto;aspect-ratio:736/608;flex:none;order:1}
 .site-showcase .ipad-screen{border-radius:9px}
}
/* Fourth screen: shared responsive typography and two large moving rows. */
@media(max-width:959px){
 #graphics{width:calc(96% - 32px);padding:40px 0 32px}
 #graphics h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #graphics p{font-size:20px;line-height:1.2;margin-bottom:24px}
 #graphics p:last-child{margin-bottom:0}
 .graphics-gallery{--graphic-size:clamp(220px,34vw,300px);padding:32px 0;overflow:visible;border-width:1px;display:grid;gap:16px}
 .graphics-gallery:before,.graphics-gallery:after{content:"";position:absolute;left:-4px;right:-4px;height:8px;background:url('assets/14ce2.svg') left center/8px 8px no-repeat,url('assets/14ce2.svg') right center/8px 8px no-repeat;pointer-events:none;z-index:6}
 .graphics-gallery:before{top:-4px}.graphics-gallery:after{bottom:-4px}
 .graphics-row{height:var(--graphic-size)}
 .graphics-track{gap:24px}
 .graphics-track img{width:var(--graphic-size);height:var(--graphic-size)}
}
@media(max-width:639px){
 #graphics{width:calc(96% - 24px);padding:32px 0 24px}
 #graphics h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #graphics p{font-size:14px;line-height:1.35;margin-bottom:20px}
 .graphics-gallery{--graphic-size:clamp(160px,min(64vw,23svh),240px);padding:12px 0;gap:4px}
 .graphics-track{gap:16px}
}

/* Sales: shared responsive copy; existing book layout preserved. */
@media(max-width:959px){
 #sales{width:calc(96% - 32px);padding:40px 0 32px}
 #sales h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #sales p{font-size:20px;line-height:1.2;margin-bottom:24px}
 #sales p:last-child{margin-bottom:0}
}
@media(max-width:639px){
 #sales{width:calc(96% - 24px);padding:32px 0 24px}
 #sales h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #sales p{font-size:14px;line-height:1.35;margin-bottom:20px}
 #sales p:last-child{margin-bottom:0}
}

/* A boundary is drawn once, by the preceding visual block. */
.site-showcase + #graphics:before,.graphics-gallery + #sales:before,
.social-showcase + #event:before,.event-showcase + #result:before{display:none}
.showcase-rule{display:block;height:calc(var(--case-line-width)*8);background:url('assets/14ce2.svg') calc(2% - var(--case-line-width)*4) center / calc(var(--case-line-width)*8) calc(var(--case-line-width)*8) no-repeat,url('assets/14ce2.svg') calc(98% + var(--case-line-width)*4) center / calc(var(--case-line-width)*8) calc(var(--case-line-width)*8) no-repeat,linear-gradient(var(--case-line),var(--case-line)) center / 100% var(--case-line-width) no-repeat}
@media(max-width:959px){
 :root{--case-line-width:1px}
 #social{width:calc(96% - 32px);padding:40px 0 32px}
 #social h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #social p{font-size:20px;line-height:1.2;margin-bottom:24px}
 #social p:last-child{margin-bottom:0}
 .chapter:before{top:-4px;height:8px;background:url('assets/14ce2.svg') calc(2% - 4px) center / 8px 8px no-repeat,url('assets/14ce2.svg') calc(98% + 4px) center / 8px 8px no-repeat,linear-gradient(var(--case-line),var(--case-line)) center / 100% 1px no-repeat}
 #graphics:after{display:none}
 #sales:after{height:8px;bottom:-4px;background-size:8px 8px;background-position:calc(2% - 4px) center,calc(98% + 4px) center}
 .overview-grid{border-left:0}
 .overview-card{border-right:0}
 .overview-card-social{border-right:1px solid var(--case-line)}
 .overview-card-sales:before{display:none}
 .overview-card-charts:after{top:-4px}
 .overview-card-charts:before{top:-4px}
 .social-showcase{aspect-ratio:1200/700}
 .social-photo{left:36%;width:62%}
 .social-cards{left:6%;width:32%;top:8%;height:84%}
}
@media(max-width:639px){
 #social{width:calc(96% - 24px);padding:32px 0 24px}
 #social h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #social p{font-size:14px;line-height:1.35;margin-bottom:20px}
 .social-showcase{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 0}
 .social-showcase>.social-photo,.social-showcase>.social-cards{position:relative;left:auto;top:auto;height:auto;object-fit:contain}
 .social-showcase>.social-photo{width:96%}
 .social-showcase>.social-cards{width:70%}
}

@media(max-width:959px){
 .overview-grid:after{content:"";display:block;position:absolute;inset:auto -4px -4px;height:8px;z-index:8;pointer-events:none;background:url('assets/14ce2.svg') left center/8px 8px no-repeat,url('assets/14ce2.svg') right center/8px 8px no-repeat}
}

/* Mobile social composition: photograph meets the rule, cards overlap its fade. */
@media(max-width:639px){
 .social-showcase{padding-top:0;gap:0}
 .social-showcase>.social-photo{-webkit-mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.12) 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.12) 90%,transparent 100%)}
 .social-showcase>.social-cards{margin-top:-8px;z-index:2}
}

/* Event: shared typography and a stacked mobile composition. */
@media(max-width:959px){
 #event{width:calc(96% - 32px);padding:40px 0 32px}
 #event h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #event p{font-size:20px;line-height:1.2;margin-bottom:24px}
 #event p:last-child{margin-bottom:0}
}
@media(max-width:639px){
 #event{width:calc(96% - 24px);padding:32px 0 24px}
 #event h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #event p{font-size:14px;line-height:1.35;margin-bottom:20px}
 #event p:last-child{margin-bottom:0}
 .event-laptop-showcase{aspect-ratio:784/1428}
 .event-composition{width:784px;height:1428px}
 .event-person{left:24px}
 .event-program{left:96px;top:640px;width:592px;height:740px}
 .event-laptop-screen{translate:-416px 0}
}

/* Event mobile: poster starts within the faded lower edge of the photo. */
@media(max-width:639px){
 .event-person{-webkit-mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.12) 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.12) 90%,transparent 100%)}
 .event-program{top:592px;z-index:3}
 .event-composition{height:1380px}
 .event-laptop-showcase{aspect-ratio:784/1380}
}

/* Closing screen: shared type scale and room for the fixed navigation. */
@media(max-width:959px){
 #result{width:calc(96% - 32px);padding:40px 0 24px}
 #result h2{font-size:32px;line-height:1.25;margin-bottom:24px}
 #result p{font-size:20px;line-height:1.2;margin-bottom:24px}
 #result p:last-child{margin-bottom:0}
 .case-finale{height:200px}
}
@media(max-width:639px){
 #result{width:calc(96% - 24px);padding:32px 0 16px}
 #result h2{font-size:24px;line-height:1.25;margin-bottom:20px}
 #result p{font-size:14px;line-height:1.35;margin-bottom:20px}
 #result p:last-child{margin-bottom:0}
 .case-finale{height:160px}
}

@media(max-width:639px){
 .case-dock{display:none}
 #result{padding-bottom:8px}
 .case-finale{height:96px}
}