/* Approved five-system composition; scoped to this page's hero only. */
.page-systems .systems-masthead{position:relative;isolation:isolate;background:#071218;color:#f5f6f7}
.page-systems .systems-stage{position:relative;container-type:inline-size;width:100%;min-width:0;max-width:2172px;min-height:460px;aspect-ratio:3;margin-inline:auto}
.page-systems .systems-panorama{position:absolute;top:0;right:0;width:73.757%;display:block;pointer-events:none}
.page-systems .systems-panorama img{width:100%;height:auto}
.page-systems .systems-panorama:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071218,transparent 3%),linear-gradient(0deg,#071218,transparent 9%);pointer-events:none}
.page-systems .systems-foreground{position:absolute;inset:auto 0 0;display:block;pointer-events:none}
.page-systems .systems-foreground img{width:100%;height:auto}
.page-systems .systems-foreground:after{content:'';position:absolute;inset:0;background:linear-gradient(#071218,transparent 60%)}
.page-systems .systems-hero-breadcrumb{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-inline:4.7%;padding-top:20px;font-size:12px;line-height:1.4;color:#aebbc3}
.page-systems .systems-hero-breadcrumb a{display:inline-flex;align-items:center;min-height:28px}
.page-systems .systems-hero-breadcrumb a:hover{color:#fff}
.page-systems .systems-masthead-copy{position:relative;z-index:2;width:23%;margin-left:4.7%;padding-block:clamp(26px,3.5cqw,76px) 32px}
.page-systems .systems-hero-kicker{color:#f12a36;font-size:clamp(10px,.69cqw,15px);font-weight:600;letter-spacing:.34em;line-height:1.5;margin-bottom:clamp(18px,1.6cqw,35px)}
.page-systems .systems-hero-title{font-size:clamp(31px,2.55cqw,55px);line-height:1.08;letter-spacing:-.025em;color:#f5f6f7;font-weight:700}
.page-systems .systems-hero-title>span{display:block}
.page-systems .systems-hero-title>span:last-child{color:#ef2632;font-size:1.12em}
.page-systems .systems-hero-description{font-size:clamp(15px,1.03cqw,22px);line-height:1.5;color:#bac5cc;margin-top:clamp(18px,1.4cqw,30px);max-width:95%}
.page-systems .systems-discover{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(18px,1.5cqw,33px);color:#f1f4f5;font-size:clamp(10px,.64cqw,14px);font-weight:600;letter-spacing:.19em;line-height:1.45}
.page-systems .systems-discover:before{content:'';width:clamp(24px,2.7cqw,58px);height:3px;background:#ef2632;flex:none}
.page-systems .systems-discover svg{width:23px;height:23px;flex:none}
.page-systems .systems-discover:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.page-systems .systems-hero-buildings{position:absolute;inset:0 0 10.5% 26.243%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.page-systems .systems-hero-building{position:relative;min-width:0;display:flex;align-items:flex-end;justify-content:center;color:#f5f6f7;padding-bottom:3%;isolation:isolate}
.page-systems .systems-hero-building:not(:first-child):before{content:'';position:absolute;left:0;top:72%;bottom:-8%;width:1px;background:linear-gradient(#b1c2c58c,#c5bda559,transparent);transform:skewX(-3deg);pointer-events:none}
.page-systems .systems-building-photo{display:none}
.page-systems .systems-building-label{display:flex;flex-direction:column;align-items:center;gap:clamp(9px,.7cqw,15px);text-align:center;padding:10px 8px;max-width:100%}
.page-systems .systems-building-label>svg{width:clamp(34px,2.6cqw,56px);height:clamp(37px,2.8cqw,61px)}
.page-systems .systems-building-label>span{font-size:clamp(14px,.82cqw,18px);font-weight:700;line-height:1.2;letter-spacing:0}
.page-systems .systems-building-label>span>span{display:block}
.page-systems .systems-building-label>i{display:block;width:34px;height:1px;margin-top:4px;background:#bbc5c9}
.page-systems .systems-hero-building:hover .systems-building-label>i{background:#ef2632}
.page-systems .systems-hero-building:focus-visible{outline:2px solid #f5f6f7;outline-offset:-4px}
.page-systems #systems-overview{scroll-margin-top:110px}
@media(max-width:1279.98px){
 .page-systems .systems-stage{min-height:0;aspect-ratio:auto;padding-bottom:32px}
 .page-systems .systems-panorama,.page-systems .systems-foreground{display:none}
 .page-systems .systems-hero-breadcrumb{margin-inline:5%;padding-top:18px}
 .page-systems .systems-masthead-copy{width:90%;margin-inline:auto;padding-block:28px 36px;max-width:760px}
 .page-systems .systems-hero-kicker{font-size:12px;letter-spacing:.26em;margin-bottom:19px}
 .page-systems .systems-hero-title{font-size:clamp(38px,5cqw,56px)}
 .page-systems .systems-hero-description{font-size:18px;max-width:560px;margin-top:22px}
 .page-systems .systems-discover{font-size:12px;gap:14px;margin-top:20px}
 .page-systems .systems-discover:before{width:38px}
 .page-systems .systems-hero-buildings{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;width:90%;margin-inline:auto}
 .page-systems .systems-hero-building{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0;border-bottom:1px solid #596269}
 .page-systems .systems-hero-building:not(:first-child):before{content:none}
 .page-systems .systems-building-photo{position:relative;display:block;aspect-ratio:1/1;overflow:hidden}
 .page-systems .systems-building-photo img{width:auto;max-width:100%;height:100%;margin-inline:auto;object-fit:contain;object-position:center bottom}
 /* Follow the reference's inclined panel edges; exclude neighbouring facades. */
 .page-systems [data-system="prefabrik"] .systems-building-photo img{clip-path:polygon(10% 0,100% 0,94% 100%,0 100%)}
 .page-systems [data-system="bungalov"] .systems-building-photo img{clip-path:polygon(6% 0,100% 0,92% 100%,0 100%)}
 .page-systems [data-system="celik"] .systems-building-photo img{clip-path:polygon(8% 0,100% 0,95% 100%,0 100%)}
 .page-systems [data-system="ahsap"] .systems-building-photo img{clip-path:polygon(8% 0,100% 0,96% 100%,2% 100%)}
 .page-systems [data-system="konteyner"] .systems-building-photo img{clip-path:polygon(4% 0,100% 0,100% 100%,0 100%)}
 .page-systems .systems-building-label{flex-direction:row;justify-content:center;gap:18px;padding:20px 8px 24px;flex:1}
 .page-systems .systems-building-label>svg{width:37px;height:41px;flex:none}
 .page-systems .systems-building-label>span{font-size:16px;line-height:1.3;text-align:left}
 .page-systems .systems-building-label>i{display:none}
}
@media(min-width:768px) and (max-width:1023.98px){
 .page-systems .systems-hero-buildings{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-systems .systems-hero-building:last-child{grid-column:1/-1;max-width:calc((100% - 22px)/2);width:100%;justify-self:center}
}
@media(max-width:767.98px){
 .page-systems .systems-stage{padding-bottom:28px}
 /* One unbroken architectural panorama behind the mobile heading. */
 .page-systems .systems-panorama{display:block;top:82px;right:0;width:100%;z-index:0}
 .page-systems .systems-panorama img{display:block;width:100%;height:auto}
 .page-systems .systems-panorama:after{background:linear-gradient(90deg,#071218a6,#07121840),linear-gradient(0deg,#071218,transparent 32%,transparent 78%,#071218)}
 .page-systems .systems-hero-breadcrumb{font-size:11px;margin-inline:6%;padding-top:12px}
 .page-systems .systems-masthead-copy{width:88%;padding-block:24px 32px}
 .page-systems .systems-hero-kicker{font-size:11px;letter-spacing:.22em;margin-bottom:20px}
 .page-systems .systems-hero-title{font-size:clamp(30px,8.4cqw,48px);line-height:1.08}
 .page-systems .systems-hero-description{font-size:16px;line-height:1.55;max-width:500px;margin-top:22px}
 .page-systems .systems-discover{font-size:11px;letter-spacing:.12em;gap:12px;margin-top:21px}
 .page-systems .systems-discover:before{width:25px}
 .page-systems .systems-hero-buildings{grid-template-columns:repeat(2,minmax(0,1fr));width:88%;max-width:480px;gap:8px 16px}
 .page-systems .systems-hero-building:last-child{grid-column:1/-1;max-width:none}
 .page-systems .systems-building-photo{display:none}
 .page-systems .systems-building-label{justify-content:flex-start;padding:12px 0;gap:10px;min-height:60px}
 .page-systems .systems-building-label>svg{width:26px;height:29px}
 .page-systems .systems-building-label>span{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.page-systems #systems-overview{scroll-behavior:auto}}