/* Scoped opt-in to the approved SEE MO media mats and result text roles.
   STADION's grid, chapter rhythm, interaction controllers and type are intact. */
.case-page[data-case="contractor"] [data-framer-name="Header"] .framer-12xyut7{container-type:inline-size}
.case-page[data-case="contractor"] h1.framer-text{font-family:var(--font-display)!important;font-weight:500!important;font-size:min(125px,21cqw)!important;line-height:.9!important;word-break:normal;overflow-wrap:normal}
.case-page[data-case="contractor"]{--see-mat:#ececec;--see-sheet-height:1000px}
html[toggle-theme="dark"] .case-page[data-case="contractor"]{--see-mat:#242424}
.case-page[data-case="contractor"] .case-reading-content .see-media-mat{box-sizing:border-box;padding:clamp(16px,3.2vw,48px);background:var(--see-mat)}
.case-page[data-case="contractor"] .case-reading-content .see-page-mat>img{width:min(100%,calc(var(--see-sheet-height) * var(--see-sheet-ratio)));height:auto;max-height:none;margin-inline:auto;border-radius:3px;box-shadow:0 8px 28px -12px #0003}
.case-page[data-case="contractor"] [data-case-feature="project"] .see-page-mat>img{width:100%}
.case-page[data-case="contractor"] #interface .case-interface-preview .see-media-mat{padding:0}
.case-page[data-case="contractor"] #interface .case-interface-preview .see-page-mat>img{width:100%;border-radius:0;box-shadow:none}
.case-page[data-case="contractor"] .case-address-story .see-media-mat{padding:0}
.case-page[data-case="contractor"] .case-address-story .see-page-mat>img{width:100%;border-radius:0;box-shadow:none}
.case-page[data-case="contractor"] [data-case-passport] .case-passport-icon{display:block;width:24px;height:24px;flex:none;color:var(--case-ink)}
.case-page[data-case="contractor"] [data-case-passport] .case-passport-icon svg{display:block}
.case-page[data-case="contractor"].case-reading-presentation .case-outcome-composition .case-results strong{font-size:var(--reading-h2);line-height:var(--reading-h2-line);font-weight:500;text-wrap:balance}
.case-page[data-case="contractor"] .case-competitor-logos figure{position:relative}
.case-page[data-case="contractor"] .case-competitor-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.case-page[data-case="contractor"] .case-competitor-link::after{content:"";position:absolute;inset:-8px;border-radius:14px}
.case-page[data-case="contractor"] .case-competitor-link:focus-visible{outline:none}
.case-page[data-case="contractor"] .case-competitor-logos figure:has(a:focus-visible){outline:2px solid var(--color-accent);outline-offset:8px;border-radius:12px}
.case-page[data-case="contractor"] .case-competitor-logos figure:is(:hover,:has(a:focus-visible)) figcaption{color:var(--color-accent)}
.case-page[data-case="contractor"] [data-logo-frame] img{box-sizing:border-box;border:1px solid #d4d4d4}
html[toggle-theme="dark"] .case-page[data-case="contractor"] [data-logo-frame] img{border-color:#555}
/* One owner per interval: M05 already contributes the proof gap. The
   competitor module's default scene gap belongs after preceding evidence. */
.case-page[data-case="contractor"].case-reading-presentation #research>.case-architecture-opening+.case-blocks>.case-competitors:first-child{margin-top:0}
/* Here the first interface feature already owns a complete rail divider;
   do not add another scene gap on its parent, as well as on that feature. */
.case-page[data-case="contractor"].case-reading-presentation #interface>.case-interface-preview+.case-blocks{margin-top:0}
/* A project detail continues the selected-object story. */
.case-page[data-case="contractor"].case-reading-presentation #interface .case-feature[data-case-spacing="connected"]{margin-top:var(--case-sp-related);padding-top:0}
/* 04.11.2026: first screen — the tablet with the homepage and, lower and in front,
   a phone whose screen scrolls through three mobile pages in turn (owner, like STADION). */
.case-page[data-case="contractor"] .hero-scene{margin:0;background:none;border:0;box-shadow:none}
.case-page[data-case="contractor"] .hs-stage{position:relative;aspect-ratio:1920/1120;overflow:hidden;border-radius:var(--case-media-radius,24px);background:#ececec}
html[toggle-theme="dark"] .case-page[data-case="contractor"] .hs-stage{background:#242424}
.case-page[data-case="contractor"] .hs-tablet{position:absolute;left:6%;top:7%;width:70%;height:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.22))}
.case-page[data-case="contractor"] .hs-phone{position:absolute;right:9%;top:23%;width:20%;aspect-ratio:405/866;filter:drop-shadow(0 30px 38px rgba(0,0,0,.34))}
.case-page[data-case="contractor"] .hs-body{display:block;width:100%;height:100%}
.case-page[data-case="contractor"] .hs-screen{position:absolute;left:3.704%;top:1.732%;width:92.593%;height:96.536%;overflow:hidden;border-radius:12.5%/5.62%;background:#fff}
.case-page[data-case="contractor"] .hs-status,.case-page[data-case="contractor"] .hs-header{position:absolute;left:0;width:100%;height:auto;display:block;z-index:2}
.case-page[data-case="contractor"] .hs-status{top:0}
.case-page[data-case="contractor"] .hs-header{top:6.459%}
.case-page[data-case="contractor"] .hs-feed{position:absolute;left:0;top:17.22%;width:100%;height:auto;display:block;opacity:0;animation:hs-cycle calc(var(--n) * 6s) linear infinite;animation-delay:calc((var(--i) - var(--n)) * 6s - .3s)}
.case-page[data-case="contractor"] .hs-feed[style*="--i:0"]{animation-delay:-.3s}
.case-page[data-case="contractor"] .hs-shade{position:absolute;left:0;right:0;bottom:0;height:10.77%;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.27))}
.case-page[data-case="contractor"] .hs-ind{position:absolute;z-index:4;left:32.15%;width:35.7%;bottom:.96%;height:.6%;min-height:3px;border-radius:3px;background:#fff}
@keyframes hs-cycle{
 /* like STADION: smooth, unhurried swipes with short pauses and a soft crossfade */
 0%{opacity:1;transform:translateY(0)}
 3%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 11%{opacity:1;transform:translateY(calc(var(--d) * -0.34%))}
 14%{opacity:1;transform:translateY(calc(var(--d) * -0.34%));animation-timing-function:cubic-bezier(.45,0,.25,1)}
 22%{opacity:1;transform:translateY(calc(var(--d) * -0.68%))}
 25%{opacity:1;transform:translateY(calc(var(--d) * -0.68%));animation-timing-function:cubic-bezier(.45,0,.25,1)}
 31%{opacity:1;transform:translateY(calc(var(--d) * -1%));animation-timing-function:ease-in-out}
 34.5%{opacity:0;transform:translateY(calc(var(--d) * -1%))}
 96%{opacity:0;transform:translateY(0);animation-timing-function:ease-in-out}
 100%{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
 .case-page[data-case="contractor"] .hs-feed{animation:none}
 .case-page[data-case="contractor"] .hs-feed[style*="--i:0"]{opacity:1}
}
@media(max-width:809.98px){
 .case-page[data-case="contractor"] .hs-tablet{left:5%;top:4%;width:70%}
 .case-page[data-case="contractor"] .hs-phone{right:6%;top:17%;width:21%}
}
/* 04.11.2026: phone viewer for the gallery's mobile screens (case-phone-view.js). */
.case-phone-view{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden;display:none}
.case-phone-view[open]{display:grid;place-items:center;grid-template-rows:1fr auto auto;gap:10px;padding:56px 16px 20px;box-sizing:border-box}
.case-phone-view::backdrop{background:rgba(12,12,12,.82);backdrop-filter:blur(6px)}
.case-phone-view .cpv-close{position:fixed;top:16px;right:16px;padding:10px 18px;border:0;border-radius:999px;background:#fff;color:#111;font:500 15px/20px var(--font-body);cursor:pointer}
.case-phone-view .cpv-close:hover{background:#ff6a00;color:#fff}
.case-phone-view .cpv-phone{position:relative;height:min(100%,900px);aspect-ratio:405/866;max-width:calc(100vw - 32px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.case-phone-view .cpv-body{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.case-phone-view .cpv-screen{position:absolute;left:3.704%;top:1.732%;width:92.593%;height:96.536%;overflow:hidden;border-radius:12.5%/5.62%;background:#fff}
.case-phone-view .cpv-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-top:14.4%;box-sizing:border-box;cursor:grab;outline:none}
.case-phone-view .cpv-scroll::-webkit-scrollbar{display:none}
.case-phone-view .cpv-scroll.is-dragging{cursor:grabbing}
.case-phone-view .cpv-page{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.case-phone-view .cpv-status{position:absolute;left:0;top:0;width:100%;height:auto;z-index:2;pointer-events:none}
.case-phone-view .cpv-ind{position:absolute;z-index:3;left:32.15%;width:35.7%;bottom:1%;height:5px;border-radius:3px;background:#111;pointer-events:none}
.case-phone-view .cpv-caption{margin:0;color:#fff;font:500 15px/22px var(--font-body);text-align:center;max-width:560px}
.case-phone-view .cpv-hint{margin:0;color:rgba(255,255,255,.6);font:400 13px/18px var(--font-body)}
/* 04.11.2026: slider dots centred between the phone (29–71 % of the square image) and the mat edge. */
.case-page[data-case="contractor"] .case-gallery-slider .case-slider-dots{right:calc(14.5% - 22px)}
/* 05.11.2026: «Результат» uses the page's own text rhythm — heading → text 12px,
   paragraphs 8px apart (as every other text block of the case). */
.case-page[data-case="contractor"].case-reading-presentation #outcome .case-outcome-composition>.case-chapter-heading{gap:12px}
.case-page[data-case="contractor"].case-reading-presentation #outcome .case-outcome-composition{row-gap:8px}
.case-page[data-case="contractor"].case-reading-presentation #outcome .case-outcome-story .case-copy-body{gap:8px}
/* 05.11.2026: mobile fixes after the case audit. */
@media(max-width:809.98px){
 /* «Наблюдения и проектные выводы» wraps instead of running past its row. */
 .case-page[data-case="contractor"] .case-analysis-trigger .career-company{white-space:normal;text-wrap:balance;min-width:0}
 /* Touch targets at least 44 px; the visible marks keep their size. */
 .case-page[data-case="contractor"] .case-slider-dots button{min-height:44px}
 .case-page[data-case="contractor"] .ref-strip .ref-zoom{width:44px;height:44px;right:10px;bottom:10px;display:grid;place-items:center}
 .case-page[data-case="contractor"] .case-toc a{min-height:44px}
 /* The site map is too wide to read at phone width: show it larger and let it scroll sideways. */
 .case-page[data-case="contractor"] .case-media:has(>a[href$="/sitemap.webp"]){overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 .case-page[data-case="contractor"] .case-media>a[href$="/sitemap.webp"]{width:1000px;max-width:none}
}