/* Puzzle 003: finished interiors; the shared grid and pixel animation engine stay intact. */
.finished-study{--ink:#192333;--blue:#003ccf;--line:#bbc5d2;--soft:#e9eef5;--muted:#637086;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
.finished-study .cover{padding:clamp(16px,1.65vw,32px);gap:0;justify-content:flex-start;background:#fafbf9;color:var(--ink)}
.finished-study .panel{container-type:size}
.finished-study .cover h2{font:400 clamp(19px,6.5cqw,38px)/1.09 Arial,Helvetica,sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:0}
.finished-study .cover p{display:block;font:11px/1.45 var(--mono);letter-spacing:-.025em;text-transform:uppercase;margin:0;max-width:none}
.tech-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none;border-bottom:1px solid var(--line);padding:0 0 12px;font:600 10px/1.3 var(--mono);letter-spacing:.01em}
.tech-header>span:first-child{display:flex;gap:9px;align-items:center}.tech-header i{font-style:normal;color:var(--blue)}.tech-number{color:var(--muted);font-size:9px;font-weight:400}
.panel-intro{margin:18px 0 14px;flex:none}.panel-intro p{margin-top:8px!important;color:#536177}
.tech-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none;margin-top:auto;padding-top:11px;border-top:1px solid var(--line);font:8px/1.35 var(--mono);letter-spacing:.01em;color:var(--muted)}.tech-bottom>span:last-child{font-size:15px;color:var(--blue)}
.drawing{display:block;height:100%;width:100%;color:#7d8ca2}.drawing path,.drawing rect,.drawing circle{vector-effect:non-scaling-stroke}
/* Overview */
.finished-study [data-id="overview"] .cover{background-color:#fafbf9;background-image:linear-gradient(#dde4ed66 1px,transparent 1px),linear-gradient(90deg,#dde4ed66 1px,transparent 1px);background-size:24px 24px}
.hero-id{display:flex;align-items:center;gap:14px;font:9px/1.5 var(--mono);flex:none}.small-na{font:700 29px Arial;border-right:1px solid var(--line);padding-right:14px}.hero-edition{margin-left:auto;color:var(--muted);text-align:right;font-size:8px}.hero-visual{position:relative;flex:1;min-height:95px;margin:14px -10px 12px;display:flex;align-items:center;justify-content:center}.hero-visual .tower{width:100%;max-height:410px}.hero-sequence{position:absolute;left:10px;top:8%;display:flex;flex-direction:column;font:8px/2.4 var(--mono);color:var(--muted)}.hero-sequence span:last-child{color:var(--blue)}.hero-copy{flex:none}.eyebrow{font:clamp(17px,3.9cqw,28px)/1 var(--mono)}.finished-study .cover h1{font:400 clamp(46px,15.7cqw,136px)/.95 Impact,'Arial Narrow',sans-serif;letter-spacing:-.025em;margin:8px 0 15px;white-space:nowrap}.hero-copy h1 span{color:var(--blue)}.finished-study .hero-copy p{font:clamp(11px,2.25cqw,16px)/1.55 var(--mono);max-width:43ch}.hero-foot{display:flex;align-items:end;justify-content:space-between;gap:15px;flex:none;padding-top:24px;font:8px/1.5 var(--mono);color:var(--muted)}.hatch{width:33%;height:20px;background:repeating-linear-gradient(135deg,transparent 0 7px,#8ba7d4 7px 8px,transparent 8px 13px)}
/* Development: real text and precise connectors at every width. */
.build-flow{display:grid;grid-template-columns:1fr 18px 1.2fr 18px 1.1fr;align-items:center;gap:0;min-height:70px;flex:1;padding:4px 0 18px;font:9px/1.45 var(--mono)}.flow-input,.flow-output{display:flex;flex-direction:column;gap:9px}.flow-input>span,.flow-output>span{border:1px solid var(--line);background:#fff;padding:8px 6px;display:flex;align-items:center;justify-content:center;min-height:30px;white-space:nowrap}.flow-arrow{text-align:center;color:#66778d;font-size:16px}.flow-engine{border:1px solid #8598b7;background:#eff4fd;min-height:90px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 5px}.flow-engine b{font:20px Arial;color:var(--blue);letter-spacing:-4px;padding-right:2px}.flow-engine>span{font-size:9px}.flow-output>span{border-left:2px solid var(--blue)}
/* Contact */
.contact-window{border:1px solid #aab8cc;background:#fff;flex:1;min-height:70px;max-height:160px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;margin:5px 0 20px}.contact-prompt{font:12px/1.5 Arial;color:var(--muted)}.contact-rule{border-top:1px solid #e5e9ef;margin-top:auto}.contact-window-foot{font:9px/1.2 var(--mono);display:flex;align-items:center;justify-content:space-between;padding-top:12px}.contact-window-foot b{font:22px Arial;color:var(--blue)}
/* One visual product, four fully composed production outputs. */
.product-outputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-height:85px;margin:2px 0 18px}.product-outputs figure{margin:0;min-height:0;display:flex;flex-direction:column;gap:8px}.output-art{position:relative;flex:1;min-height:60px;overflow:hidden;border:1px solid #c6cdd6;background:#f2f1ec;isolation:isolate}.output-art img{width:100%;height:100%;object-fit:cover;display:block}.product-photo img{object-position:50% 54%}.product-outputs figcaption{font:7px/1.4 var(--mono);color:#4d5c72;white-space:nowrap}.catalogue{background:#fdfcf8;padding:6px;display:flex;flex-direction:column;justify-content:space-between}.catalogue-title{font:700 clamp(8px,3cqw,15px)/1 Arial;letter-spacing:-.03em;border-bottom:1px solid #9aa2a9;padding-bottom:5px}.catalogue-title>span{display:block;font:4px/1.2 Arial;letter-spacing:.1em;margin-top:4px}.catalogue-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:5px;height:65%;margin:5px 0;min-height:0}.catalogue-grid img{object-fit:cover}.catalogue-grid>div{font:6px/1.3 Arial;display:flex;flex-direction:column;gap:3px}.catalogue-grid i{display:block;height:1px;background:#aab0b3}.catalogue-foot{font:4px/1.5 Arial;border-top:1px solid #c1c6ca;padding-top:4px}.campaign img{object-position:40% 55%;transform:scale(1.35);transform-origin:center 65%;filter:brightness(.68)}.campaign>span{position:absolute;left:8px;top:10px;color:#fff;font:400 clamp(12px,4cqw,22px)/.95 Arial;letter-spacing:-.06em}.newsletter{background:#fdfcf8;padding:6px;display:flex;flex-direction:column}.newsletter>div{font:700 6px Arial;display:flex;justify-content:space-between;border-bottom:1px solid #b9bec3;padding-bottom:4px}.newsletter>strong{font:500 clamp(9px,3cqw,16px)/1 Arial;letter-spacing:-.035em;padding:8px 0}.newsletter img{min-height:0;height:auto;flex:1;object-fit:cover}.newsletter>small{font:3.5px Arial;background:#192333;color:white;padding:4px 2px;white-space:nowrap;margin-top:5px}
/* Systems, people and process */
.system-content{display:flex;align-items:center;flex:1;min-height:0;gap:10px;padding:12px 0}.system-content>div:first-child{width:55%}.finished-study .system-content p{font:10px/1.45 var(--mono)}.server-visual{width:45%;height:100%;min-height:70px;max-height:180px}.system-list{list-style:none;padding:0;margin:14px 0 0;font:9px/1.9 var(--mono);text-transform:uppercase}.system-list li{display:flex;gap:8px}.system-list span{color:var(--blue)}.finished-study .team-intro{margin:18px 0 0;font:11px/1.55 Arial;text-transform:none}.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:center;margin:auto 0;padding:15px 0}.roles>div{display:flex;flex-direction:column;align-items:center;gap:8px}.roles span{border:1px solid #9baac0;border-radius:50%;width:clamp(30px,11cqw,62px);aspect-ratio:1;display:grid;place-items:center;background:#fff;font:11px var(--mono)}.roles small{font:7px/1.2 var(--mono);text-transform:uppercase;color:#58677d}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1;align-content:center;margin:0;padding:18px 0 22px}.steps>li{display:flex;flex-direction:column;gap:9px;position:relative;min-width:0}.step-num{font:12px var(--mono)}.step-point{width:9px;height:9px;border:1px solid #63728a;border-radius:50%;background:#fafbf9;position:relative}.steps>li:first-child .step-point{background:var(--blue);border-color:var(--blue)}.step-point:after{content:'';position:absolute;border-top:1px dotted #8293ac;width:calc((100cqw - 48px)/4 - 9px);left:12px;top:3px}.steps>li:last-child .step-point:after{display:none}.steps strong{font:600 10px/1.3 Arial;text-transform:uppercase}.finished-study .steps p{font:10px/1.45 Arial;text-transform:none;color:#637086}
/* Open panels use the same vocabulary and preserve edge-to-edge scrolling. */
.finished-study .detail{background:#fafbf9;color:var(--ink)}.finished-study .detail-inner{padding:0 30px;min-height:100%}.detail-top{height:65px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);font:11px/1.3 var(--mono);color:var(--blue)}.detail-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;padding:32px 0}.finished-study .detail h2{font:400 clamp(30px,6.5cqw,65px)/1.01 Arial;letter-spacing:-.055em;margin:0 0 20px;max-width:none}.finished-study .detail p{font:15px/1.55 Arial;max-width:48ch;margin:0;color:#506078}.detail-items{margin-top:25px}.detail-items>div{border-top:1px solid #d5dce5;padding:14px 0}.detail-items h3{font:500 15px/1.25 Arial;margin:0 0 5px}.finished-study .detail-items p{font-size:13px}.detail-art{min-width:0;display:flex;align-items:center;align-self:stretch;max-height:600px;overflow:hidden}.detail-art>.drawing{max-height:480px}.detail-art .build-flow{grid-template-columns:1fr;gap:8px;padding:0}.detail-art .flow-input,.detail-art .flow-output{flex-direction:row}.detail-art .flow-input>span,.detail-art .flow-output>span{flex:1}.detail-art .flow-arrow{transform:rotate(90deg)}.detail-art .flow-engine{gap:20px}.detail-art .roles{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.detail-art .roles span{width:70px}.detail-art .roles small{font-size:9px}.detail-art .steps{grid-template-columns:1fr;width:100%;gap:22px}.detail-art .step-point{display:none}.detail-art .steps strong{font-size:14px}.detail-art .steps p{font-size:13px}.detail-art .steps>li{border-top:1px solid var(--line);padding-top:12px}.detail-art .product-outputs{grid-template-columns:repeat(2,minmax(0,1fr));height:450px;flex:1;min-height:0;gap:20px 12px;margin:0}.detail-art .product-outputs figcaption{font-size:8px}.detail-art .catalogue-title{font-size:18px}.detail-art .campaign>span{font-size:30px}.detail-art .newsletter>strong{font-size:20px}.detail-art .newsletter>div{font-size:9px}.detail-art .newsletter>small{font-size:5px}.detail-art .catalogue-grid>div{font-size:9px}.detail-art .catalogue-foot{font-size:6px}.detail-end{border-top:1px solid var(--line);padding:18px 0;font:9px var(--mono);color:var(--muted)}.detail-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;background:var(--blue);color:#fff;border:0;padding:15px 18px;min-height:46px;font:13px Arial;margin:18px 0 0;border-radius:0}.detail-cta span{font-size:19px}.detail-cta:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.detail-cta:disabled{opacity:.55;cursor:wait}
.enquiry-form{max-width:720px;margin:0 auto;padding:30px 0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.enquiry-form label{display:block;font:12px Arial;margin-bottom:18px}.enquiry-form label>span{color:var(--muted)}.enquiry-form input,.enquiry-form textarea{display:block;width:100%;margin-top:8px;border:1px solid #aab7ca;background:#fff;padding:12px;font:15px/1.5 Arial;color:var(--ink);border-radius:0}.enquiry-form textarea{resize:vertical;min-height:125px}.enquiry-form input:focus,.enquiry-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px}.enquiry-form .form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px}.form-bottom .detail-cta{margin:0;flex:none}.finished-study .form-status{font:12px/1.4 Arial}.finished-study .contact-email{background:none;padding:0;color:var(--blue);font:12px Arial;margin:20px 0 0}
/* Small initial rectangles retain hierarchy without shrinking diagrams to dust. */
@container (max-height:270px){.cover .tech-header{padding-bottom:8px}.cover .panel-intro{margin:12px 0 9px}.finished-study .cover h2{font-size:clamp(18px,5.4cqw,28px)}.cover .tech-bottom{padding-top:8px;font-size:7px}.cover .build-flow{padding-bottom:10px;min-height:70px;font-size:8px}.cover .flow-input>span,.cover .flow-output>span{min-height:23px;padding:5px 3px}.cover .flow-input,.cover .flow-output{gap:5px}.cover .flow-engine{min-height:75px;gap:5px}.cover .product-outputs{margin-bottom:10px;min-height:68px}.cover .system-list{margin-top:8px;line-height:1.6}.finished-study .cover .system-content p{font-size:9px}.cover .roles{padding:10px 0}.finished-study .cover .team-intro{margin-top:12px;font-size:11px}.cover .steps{padding:14px 0}.cover .steps>li{gap:7px}.cover .contact-window{padding:10px;margin-bottom:12px;min-height:60px}.cover .contact-rule{display:none}}
@container (max-width:330px){.finished-study .cover{padding:15px}.cover .tech-header{font-size:9px;gap:5px}.cover .tech-header>span:first-child{gap:6px}.finished-study .cover h2{font-size:22px}.finished-study .cover .panel-intro p{font-size:9px}.cover .product-outputs{gap:5px}.cover .product-outputs figcaption{font-size:5.8px}.cover .catalogue{padding:4px}.cover .newsletter{padding:4px}.cover .system-content{gap:3px}.cover .roles small{font-size:6px}.cover .tech-bottom{font-size:7px}.cover .flow-engine b{display:none}.cover .build-flow{grid-template-columns:1fr 12px 1fr 12px 1fr;font-size:7px}.cover .flow-engine>span{font-size:8px}}
@container (max-width:650px){.detail-layout{grid-template-columns:1fr;gap:20px}.detail-art{max-height:none}.detail-art>.drawing{max-height:270px}.detail-art .roles{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-art .roles span{width:48px}.detail-art .product-outputs{height:360px}.detail-art .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:901px) and (max-height:760px){.hero-foot{padding-top:12px}.hero-visual{margin:8px -5px}.hero-copy h1{margin-bottom:12px!important}.finished-study .hero-copy p{font-size:11px}.hero-sequence{font-size:7px;top:0}.finished-study .cover{padding:18px}.cover .tech-bottom{font-size:7px}}
@media(max-width:900px){body.finished-study:not(.focused){height:auto;min-height:0}.finished-study:not(.focused) #board{flex:none;height:2640px}.finished-study:not(.focused) .cover{padding:20px;gap:0}.finished-study:not(.focused) .cover h2{font:400 27px/1.06 Arial;letter-spacing:-.04em}.finished-study:not(.focused) .cover h1{font:400 clamp(38px,14.8cqw,110px)/.95 Impact,'Arial Narrow',sans-serif}.finished-study .hero-visual{position:absolute;top:58px;right:10px;width:47%;height:122px;margin:0;min-height:0}.hero-sequence,.hero-edition{display:none}.hero-id{font-size:8px}.small-na{font-size:26px}.hero-copy{margin-top:68px}.hero-copy .eyebrow{font-size:16px}.finished-study .hero-copy p{font-size:10px;max-width:38ch}.hero-foot{display:none}.finished-study .tech-header{font-size:10px}.finished-study .cover p{font-size:11px}.finished-study .cover .panel-intro{margin-top:17px}.finished-study .logo img{max-width:170px}.finished-study .detail-inner{padding:0 20px}.detail-top{height:44px;font-size:10px}.detail-layout{padding-top:24px}.finished-study .detail h2{font-size:38px}.finished-study .detail p{font-size:14px}.finished-study .detail-items p{font-size:13px}.detail-art .roles{gap:10px}.detail-art .roles small{font-size:7px}.form-row{grid-template-columns:1fr;gap:0}.form-bottom{align-items:start;flex-direction:column}.enquiry-form{padding:22px 0}.finished-study .cover .tech-bottom{font-size:8px}.cover .steps{gap:10px}.finished-study .cover .steps p{font-size:10px}.finished-study .cover .steps strong{font-size:9px}.product-outputs{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.finished-study *{scroll-behavior:auto}}
/* The connector diagram sizes its nodes to its allotted space, never over the footer. */
.cover .build-flow{min-height:82px;padding:0 0 14px}.cover .flow-input,.cover .flow-output{height:100%;min-height:0;justify-content:center;gap:5px}.cover .flow-input>span,.cover .flow-output>span{min-height:0;max-height:32px;flex:1;padding:3px}.cover .flow-engine{height:100%;min-height:0;max-height:105px}.finished-study .cover .team-intro{font:12px/1.5 Arial;text-transform:none;margin-top:16px}.finished-study .cover .system-content p{font:11px/1.4 Arial;text-transform:none}
@container (max-height:270px){.cover .build-flow{min-height:72px;padding-bottom:10px}.cover .flow-input>span,.cover .flow-output>span{font-size:8px;max-height:24px}.cover .flow-engine{max-height:80px}.cover .panel-intro{margin:10px 0 8px}.finished-study .cover .team-intro{margin-top:12px;font-size:11px}}
@container (max-width:250px){.finished-study .cover h2{font-size:18px}.cover .product-outputs{grid-template-columns:repeat(2,minmax(0,1fr));min-height:72px}.cover .product-outputs figure:nth-child(n+3){display:none}.cover .product-outputs figcaption{font-size:7px}.finished-study .cover .panel-intro p{font-size:8px}.cover .tech-header{font-size:8px}.cover .tech-number{display:none}.cover .tech-bottom{font-size:6px}}
@media(max-width:900px){.finished-study .hero-visual{height:88px;top:54px}.finished-study .cover .team-intro{font-size:13px;line-height:1.6}.finished-study .cover .system-content p{font-size:13px}.cover .flow-input>span,.cover .flow-output>span{font-size:9px}.cover .flow-engine>span{font-size:9px}}
@container (max-height:250px){.finished-study [data-id="development"] .cover{padding:14px}.finished-study [data-id="development"] .cover h2{font-size:22px}.finished-study [data-id="development"] .panel-intro{margin:8px 0 7px}.finished-study [data-id="development"] .panel-intro p{font-size:10px;margin-top:6px!important}.finished-study [data-id="development"] .cover .tech-bottom{display:none}}
.cover .contact-window{flex-direction:row;align-items:center;gap:12px;min-height:52px;padding:12px 15px}.cover .contact-rule{display:none}.cover .contact-window-foot{padding:0;font-size:0}.cover .contact-window-foot b{font-size:24px}.product-photo{background:#e2dfd8}.product-photo img{object-fit:contain}
@container (max-height:270px){[data-id="production"] .cover .tech-bottom{display:none}.cover .product-outputs{min-height:85px;margin-bottom:0}}
@container (max-height:250px){.finished-study [data-id="contact"] .cover{padding:14px}.finished-study [data-id="contact"] .cover h2{font-size:24px}.finished-study [data-id="contact"] .cover .tech-bottom{display:none}}
@container (max-height:210px){.finished-study [data-id="team"] .cover{padding:14px}.finished-study [data-id="team"] .cover .tech-bottom{display:none}.cover .roles{padding:8px 0}.cover .system-content{padding:8px 0}.finished-study .cover .system-content p{font-size:10px}.cover .system-list{font-size:8px;line-height:1.5;margin-top:5px}.cover .steps{padding:10px 0}.cover .steps>li{gap:5px}.finished-study .cover .steps p{font-size:9px}.cover .steps strong{font-size:9px}}