/* Minimal reader navigation; dark palette scoped to Innoscribe. */
.map-reader{padding-top:var(--page-top)}
.case-navigation{align-items:center;margin-top:0;margin-bottom:var(--gap-sections-compact)}
.case-talk{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
body[data-piece="innoscribe"] .case-talk:hover{color:var(--reader-accent)}
body[data-piece="innoscribe"] #main .hero{padding-bottom:var(--gap-block)}
body[data-piece="innoscribe"]{
 --paper:var(--background-page-dark);--ink:var(--neutral-0);--secondary:var(--neutral-300);--muted:#cdceca;
 --line:var(--neutral-600);--surface:color-mix(in srgb,var(--neutral-0) 10%,transparent);
 --reader-accent:#ffebae;
 background:var(--paper);color:var(--ink);color-scheme:dark;
}
html:has(body[data-piece="innoscribe"]){background:var(--background-page-dark)}
body[data-piece="innoscribe"] #main .visual-placeholder{background:var(--surface);border-color:var(--line)}
body[data-piece="innoscribe"] .key-point{background:var(--surface);border-color:var(--muted);color:var(--muted)}
body[data-piece="innoscribe"] .case-navigation img{filter:brightness(0) invert(1)}
body[data-piece="innoscribe"] :is(a,button):focus-visible{outline-color:var(--reader-accent)}
body[data-piece="innoscribe"] :is(.case-navigation,.case-footer) a:hover{color:var(--reader-accent)}
dialog{border:1px solid var(--border-neutral-subtle);border-radius:24px;padding:40px;width:min(440px,calc(100% - 32px));box-shadow:0 24px 100px #23231f25;background:#ffffffee;backdrop-filter:blur(18px);color:var(--text-neutral-primary)}
dialog::backdrop{background:#31312f25;backdrop-filter:blur(8px)}
.close-dialog{position:absolute;right:16px;top:16px;padding:6px 10px;height:32px;display:grid;place-items:center;background:#f5f5f2;border-radius:999px;font-size:11px}
.close-dialog img{width:16px;height:16px}
.eyebrow{font-size:12px;color:var(--text-neutral-secondary)}
dialog h2{font-weight:500;font-size:36px;letter-spacing:-1px;margin:12px 0}
.email-address{font-size:18px}
.email-address:hover{text-decoration:underline;text-underline-offset:4px}
.contact-actions{display:flex;gap:8px;margin-top:32px}
.contact-actions>a,.contact-actions>button{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#f1f1ed;font-size:12px}
.contact-actions .button-primary{background:var(--text-neutral-primary);color:white}
.button-primary img{width:14px;filter:brightness(0) invert(1)}
#copy-status{font-size:12px;min-height:18px;margin-top:12px;color:var(--text-neutral-secondary)}
body[data-piece="innoscribe"] dialog{background:var(--paper);color:var(--ink);border-color:var(--line)}
body[data-piece="innoscribe"] dialog::backdrop{background:#0006}
body[data-piece="innoscribe"] dialog :is(.eyebrow,#copy-status){color:var(--secondary)}
body[data-piece="innoscribe"] dialog :is(.close-dialog,.contact-actions>a,.contact-actions>button){background:var(--surface);color:var(--ink)}

/* Existing animated project cover leads the overview, followed by its introduction. */
.overview .case-mockup{margin:0 0 var(--gap-block);width:100%;min-width:0}
.overview .case-mockup .inno-mock-frame{border-color:var(--line);box-shadow:none}
.overview .prose > .overview-subtitle{
 color:var(--ink);
 font:var(--font-weight-regular) clamp(var(--font-size-section),3vw,var(--font-size-hero))/1.2 var(--serif);
 letter-spacing:var(--font-tracking-hero);
 text-wrap:pretty;
}
.overview .overview-subtitle + p{margin-top:var(--gap-related-compact)}

@media(min-width:761px){
 .overview .case-mockup,
 .overview .case-mockup + .prose{width:85%;margin-inline:auto 0}
}

.overview .section-aside{position:static}
.overview .section-aside .responsibility-row{grid-template-columns:1fr;gap:var(--gap-pair)}

@media(min-width:761px){
 .overview>.section-content{padding-top:var(--overview-content-offset,0px)}
}

/* A shared editorial accent for the two key design statements. */
body[data-piece="innoscribe"] .prose > .serif-statement{
 border-inline-start:var(--stroke-primitive-2) solid var(--muted);
 padding-inline-start:var(--gap-items-compact);
}

/* Glass speech bubbles. question-glass.mjs renders each one as a bevelled glass slab that hangs
   from its top edge and twists like a chandelier crystal under the pointer. These CSS rules size
   the bubble, keep the real text for assistive tech, and draw a quiet lens when WebGL is missing. */
body[data-piece="innoscribe"] .questions > p{display:flex;flex-direction:column;min-width:0}
.question-bubble{
 position:relative;
 isolation:isolate;
 display:flex;
 align-items:center;
 justify-content:center;
 flex:none;
 width:min(100%,calc(var(--portfolio-square-size) * var(--portfolio-map-scale)));
 height:calc(var(--portfolio-square-size) * var(--portfolio-map-scale) - var(--gap-items-compact));
 align-self:flex-end;
 padding:var(--padding-comfortable);
 margin-bottom:var(--gap-related-compact);
 color:var(--ink);
 font:var(--pill-font-weight) var(--pill-font-size)/var(--pill-line-height) var(--mono);
 text-transform:uppercase;
 letter-spacing:var(--pill-tracking);
 text-align:center;
 text-wrap:balance;
}
.questions > p:nth-child(2) .question-bubble{padding-inline:var(--padding-container-compact)}
.question-bubble::before{
 content:"";
 position:absolute;
 inset:0 0 calc(-1 * var(--bubble-tail));
 z-index:-1;
 pointer-events:none;
 background:var(--bubble-edge) 0 0/100% 100% no-repeat,rgb(246 243 234 / .12);
 -webkit-mask:var(--bubble-mask) 0 0/100% 100% no-repeat;
 mask:var(--bubble-mask) 0 0/100% 100% no-repeat;
}
.question-bubble.is-glass{color:transparent}
.question-bubble.is-glass::before{content:none}
.question-glass{position:absolute;z-index:1;pointer-events:none;display:block}
.question-bubble{--bubble-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20147.2%20142.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M25.6%200H121.6A25.6%2025.6%200%200%201%20147.2%2025.6V97.6A25.6%2025.6%200%200%201%20121.6%20123.2H113.6V141.2L91.6%20123.2H25.6A25.6%2025.6%200%200%201%200%2097.6V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/svg%3E");--bubble-edge:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20147.2%20142.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.2%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.08%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.12%22/%3E%3C/linearGradient%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M25.6%200H121.6A25.6%2025.6%200%200%201%20147.2%2025.6V97.6A25.6%2025.6%200%200%201%20121.6%20123.2H113.6V141.2L91.6%20123.2H25.6A25.6%2025.6%200%200%201%200%2097.6V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d%3D%22M25.6%200H121.6A25.6%2025.6%200%200%201%20147.2%2025.6V97.6A25.6%2025.6%200%200%201%20121.6%20123.2H113.6V141.2L91.6%20123.2H25.6A25.6%2025.6%200%200%201%200%2097.6V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23r%29%22%20stroke-width%3D%222%22%20clip-path%3D%22url%28%23c%29%22/%3E%3C/svg%3E");--bubble-tail:19px}
@media(min-width:1500px){.question-bubble{--bubble-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%20155%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M25.6%200H134.4A25.6%2025.6%200%200%201%20160%2025.6V110.4A25.6%2025.6%200%200%201%20134.4%20136H126.4V154L104.4%20136H25.6A25.6%2025.6%200%200%201%200%20110.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/svg%3E");--bubble-edge:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%20155%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.2%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.08%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.12%22/%3E%3C/linearGradient%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M25.6%200H134.4A25.6%2025.6%200%200%201%20160%2025.6V110.4A25.6%2025.6%200%200%201%20134.4%20136H126.4V154L104.4%20136H25.6A25.6%2025.6%200%200%201%200%20110.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d%3D%22M25.6%200H134.4A25.6%2025.6%200%200%201%20160%2025.6V110.4A25.6%2025.6%200%200%201%20134.4%20136H126.4V154L104.4%20136H25.6A25.6%2025.6%200%200%201%200%20110.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23r%29%22%20stroke-width%3D%222%22%20clip-path%3D%22url%28%23c%29%22/%3E%3C/svg%3E");--bubble-tail:19px}}
@media(min-width:761px) and (max-height:800px){.question-bubble{--bubble-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20128%20123%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M25.6%200H102.4A25.6%2025.6%200%200%201%20128%2025.6V78.4A25.6%2025.6%200%200%201%20102.4%20104H94.4V122L72.4%20104H25.6A25.6%2025.6%200%200%201%200%2078.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/svg%3E");--bubble-edge:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20128%20123%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.2%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.08%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.12%22/%3E%3C/linearGradient%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M25.6%200H102.4A25.6%2025.6%200%200%201%20128%2025.6V78.4A25.6%2025.6%200%200%201%20102.4%20104H94.4V122L72.4%20104H25.6A25.6%2025.6%200%200%201%200%2078.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d%3D%22M25.6%200H102.4A25.6%2025.6%200%200%201%20128%2025.6V78.4A25.6%2025.6%200%200%201%20102.4%20104H94.4V122L72.4%20104H25.6A25.6%2025.6%200%200%201%200%2078.4V25.6A25.6%2025.6%200%200%201%2025.6%200Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23r%29%22%20stroke-width%3D%222%22%20clip-path%3D%22url%28%23c%29%22/%3E%3C/svg%3E");--bubble-tail:19px}}

/* One full-width journey replaces the two-phase summary and its visual placeholder. */
body[data-piece="innoscribe"] .solution{row-gap:var(--gap-blocks-default)}
.solution>.section-aside{position:static}
.setup-journey{grid-column:1 / -1;margin:0;padding-block:var(--gap-related-compact)}
.setup-steps{display:flex;align-items:center;justify-content:center;gap:var(--gap-items-compact);list-style:none;margin:0;padding:0}
.setup-steps>li{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.setup-steps>li:last-child{flex:0 0 auto}
.setup-tag,.setup-circle{
 display:flex;align-items:center;justify-content:center;flex-shrink:0;
 color:var(--muted);background:var(--surface);
 border:var(--pill-stroke) solid var(--muted);border-radius:var(--pill-radius);
 font:var(--pill-font-weight) var(--pill-font-size)/var(--pill-line-height) var(--mono);
 letter-spacing:var(--pill-tracking);text-transform:uppercase;text-align:center;
}
.setup-tag{width:var(--portfolio-square-size);padding:var(--padding-control) var(--padding-comfortable)}
.setup-circle{padding:var(--padding-container-compact);aspect-ratio:1}
.setup-circle--test{width:calc(var(--size-logo-default) * 2)}
.setup-circle--ready{width:var(--portfolio-square-size)}
.setup-connector{
 display:flex;align-items:center;
 flex:0 0 calc(var(--size-icon-large) + var(--gap-related-compact));
 margin-inline-start:0;
 color:var(--muted);
}
.setup-connector svg{display:block;flex:none;width:calc(var(--size-icon-large) + var(--gap-related-compact));height:var(--size-icon-large);overflow:hidden;fill:none;stroke:currentColor;stroke-width:var(--stroke-icon-small);stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
 .setup-journey{overflow-x:auto;padding-bottom:var(--gap-blocks-compact)}
 .setup-steps{min-width:calc(var(--portfolio-square-size) * 3 + var(--gap-blocks-default) * 5)}
}

/* Match each adjacent content column to its actual section heading, after the eyebrow.
   Full-width content and the overview's existing visual alignment are handled separately. */
@media(min-width:761px){
 body:is([data-piece="innoscribe"],[data-piece="carrefour"],[data-piece="spotify"]) #main .editorial-row:not(.overview) > .section-aside + .section-content { padding-top: var(--case-heading-offset, 0px); }
}