/* ========================================================================== SAS STOLARIJA — v6 · main stylesheet Dark cinematic. Two ideas carry the page: 1. the headline is occluded by the real roofline of the photograph 2. the preloader is a roller shutter — his own product — rolling up ========================================================================== */ /* 1. RESET ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--void)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--ground);color:var(--text); font-family:var(--font-body);font-size:var(--t-base); line-height:var(--lh-normal);letter-spacing:var(--tr-normal); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,canvas{display:block;max-width:100%} button,input{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} h1,h2,h3{font-family:var(--font-display);font-weight:var(--w-black);line-height:var(--lh-tight);letter-spacing:var(--tr-display);text-transform:uppercase} p{text-wrap:pretty} /* 2. BROWSER SURFACES ----------------------------------------------------- */ ::selection{background:var(--red);color:#fff} :focus-visible{outline:var(--border-heavy) solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)} :focus:not(:focus-visible){outline:none} html{scrollbar-color:var(--line-2) var(--ground);scrollbar-width:thin} ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:var(--ground)} ::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--ground);border-radius:var(--radius-pill)} ::-webkit-scrollbar-thumb:hover{background:var(--alu)} a{text-underline-offset:.2em;text-decoration-thickness:1px} .skip-link{position:absolute;top:12px;left:12px;z-index:9999;padding:10px 18px;background:var(--red);color:#fff;font-weight:var(--w-semi);font-size:var(--t-sm);transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-out)} .skip-link:focus{transform:translateY(0)} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wrap{width:100%;max-width:var(--measure-max);margin-inline:auto;padding-inline:var(--gutter)} /* Film grain over the whole page: one fixed compositor layer, under every overlay (z 500 < --z-overlay 800). Kills the flat single-colour read of the big graphite fields without touching the palette. */ body::after{content:"";position:fixed;inset:0;z-index:500;pointer-events:none; opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); background-size:260px 260px} /* ========================================================================== 3. PRELOADER — a roller shutter (roletna) rolling up. His own product is the reveal. ~1.3s total, dense rather than long. Content underneath is fully rendered the whole time; if JS never runs the shutter is never inserted and nothing is hidden. ========================================================================== */ /* White slats: the shutter is a RAL 9016 roletna, his best-selling colour, and the red lockup lands best on white. Owner's call, 2026-08-30. */ #shutter{position:fixed;inset:0;z-index:var(--z-slat);pointer-events:none;background:transparent} #shutter .slat{ position:absolute;left:0;width:100%; background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F0 40%,#DEE0DD 86%,#C8CBC8 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(70,76,82,.28); transform-origin:top center; will-change:transform; } #shutter .box{ position:absolute;left:0;right:0;top:0;height:0; background:linear-gradient(180deg,#EDEEEC,#D8DAD7); box-shadow:0 6px 22px rgba(0,0,0,.28); z-index:2; } #shutter .mark{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); z-index:3;text-align:center; } #shutter .mark img{width:clamp(210px,30vw,345px);height:auto;filter:drop-shadow(0 6px 18px rgba(30,35,40,.25))} #shutter .mark .rule{height:3px;background:var(--red);margin:16px auto 0;width:0} body.is-loading{overflow:hidden} /* ========================================================================== 4. HEADER ========================================================================== */ /* -------------------------------------------------------------------------- GLASS One reusable material. A web approximation of the iOS frosted look, not Apple's own material, which exists only on Apple platforms. The ::before carries the specular highlight that makes it read as a lens rather than a tinted box; the ::after is the second inner rim that sells the edge. -------------------------------------------------------------------------- */ .glass{ position:relative;isolation:isolate; background:var(--glass-sheen), var(--glass-tint); border:1px solid var(--glass-border); border-radius:var(--radius-lg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-edge), var(--glass-drop); } /* the specular pool: where the light source lands on the surface */ .glass::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background: radial-gradient(126% 78% at 14% -16%, rgba(255,255,255,.26), transparent 54%), radial-gradient(84% 54% at 98% 112%, rgba(255,255,255,.11), transparent 58%), radial-gradient(60% 40% at 50% 50%, rgba(255,196,120,.045), transparent 70%); } /* The lensing rim. A real edge is brightest where it faces the light and fades round the curve, so this is a gradient border rather than a flat hairline. mask-composite cuts the centre out, leaving only the 1.5px ring. */ .glass::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1.5px; background:linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,.04) 52%, rgba(255,255,255,.16) 82%, rgba(255,255,255,.34) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .glass--flat{box-shadow:var(--glass-edge)} @media (prefers-reduced-transparency:reduce){ .glass{background:rgba(20,23,26,.97);backdrop-filter:none;-webkit-backdrop-filter:none} .glass::before{display:none} } /* -------------------------------------------------------------------------- HEADER — a floating glass bar rather than a gradient scrim -------------------------------------------------------------------------- */ .masthead{position:fixed;top:12px;left:0;right:0;z-index:var(--z-header);height:var(--header-h); pointer-events:none} .masthead-in{pointer-events:auto} .masthead-in{position:relative;height:100%;display:flex;align-items:center;gap:var(--s-6); max-width:calc(var(--measure-max) - var(--gutter));margin-inline:auto; padding-inline:var(--s-5);border-radius:var(--radius-xl)} /* The logo PNG ships in its own red. Both files are pure artwork on a clean alpha channel (0% white pixels), so the shape is used as a mask and filled with the brand token instead. Change --red and the logo follows. */ .brand{display:flex;align-items:center;flex:0 0 auto} /* The mask is embedded as a data URI on purpose. Chrome blocks CSS mask images loaded from file:// (origin "null" fails the CORS check), so a normal url("../../SAS Logo/...") reference leaves the masthead logo blank whenever the page is opened by double-clicking index.html instead of through a server. A data: URI is exempt from that check, so this works both ways. The source of truth is still SAS Logo/Sas Full.png; this is its alpha channel at 420px. Do not "tidy" this back into a file reference. */ .brand .mark{ display:block;width:118px;height:34px;background:var(--red); -webkit-mask:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAD8CAQAAACS7xiQAABKnUlEQVR42u2debwbVb3Av2dmcu/tvkNbEGgLLYXSQtllL5vIJoogm8+HKIqgCAqCIoiAKDxRUXBFBEVBRUABRRFQQFlK2bdCKaWFlu7tve1NZjnvjzkzmUlmkkkyyc29zC+f9yxtMnPO7/z281sggwwyyCCDDDLIIIMMMsgggwwyyCCDDDLIIIMMMsgggwwyyCCDDDLIIIMMMsgggwwyyCCDDJoMIkPBAD9bgQAEDk6GkoyRMqjOMMX/k4CDHHD7FKEd4u+wiAEJSGTr9y76GcF4yAyDh1Y54IgnXsMUdxy3Z40hDGYEYxnOFvyXZ9H6nVYS6iOxa/yljkC2TpyIAYdIF4H9nalEDRrGYBBDGcZwRrIpmzCSUYxnNKMYxRAGMxSAa/k8BlY/2r9Wcuqj2IRNmMCmjGQ0oxjMIHIILNaxnvWsZw2LWcYq3mFV4El6KxjKaFtEasquLyJgMCOZwAQ2YRgdGEoI5NnIatazmmUsY30A9ToCp58wlF6iY6JXPYRhDGcUYxnDOMayKWMYzSiGM4ghDIp8ssTGwmAm1CzV++rkwUbiAIIt2YkZTGcrtmB0zB7DUGAli1jAs8zlOZYq4aGhYTePFtpPI2loAcd4OJOYxjS2Y0vGMZIxFVa8geUsYwEv8SIv8zobfWHR/xztwYxmJKMYywTGsQljGM1YRjCcoXTF/MZRYsPV4PhGsECis5ztWa7+pb1ZyP3zdPZhT3Zga4YHhIKjGKyccqVvv2iBf1vO8/yHf/MEK5XAapL3KNqMhTzTYyQ7cQB7MI3N0COIhQBJeL5T8HsWbzCX//Iw8xTi9bZ1vwWSOWzOUMawGZsyimEMZxxDIu0FqTAgS4IMxbMUATe8+Cudffk3eptqpeLZD2VfDmVvtqdTrdzCUQySjF6LAQfdp4l3+C9/5i7FTkb6ukm0jSzyJM027Msh7MVmPuvYSsoSGWiIQqDwDT+H57iTO5inmEm2nW7SsTmKOyM1jLtaWRKTE4nONEwoFh2cwzVt6SXpSg91sidHcjRT1O4tQKty5lFCKShkJRIHTYmkJdzOn3iEQpvSQoOyyJO7W3M+T7BRMYNFngIWdsTHwcEJ/Tn4cf/epEABWz3rUT7HGHVsWpuZM0N4AYdeCuQpUKCAiYkVs/doXERhoYgLmwKS26Ct9u4GAlw2mcrlvKJO3iSPWWH34XOujAvvXywKFNTzX+ArSkzrA+X6R1OqdxDHcic9aqMFxUBODMqcxB+PoVx2WsK32brNEKgDlyDJJ2KUWnZvl4gVyYt0tJExXzTF9+c3dPvC06xZbCSnCosCFhLJcr6vNF+/ZyZNScfJXMRLPgtZFVFSCxMF0WxhKnm0juuZ7pNw3+MAprK+TP46qX9sJN1MahudpKv//2EeUGcfZqEwg6SJExuTPBLJGr7DxLahhYY00Ux+ytoYLZQmEXnq3UVgD1exqR8l6mtyujOgj5wmfiwkh7UF0bg6YBCf5AllyhVNeKcFnyAtvM2ZGP1TL3kqfTduUZtxZVFrUOgh8C1O73NZpAMnICkkIKHG8VNA8nX6+ubQE14n87wvQFvHQmHR6tHCY8zpf3rJXewUbsBE4jRRD1Vnpn8wq2oksLkkNZTXcZRJk9TjqXffJpI7+9i005VP9JBiIrMPmKg8CCFx+B7D+g8ruRdlI/gGq5HYLVbopaq9gKSHc/tMFunAZQn1UT3BhijTbiFD+yzc4PrE47mxhIn6hpGC7OQGIJ5nb59G+4EuOpH5CpF2n0ujAg6SPzCyD1hJA2aywQ9yN5+RXPExu490kovf41iAxAqcfl+yUTAanEdS4Bz/bNo6QjeFO5VP1JfIKw8/PMvslrOSDtwTECit2HUeyaf6wEty/aLtuMc//XZgolJWMrGR3NzOJp67rNNY4at0py0+RVm0npNaij4d+FDL9XIeyQ19IjLgk6xps9OP852fYOv2ZCUD2Jw/Bgy69kKfZ+Kd1TJZLdAYxWs4mC3dq4nk8ZqTbhpno5G+X2S3LRt5tJBH8iY70GZ1Ea5SP4hFSPJ9FFpIlv1gIvliiySRDnxXEVYrd2ohWcH4FoYbdGBXnvOv2tufkVxWeofd24mVXKftIsyQZdyeCLQwkVzYAlbSgFlsVNkMrTZeJHNaJC6EuifrbtGFc5pRPMnqWvGkN1EaOYzmd3wGsAPv6bvwoqzwbgE4HIzgAbSmllsI4Cam4fTBbbqNznP8B73pec8aEsmFXEcOC6MP7+vck09Gd0Kt3WIIH+ERFianhWaF+gxspvMgR1FAqkoS0afIrIY+gcDkYj6n1ts88XIiB2P1gTvrYn9naHpdlo7DUG7mciycfpUxINT6LQbzZ/bGSUoLWpPYyGIv7mcHChhtw0CiCokJHOBCRlTUXY2tQDKSy5v2/CQYmEUHdlPfr2OzKX/lZPL+Bafo45NP+v5iHZOGQy75urWmINLieP7KBEyl1PsHWHSygKNY27SCbA2HC9kSq48u/TQkU5jU1DPRsXkf97EX+bbtCFKdEnIsYB8egKRGsNYURF7A7xiCpbRR+4IMSCCLDh5mf+YmR17NZGyzE1/A7rO7c4FFJzOayEg6NtP5JzMpBOS56Gds1MGTzOF59OQCNe0jNbD5CldgJbcu+9QF9QrUbTr4E4fyVi3Iq8OwuoIOnD52u3dpGmnr2OzA39la2SK1mVXtIVhtOriXg3iztv4WWspsZPEFvoXZAr+o8TZb3vpsJDmu5yNsQGtacxAdmw/ygT4JM4TPe1aTdK6OzdbczWYU0Ns4uFSZpnLcwNGsrbVNjJYyG53N97BacHuentZwMNA4jzOUD9MsbSQZxLf6vI+RAKYzpAlaUcNmAn/mfQFt1J4nHgc2YPA1PolVu0DVUmWjc7kGqwVySKaEXIGDwUqO5CrV8ax5msDhK8xUYQbRh4wk2Zwpqa9Bw2EM97AtJnoTdigTfKMxG8XGAD7O5fVRgpYiGx3H1YqN+otKtzBYxIHc3YxOZyVkti1faomurh5uMNghZVIXQBe3sSOFprBRchaSDbDRGo7hZoz6+h+mw0g6FrP4OXaTkChj/6seOST9tk855jGHZ5re7U0guYLBfXZ/VAq7prw7DYefM0cFvEUKjFHt7OJbO9fDSiYG85nDnzGw6mPGNKxZ1zq+jWFNMFy8yJrXJFL4iJYB3SdDwYNkT3To4FY+zTr0JrORjs0RHIPVFi02NGC2unxOa38WF3ESBXIpnnv0zBGvHX54IgehRsW1UIPLRh08zPG83YhAFanII52/sT+FFK9fpR8KcAItJKPREC4QFgme6yDQ+RYXNjXA4K1HMIynmITdFoXMEo01zGBJSjvXsfkwf1S+UbPMOrfrrF4x4mkrDIua6Nsix+2cwobG2jkbqcijH6TMRp7OEGp97/ICL7GAZfRgojGEkWzJFmzDtmpoiVlDcy0HA8nZfB+tqQGGor7+EpObFMuqh7FtRrI9S1I5Kw2bqfyiqSm4ToCFljKfV3idd+hmIw45hrAF2zCVbZiAjnu1HtROogqN5fgxZyCbePGRkI3gxCYUbXndUZ/hcg5kXOz7J3EiN/O28nmq9ePx6k1WcAT4/cGby0aCbVjf8pKJSjjIq9orIwWm1OnkcWTTShTd8haJySN8lb0YHbuWUezH5TyuOqkGm13HP9tGcilt0OFQAyayvMYWHtWRZyMpcBdH+la3QMdA9z8GRkDNj+VTPOkjsBoRzWcmrSrb0oHfN5HQ6q0CvZE0Smi8EsV8k7rDukz0KhczK8S8RgktBLXhLK5iWYIGOyYSm9Npg+aQbgv0v6Ssj9zWwjcz2zc+K21U85W+zgm8qHrlxXXAziN5kPEtZaNjkaEVtUM9sOQ5cg0b4jrwgarCq9bVhRsAzOdMhiWiBBHwoCZyOSuQJa2gS6lsPUe3yC5JgMizU2Ujt4bzSdX5UkssKzxfaihfpyemJb3bye4WBtGq1hYCjdG82XBvBjvVvjs2Fg4b2KbByw+BxggWKDM8vfrUouXQyzfVkDGjhpV67bC3DHWKCOOugOQt9qQtysndFkvFBvDp9BSQXEUX9Qxf8Vohz+axEvS5bGQhudJfeasEzXca7s3g7cBNqLRTM5mOblCg6MDVvtBKh5GC63tc3XbVozE8wXoC75aIVY+N5jKJNunKoKPxQIqINJGs5lj/kOqTkgbQxXUlat21hz9LKztpasAMvwVko12qbVayQvmP6YQbLm2IkHRgNr0pitEgO0muZ1CDZpermbbhsRJWyiP5B6Npk5ZbOnB6ymz0GrNTsFld9JyH9EMgeSSrOKrFbmWwBWSj2shE8j/8NqXOQ257j7824CMJdDp4tAnRWgtJgc80JE7DlztDFd6sgHnf1S5sJBBswrKUJKTLRvPYPCVl6+ql03AwMelF8jKzmqLIRWxmoQ58tGFCK3a1+TdwZUqE63qiSxhRNyvpwDlNYSOHtRyaoshzzfgfqJknJpL/a6l5nwCR304tGuW2MN8sVSlhAJ9GkkfyrybF6eLZyJ008aqaNNEo0ZsU2BPBGSkyko3NznUSlIZgIisaNFrjQvMHQ4qpRl677KuQFJCcRxs1ytcQTGGtiv+kwUZL2Cp1ZWsAn0dyC4ObqshFjKC5LCWyLyD5MQCHIFPzSApIPl4nXprT4NKlphOaIPLcMNR1FDiZthoppgM3pmavW2xk76aQugYchtZyRe5WoW5IxRG3sVnORAQwlQ2KldLpA/7DurDuitH1Kesj1w/8bJMiaQJBBzvRVpMmdGAn8lip6CMTyelNC0Q2rxVUpaoiHY0HU9JHJpLzfbd5ATKlNvQmkv/WVTmmAz9PNeztred7TQ9It1UXEQ1Six+Zami90US2F01k0ThCOzklNrJweJmhfk7zgw1HAYPDmVeqSbq16qOpbPD9rPRidY/T2VSzq8n5dFrNhOkwg2NS6Z/poLGUz6daG1MKzap7lbHHJRnKJal1axWcQzdCPe810updIHAYXUfJuUByJoOwUiuXkTjABk4jTzM7M8jm5vnXc9yfpzOVUjiJxgUsbXpFUGv1tcO5TImojKlHCOjcyT2BOpkFVdi4FrCgZq9Bw2FzTkqtDbFXHaZzKc/WUA8k+j+ZwFZ0N3B/VEzVMJHc7yf2DBQ2gmnKEU8j72wdU32TRAeOT204mXs7dWuN4QYduDzVAWleOlCuJrNOtOfR1/bt4xkSKp2qzyCSCGwu6vP2VOl7TlcxtOFmVxKw0fgBr/r6WgKvh+Z6yIbXOrOmPuBuSeD/IpW2TaeNi8Dmy5gwwGihSqSqixcSVNfYVXOYC0huh7bvxlprPOvo1KJ1Dq8zIiCwBDCOpf5dUqPvsJCsZ1INZ2AAn0wlzFTM8i4g+T30f7ukNgtZciDb1dkCXpR4RxbfHmBiRjI4xRaQgq+F2vlLYCVvpSa5NSyGsm0NhpKN4OMph2s0ClzR/32e2hhJAqclOshqiHHQuZfHagoziLbHpMOXmO43AWkszGDwT35X0kdAw2FBAP+NYsQB9kz8HA3JbN6fYncGiY3OH5nX1/0SWstIGg5TOCSViI2G5EcDIfoSws40zgv5MPUTmKDA+WWNOzTg1RR9CQHsDgmJWAOOxUh1tpKOw7UDgwq0mr55BIMbCHyLgD56kQdrvD9qb1dUILks0FO7EeJw0Pk1T5aFgyXwcop+pQZsy9BEbSsFFh0cldLbhdK7Go/w38SsPEAYyQaOJtiarxGT4g7yTRyg0vowg80hfERNmmgsmiXRWMs3I4adSWC+Py4njY6EDhMTXspqwK5MT00feU/5BXJgXIBoib8nmcJuKvTZGBiY/AkGzDWsG2a4JiUSc9C4mIUR/qMElrAutWHRAhuDXRNRgQA+iEhRd0hyvM2fB4Y+qoWR4ACGYKbg4mo8zdOpJgaJPsahw/lsh9mw2SOxMZjLj2LDMCt4J2Uzd7dEz7PQOThAL41Pp3KAP7NqoNglWuIjhgMbbAIvfQQ+kIpT3h7+k4bNdL6cwkBLryv5hViRU2wlGnk/AC5TOv2ZCfSM603NTHUKowbcNXDCTckQI7AZzK4NWf8y8MZHGTj32AL4DoNS8R5sDP7IfbFZZwKYT7pxu6mMr0oHGrBXKMNSNDiw2kHnbR5tdipp+zESbMtWKcx5kxisY96AYSR3oOURWIGZqY2EGdbz1QokKoDXUxUCNqMSDGeWwD6pGtQO8B/WpObv9RNGckeB6HXn2IWP5EXeamrpRGvDDF18OxVicKct/DCQXReNvfmkmVhl4+aAiyrs1snu6r0iNXP6IQZQipiWmPzTGU4lgedSq9bpe+w5fJEZgaSpRvSRzhKurihiJLCQAnpqI8uEYiRZ5TuT2TL0zsa8NImG5KkBZOAnJGgHwQ6pyA8JPM/AyGnQcJjKhX7tUeP3R5eyqqKxI4G3WZki9jRg+yr5Cl6eePl0YNmA0FjJfAbOFUgi1hBIxqY0wFfDvZ0fCJJIIP2iiUb3Y2PwKDckyD5cw+KUww2T2azi2bqMFH5nY/kbbknI8veaRtKAyYyrILVkYgTqdPP6gECgO6nuqIRJqtXuXQQ258eEvcP4c3glVUayGcJ2FZlCQkSWeKMR3FcHSk5DLaYdTEkpPCBYzYoBwEgCyRC+k5Kv4mZBP5yg2DrtALhrXM2syEg2GpNTN8dfZyAlLSc07WByxcNLihAJ9NI7YMIMUxLXZlWS3w6CHr6eyECUPgnK1BKFyg230n8fxxapkr0XxpfvLUaSwCS1/ca3vgZzQLDRZL4UyGZoNNv7al5JXJ31eqpGkQBmkYs13AWwGSNTuEMMP/NdBhQkZaT3NRyp8X67sk7nvJ3MAIHku4wIdC9ohI0MXuQ7CdnIARb7F5lpaCWBZBu2jsWwy0ju6kTDFOD+XuCw6r2mkQQOGmNSI+UNdT9JtAkz6dgcxdEpJKl6+zqfDTUIl+UsS5UILTqYXZGRNg2JMpECI5lseO9pJBjMSLxKpEbRaNZ5FDI1ryCNMMNVKYYZ7uYeOiAwXjj+o5HDYmGqjCSBnSueytgU3yeVcDbrwLzo74w0RM3yTAuRjdrXfe0ffYmpKswgG8SDRjdfVHNYk31MbJ5PWTTAjlSqCxpThxlZ7fuyDoy1sSloJECzZDCdqRFxRx8zYqNsZLNtKkUTnpHTy4XqWY4vdSUOjhJzwf/1TLHZKskqvWFc2zKSNTHFGzAksN50BJ4cSKHvZIwEMIhcalsfQn9ODBHA/zEkhV5BAi9n5BN1hSjSjKE5bMoU5sb6aUNSYwCv5spQovk9xki5lOZFCGB0Cgk1fRlm+BAfxMJIbQ92HWIl7ckKFh3sxNzYyGGONEfkCBw6GM577kLWHeaRlm8ziq5+ikK3aOIKJZXTadorEImCDKUhh/S9xV2pfCmbJkjld/FeYyRSvEUfx7h+ykgaDucwvc5Os5VYKfzpGyqYVSEJzPJXmsZuXWoa/17USDKVLgECgc0INu+XKNSwmaaKJpqt+ap90hRzXnu1KYyN9YDMlPcnga3eixrJVKHRxvWSA+zQLxnJCzM4bbJ2kSrj2oxheiQ9CKDQhLVPZQBVIyVlpJ6UbvHdw9+d/pccomNzOIen0tk7fSZq3FNzEOwa+6QNTaC66eTaRii1hJEksIF8iiSwB52pdpBuTZjBnTQh2mZF6cPsWAG3JnWqk0ypkN83YDVSLz0pOuxTmdne6R6Rq76AHVIOM7QbHewQmwO+KnWSt+hiP95zzU96WJOaOWahc3S/utl2J02c47ORGICMFF9yLoHlTXnnkbyneja4QyrTqmp1Z8aezIim2sci1UHzbm+Gwcg+C0+3gpEshjA9RkwsSl3waUj2ZXJL+klprTi1pD0bFgXkU6NvtNiS45pYsa8hsVM7eh2b4zkSM1XmbD+IKzmXwDtsSLVHt0RgMZRTW2CZaDitSHdNWmr+Bukm7p/NoCbpJB0HjcvZLrG0qySvNCTjuGYgxZdiTgRgRsQpS2AZ75J2pFVDcjrjU+0nXg4GDpO4lc2a7Y8lrZD1WlWIVN5psR1npTL7r5QlDGy24m4u5Gd0JVTplZsjOlzIhAEcZgiHG8rbr0gEG1mYqj8jlDE5ls/XqJNq+66GxUE8wHFc2w6+rQbsksIc7eJMawuL9cwk3WnWbjvlw1mCpAfJ/0GNybaiTLvB9mzAUpPEnQH7sbFw6GFyhHA1gO8iyaf6PhsLm7VMST0Ft3h28CVMJBuQXFIzNTQlojOSJWowfTpoNJHMZRBaauXaOqDzNWwkeSwKSE5pkFV14B6kKrtzBvTHPZNjIjCmAychKaT8PveNdwBGytpCYADD+TUSi4KihsNTFtx16qR7U0SljU0ByU2QAisJhZ5d+DdSyVZX623wW7/Xy0YnKjZyBvzHJo/ksgi57Rp9BZwm4MFEciZuoUa67sr7eUaJVK+u+O2+z/I0gK+nqtw9VvpBQA03wkRDuZgNSPL+YbvPf5WRdU7QEGiM5E0czPcIIxWQ3BMheATQyctILP/s0tSDJsekxkquLhrEN+j1LQnbZ9l/oPdt7FUHDvIRWS/j2JGsdDtjwK+xqYeJdE7iBaTqfFAqY2+p0zbWgSvfI2ZdUTu8ybAYX/F6nFS9JO9jYdPDISkYeEKd8+48iVRaKHh2BSSX962nJIBRLEXWTVLRjOSS+sscqI5Lq4GFXCbq4EQeQyIplAUEvOefVQfyWhdmsNtIJ9lY7Bihk3TgcGRTdLONiUMPxwZEY/1MtClXsjFg0tllb+pjT0kHfouTosPpdcUpIHH4qapPERgVlK9Aw/DRsCln8JRiougjtrEwMZlTM/J03ytsFhuV9weK+/dWMZ0rdk6PEDsCGM5bDQjSakEHB8k3MeqyTTR1tqP4Gu+EdJEdof1WsB19mOOnAx9DYjaBkEwsJCu4mp1COscIfYLsZbAfN7I0wER2xUNazMSagqw6cIySwHaK0t7ExMJSfyp+Curj/asV+rfwt0z1lPS1g8tIN0QKHR34SeqRuyBuLCSPsJ/PGiKRXWL4QvVcFoQsEzvWfH2Krr7zlFzj7p0KMsluiJkKCgmPcAF7MjJmFYOZwSe4nmdUu8hCmR0cF9T4Sw02uEBjGK+pMIOdmtCQqX+aEY5+MlLg6MD+TdOJQdvkZmb7msZAD2XKubmOGjpGYJV7cD3vlDBR/Drzdd0wpnhTrGPzQz5HISa+IhsaO+XNUHXRs4QFvM5rrKWXAhqDmciWTGQr3qfebuMEonGiytMtOriAKzECc7krxSgtruACVcSXhuSSOBg8zFXo2Fgq/VXz8SbQSsr5ve52XvqtUL3tJBKhZoFfrdpUpiNb3bfrrGV7lkQ0uxHoPMGOWE3xMNy3ufs1uZ8/8lcWV/nNMHbkAD7A7mhAoeQiJQ4rDg45juauhNTQFEaazWNNyYCW/v+67KRX+KZFsR2VSPx0B40P8ecEE4g0HGbzKHqEMSipv92yzR7MSxVrN/I/FFK7zPRI2eBQ7ovAk4HFF/kuZhOjXhK3ibMGrOZJHmEub7CU9arYXaeLoUxkC2awE7uwpVqzVWKqiSpCTWMV+/JS4vkfKecuaTjcyweaJJPC2qk0X7fRFlgOGqvZhTeqIM99/sPsEUMw9eldixzX8Tk6qrJx8ps9i69wWeqMZNHBV/h2hLTWcBjHS4xuesa2xA7cK1msZDU9WBh0MoQRjPQFnI2t9JCokVlzPM9edPdNG2QdOEQlCjU7JBz3qf+ZBSQPVYwJenv8dMrZDDY2yxifWjqUt84Pp7rOop/yh5iolg58q0kBh6jwQ4G8iueFPzYm+YB/bNexzzySX6XpKek1SQqN19mfSSoXupmFeaJER4iGO30KTCYzlL9ixOokDRjBbQwhzdkHDjoX8M80DQkEkhynYaR+Dho6P8WKeKoAnudUVeLY/PCWphqThoMqEjetTKtrzIz0d2kym3d4ogI11Ii2Wo/vG7QmX6mccRolbQOTczimgmkqcLiIian2rrMxmMtPUmUjlyAWsyLF9s/CP+EtYwZdOmgs5bKUd5JEqGqBT2kMT9T8NKFUiMX32C2tAhmtRqLQeIC7MVKz9ZPqpbQOxOFnTI5hFB2bvfhCqj6gG+j4MoWUO55LYDVvkuawE9cLtemKLTl30LiWueSafP5RDTHT7kgrkAziJkamo1/ryXC7gI39tBG+hsMYbsSIOAgB6Hw35ZJqG4M/8ECCaGHte5EsonJZYj07cYgfO+aWiH8BG1pTwN0Ukeo9T8dkGj9RA0xb6CO5qNRZiuTgpsbumslKFpMYzr1lDKNjczqnq94MIqX7I0EPx7Oa9Fti6jjsyL5Ku4qGY7LBE+7lNzHrlei8ySbs0XQ/uRXMKTCZyRr+k5anVNsCdAweSDVdqPXlAv9bIkQ0BO9juUopSutTQHIBzUmSDFZL2SnG7qzYHPBiEGAE85uUwtr6umCTXt7f+BlpdUgsicUnWIbeL7uSCTRsrmMX7ADyBJL/Y2zqYYaX+V6TnHMJvBKwC9I0SCeyVSwjSQRr+QQmA2EquQBy3Mq0Rpuw1PNjB503OQ3hx/j7G/IcuriBMX5vIB2bA/ho2Q1542+6qGn+pAQWsRIt5acLLIzIYoqggHiEr2Bg92tW8i7/NSYwudGQg17nEnReIcf+FNQTRD9jJYuJvMpT6H6u201sgZ1a5ppLbn/jwiaEGYqytJfjmOiLgzTvvVby5woCwMHgEcayJ2aKGOsLsOjgbT7M3xu1G7QGkH0Rt9GZ8uycVsghG50OruQWNGzcyUdnsFeq+sgds3xeE80fiYbD6014gwbsiKgoAGx0vsCddGD1Q5vEc1FsOniIvfln426KVvcyHASncBudaebQNhlxrn+XYw3/wwVsVBPDHaZyGXZqQVapBM2PebapfqQGPO8zUpotmmHrKhP1XFyexIN09FNvyUYnx3UcyhtpWA1aQ+RichJ3+FJJ9gNmsulgLvtyk2/UCiTfYXhqHT+9XPN3uDx1/6X8TS+rM0wzcVVgM5Jtq1CHg6CHD/GvfmqVuOL0c+SVXdJnjOSi0uYE7lWs1M5ySfoy6Bbm8Jyfm6FjcxBHp3wr5qBxMSsqTGWtphGS7umNpozitInuA16+y7Uczd/o7FdhBxsNgwfZi5vQ6zyjppgXXdyKxEytfWSzcokl6zgzFGIRaAzimbL+Q41343ksVMPZrJAJbMq7DXV3iu+jcXOiUJQG5LgBqdrE9N0ZJ/uOhYlkNWeiQXulFLjkchmyTa9ovaR5yR2q7YUIxSwvTL3FiYXFPi06JoN5Ibw3to9iFw3JC+QSaUf3/C/AUV0F7T4646TCVHIH20KTGiU3KBkFcDxrW1KrUnseg4VkGZ8M6SIUS01mbcott0wkv24RG2nAn0JYt1Nhpfg+4NHnrwFHsCzQBqv1jGRXEW6uMF3ASWV00FasZAA785zfDKkZZX71pOiYSCQ/ZXPKmyPrwO9T1kc2Ft1s3SJ5Z+A2sQz2l01PJx1RA8EZwBTuQfaJXqrW0MxlojV8g9GQaoFlE0AHhnMNturuk36dbG32sqmY6H7V4imqNfxhKeaqFb2Ly1om8QzgtMAe7NQYKY/k69RSQeru+BzWqsb1dgvZKWrvnm51mWg917NNO+uicmt5bx5UcqlR57O2QnM71NzLZaJ/8WGFPBFhjgznZRVmSIuRTBxeZEjLbvt14IBA8X+jrBRuj/bXGqO67q6n8RvVGqvQJ4wU7JdYUEz0Q6bG0AHtauK5/H6qataXr7OuvqhXamUji7zqIPcQRwYs+CgSvNI3Q9LqXWciOayFUk8DptCteogm6XFhJyREC8lihtd8Q+XufD8eUMGndM18OyEjWb4oXcZ3maZW1s9GxblyaTTns8iXTLXrJrsKI5UrcouCkkAW93J0iLGj1jg90Nk7HX1UQHJ3S40Hd07ES35P2MrMVBmTtt/x1FL9XfPMrOOm0Wsg/GEeVf0WCimG56sxUpEKJC/wJcb3TyYKy6WxXMJChcx8RJP7pJ2Dwsdf/ndFJS55h2vZNbSKuPX9PuRbNG5WWFjkmdViK1wD/hzhJcV/rEBb5AJ58uT9dsl2Sc+eT1HvJA9Xjx3O3SrrxcIMDIVJ23/yDDmPClZyK0fR2UomEk17rpt4MZIjOIX96AQkJiLSfxB1ZUV4aUluB7TVPMTt3MuKwNvjjtnmEO4JJQXVV0savi/v4Duc37Rs77hwg8W3OU9l4YtAq01Cfy72PNAq7shiAxvZyAbWU+Dn3Fz3frzf7ciJHKXMKxu7hAJEJEaF/99RGegi9G2Jg0RTDL+Gx/g99/K2WoPTqowL0dRne+S8PUdwGLsxKIBOUdJ0S9ZAvi4Dea0Ru3mK27mdtxTyZJUWkNDBE+yQ6jxtB40F7EhPi3MOdWxO5kYKqkC+mjttsYFeTNazkrV0s4Y1rGYN61nDejbQw3o20Es+FXHgnUUXe3Esh6nOqNEUUKsIc5CqD7gLi3iYv/KgTwW0jomazUgeM3kb2o7DOYSZbBKQ4k6gh2q0xAkzjwio6gKv8RgP8AgLfM+nOvJ0bM7hCjb6RCfVr4pHK1X3ND1wbA5CdVnz+nDjS1eJhcFp/LbF+sjNXX8/j/j/XaCXXvJ0s5YN9LKW9fSwntWsYBVr6WYtveTpUU2Aq9GGTGGFXkHGcHZjX/ZmBuNKKMDrYBRflVukgrC4kCzhBR7jIZ5gvXqf1heZf6JFx13c3FhmsD+7MYXxDI8014KrK1+fzbu8yTz+wzxeVeQg0HESJx8K1bfNe7qt5Kbwu6a5/60rnSfVDA5Uq/siI3l91lwvYGEf9FYSSMbwCXpYxWrW0c16esiTr5qR7e1flBmDMsJwbVyc4ouYcUxjV/ZmOyYwoq7nmSxnIU/zJM8znzUBz1f2VQqqaKn01ALk3skmTGE6k9mciYxmGMPpVC2FPfJ1Xcke1rCGd1nEQuazgEWsCoUN+gx5bX8ZEWQVGckurV2Pq51kgAI2ZzMmMZFNGM8oBjGYwXQGBBiY9LKRDXSzgqUs5U3e4i0W++zj0pVsrSHXt4wURGep/jAYzBAG0eUPgZKqx0uBbrrpiYi71V8DJZqyb6fPzlBvC0ZpjAIAuuigiy5y/hAbB9OPLEY/pU3q4EQfvlkEDKnqyCgaUXIAdK/JIKwxk9CAFrBV2o4GRFutQ1SI02UgBjwWoqmg3TVsBhlkkEEGGWSQQQYZZJBBBpHuXXXQfFe3NDtKZEjMYECDnaEggwzaSCMJJJPYNNAZW1N31A4OGjk/dcbrwOr+SUP39VgxA9n9fTF/rpjn5j7dKcmxw89nC842l/6f3TsFTVXiS/U3QY1ZvLGyA1PTNZU17uZFGH7Sp9tYzFubho7hX3hKP9nFfa6hWkCGb0GKE05lYMyAi6sOdYmo+yuyQb3DyzlzCw7cAgARKGrQ/DzDIt40ipmBIoAdG0EODRsHG4mBwMJCoGGpzm5C5Y4IDAx0bPLY/js0lTFQfJOhUqWCmRLuqRZPSODlVzoqsdjAxFSXxraiDs1/krcn74JWlFwpC3RyoOqtHIV/918MNGx1pjoaFnkEOXSFOTeTxsWlm9Opq8xPzc+akQRLPx0sNXbMW4WOxT/YkA4j6dj8jNOw0psBnUEG/QQ2sjVvV7/DS84aEqeqtSjKtEkps8oYRg5WnojQt4OyLvoZ6YOMFDGyZs8y+tki5o3E7r/0e6LCuovPkCV/FpFrkWUaJpzIGr8aSVSmfhQt1HaG8TVKsurqZMUnypKViSo0IDHoSZb6lZSRRIUk92gU1DaMMfrp0QPgs/BGBq0Bt2BQT5OR9IRsJGqQNUlkSfmvZcInEimd41fUuJ4TFdYQLRvT9nT7Ko1GJLZDRKz+qnaK1TAua6ScpKApH05W+1p6QQlZ9zEISHlSXu0rEy1go+aSsWzgCWlOs6jVeEtnlLSo+i9NtWSMGlAkG2YlmVCHJH+6TEDGsgnMX8vems1gss+fIGs6r3LpLuvUSK0QV240UabFSCZWSgPFRA0ueL3Plw30AujfHpgs8yf7T9a0CAQD2mPdMlSImAojdWFkwe8M3oMwOJloNRLxJfyW1zD9EuBilxYR6LLtXp8FW4o4qh9CVHMo/CcIv59asWhL4F37SjUdQfjWfLGpk/DLzL3/FeoSzg5clEr1Xe+ddqBbg7cCt9WJe4HsXohKdbFHaGWOutALehbu1Wfxgs99r64mJMnAxZ/EVmv0akS91Xu9IDS1Qi1w9VrUst6vgkWRngz39ul2SRW+WSL8C+XgGYXfqge6UujqPDwP2sZBJ+djQahBCcFr8OClrPRxmvOpxNu9AyW9g8KX8VL1qJPqKljHwOuOUVyv8C/dpbp4FepUDf8bxdQA74wc1YEXda3rXTejcCQC1/7Sb8ojKbCSrBoqgwxaG/GpBu01CkPGxOVaeWmbwXsFsqTVDAas+G+7kJCenUoG/YqFvERod7hdZnlkkEHNoPnsZPiKQLQLhzfzyaIkiSNrpJVBI2zkMJqPMYctyLGSf3MrLw9s5VtplIbef6fVZNDH2uggNcDO+2zgMlV7NMA0UrFhOuQYx2aMppNOOtnISlawlBX+e7W+bjKbQT8CHZt9+BuDyAduBHNofJ+z0fq+aXV6iTkeYwxjZ/ZmJ6YyntEh3VNgBW/xLP/h37ym0JMxUwbJqLSLx5lBIZRCIHHIsTuPtwMrpSMvXNiN7/JaQPVamJhqlpqpbpYlkm7+zqlqEkEWN8wgCX0dEDngM4/khwOFinRA5wT+qVjFIq9GKVplQxddpnLTRt7gKwyH9rBxM2hjMIAv4/ijs8PT1/8zECjI3cIcHlFThAoxY4HD8z4tCuSRSF7mWN+VzCCDeEb6ZmAGffFjInmJLvp51r5bN/tNHDW93E40pL6IhF4kkl8wPDPxMqhCZ2fFMJLDY/1dDOvAGO5EYiomip5SXml+uTuP/DG2ylgpg4qUtheyxFXwfKTr+zft6MC2PIckrzboJGQkJwIZC9k5Y6UMYkHQqWjN87ZdMWzRy8z+7BrowEzeDqjbaHZx43ZWBX3lsdJydsx8pRDpZBD0xeFgTCS95ClQoEAvNpIv9Geq0YAJLPDZKJqF8qr8y/uYFLBiWKmAwzK2DnS9zBgpg1KaO4qFIYrq5ux2YSOjriMWGNzEJHU9Vl4b5F6U6UA3K+klx1CG0wWAFRGsdLN5F2KT5fMGcZJBERw07uJhTuJotkRnDQ/wE17tz1exOvCtGKPOi6RI3uZHHM6WDKOTIYxlG47heiVRzJBGcq9qf8Ug+mY4tGjH+paEqxbvKcx4umcQw9Sf9bbEXGI22k85emFGKkb281zOJpG/HsEXWYEMhMoLSEzOCiBKNPypjkwNQ/VUKP6drlrpN0LWzVpxeNWigXVXX0Fpd1GthufXvr/kv3B7O+T8tRn+KIIk63KxpFWhghZKQo0cT4RYIayNJG+xn2I53W87IlRzEYBteNzXZ26Y4VBaV1mil0ixHF10hUxcrX2qXAJkoJeY5IMYQleICPSGo54itPMOBtMV+O/+mbUvStat0cWgkhMXqq1PC11aHZsTuAUz8tAcDN7mYF4khxVp5Qt0LEZwG4dQQMPgMU7lRQy/a55GJ/h2r/D7CeH3tiEw3MPzyYLzsB3yMR6GlySbY3t2YwZbMYHBGEgKrGYhL/IkT7My9N0kMJSc3w9HBPrleH1vpBoqUgQLiR7oY7O+QlNlTWXUdzKDHdmOLZnAMLrQsOhlBQt4gaeYR7dagVPx/Ab7Ok34XZbAptv/5c4cxI5swQg6kGzgbZ7jXzzC2qpY0Rnm74nAgBTBusiuiALJMB9vmt9tSmKWjVLRGOZ3PyLQ0cl1JeJMQa8aYVO2ZxbbM5kxdKLjUKCbpbzJXP7L/JpPvGFGEmg8ym6RjCSBbg7iyQBbxDHjIG7lSOAHnE8vutquhsMO3K4YSfhs5LZcsvxj1wJTcvAPTqhmXYKT+K//zKBh4AB7czwHMjVWei/lYX7LPfSq9VTHiOQP7EuvPxUpzEj484q8ImkNiYWDoY5OZz0HsSjybe4uNPblOOawTQWdsJC/8hse9n8TjffD+CmSDr+llaOYvMDhvIjOcZzOPpFvWcSd/JxnY5/vnt29GIH2a97pdHJUxIno2Hyfj9KrWNujRRuDx/hQybO35D6GY/utIx1sLGxynMsdEWvyBNA4DuZj7MnYWMxtZC53cCuLE554Sv7RvqpvnB2Z93RcokigBnTxEKeHXEj3T7uHApz1fY4qc0Pdd8zh735/OpOCyk03/Rz1YsD+RT6tknGTwNwG1+swPSKM6+owg1P959sU1C1KcNUFCljqG/eya2xAWAdOjF3DTCb7GZPhdxTx0stPmBCDFQ3YNfbpc8p+pQMfiv3+vLJnT1XZmeWfMyJozsXAtvyQpf7lS14lU4dP3EuhXsllDKFFSQEG8KPInCc3aHBH4oC6AAZRmvntMlKQxK3Ax/sbs+KnF5sjSxCiA6P5hZ+bbpbdexX/ZFGggETyrwTZFgLQeRaHQmityT8mNr1sV0b+Ll4O4rHAqu0KH4sCNpI85xGdUe8ykk2+bAUmvZzPQiT52IxJizw2koXMiTxlDZitvmmHnl/A4YASTAo0JrA4YjXu959WMyCKz96WHpwARRRP+3Nl69GAIVzGOqTKAi2mBETtzFRM+jSzWsFKAujg+ci6EDdwsHOJJ1DtaVrEYewR0nhO1QSj0r8pIPlgCB06MIvnAjmBdiwjFWOPeSQbOK0KYl2BMD8WJ9U/Fg69ZRrJfe4PFCEke7aDrZjp2sjgjQ6cEAoTBbFmxfxLECsWvUh6+WgEVjRgFrbq2Voaxz0wQrTdgqQ3xrJ5iVwJI01nYwlleMGqs0oYSQA7MReJ46evle4kWlBIVrAbdV3xajUy0nSmRraot9F4mLmBUvPqF45xbnG1qTfFWaki0Mi4kkd2IA8wgwJa2fHLQEPi4Ns1DEy6+BkXYFcRDh10NnAfI0JvL/7dGB7gLAqYiaNlbitpSYEzuRA78lciFksCq6oQFOQwyXELR0ZiRcZOrxJlZ3IMJ2CqOb5JfHUtduKILHm25FAeZja9OH40TlSdkSQwKDCGP7EFTu2spNX43b3IYcZs+/Yanydr+pZMRBCUeV02B3IXozB9qSUSThTScTC5gnOqsFKOjkSkIEKEVYm9JIIeXgecmg0NNy56Ke8vW7VogBZECCsat7J7BKvqZcJRBDRQMDwzimsCsdby+VhmQqdfi8TdYlZjBXRy0glSBgUm8ms6mquRJLBTDHoNTP4VCFs3I4YoE/+2aBJIJvM7BgeijOG2xtJX+1HPE2iYXM0HYuS7p5E6atqhiBi0VZ401cunmEtXiYaXfrTK9kcFRMURdS4tG40iS3RENCtL3/yJDyrbDOKXDCV6KGmUyBMlMbjL2BIr5AdV1m3JtbyD4AVOUXHJMBvZAUNPRj7ToMA+nFC7AKuFkRxgK8IT0IS/+EW8RqMZYi5pWxFRQRm7JitAVl6KffCJ32cshTI28u4hdHLkyGGoSRHlZCCAG5jgz6AoZ4yuGNPO20nRjbZLZtrJCoyksYFTWK1uVzxCEBjk6CCn/n90KFrH5gB2izBRnApiRygT3fBx4qiIliwznwpM5ytlz5cJxKGOzcF8VhmScVOHtcgMzqR0qvMAF2D4sz68CR8e5nLkYm+NBJL/rX0+k1GDLJXobELcvO+32JjKeCgjchKTjBkeVn6bn/N3pWPzQY7wjbqwLrLJAYuZz1qGMoVJgB3Rhl/DZALf4hOxQqcLI3LfUZkGTmzyS9Tl9kucza+UNrXVvdNcnuJ1utHYjB3Zh8FKspf6rB0cw2M13IsIdVVt8jSvk2c02zEFYq7edRzO4scsDr1BJHrLUK6t+v2kqT/Ro+EcdK5iH45UadUWOWANT/Icb9DLEKazJzuETlwErhx2ZRILartTqi37ewjDYs2tpUrpN6qRFvN9f/YR6hJzBMeo3PFSqT2f+zHQVCBUUzcvryrW6+LyCOPClVA55nMJ97IagGHsydkcFiJKz1AxsDiFG/hXjPwfFMFIEo0lXB8Ym6jhsA+HKSNRBJ4fRzIWBjdxEKeQRyNHnpv4GXNDx7stV3J0SAAU1753ovOQPuvpCH7J93lOvWEo+3NRzOW7wGI4H+eKELlpatpe0F8JD8PWsLmMaTHsKULZKklZS4sRu59lZyZgopFjIT/gjywKCdyTuIYRSrSJEN4HswsLmpUmJoAJvBso+C0GEwtIftrECHwXS0JhVfdTQPKjCiYEfCwQ0i3NCHxA3XWLgBlxcWQOofumuyKPzL2iLi+CLiC5v+zbp/rPLz7bwqHA9pFPF2gM42kkkn+yi/9OV2vriiXvKwlcu0+VvMumJWEC90K2EJFqbOHQw3EBXaopIfGHmNC+icPT/oAud/W7KYM5+GR3LQf7GnpOIOE5+mrDRPJcyPDTgBnkFQ0Eaa+gSvuMyJM5kDwSh6sZ4+sbD3cCOCSiutsNqV9Rq5LRamKkcKBXhiJqZmoMq4c+BjpDY5VsDp2Okl/ovgw8JXJYs4PO63yEFeT8fDP3rd/gx+SUFA/KVR2Hg9g6JizaFeMb9mKQUwdn0IkRG5RwYvYngfV8nHe5jAN5UqXS2L7H5ZBDcnGkcScZyXiSz6PPczy3qVxol7QEBhs5iSfRI9bnEvf2IQ0kqgRZYBDfQ/N/I2NDRpVC/qJMc0eBjcH9XMq7HMWXWImBpsINLu4gx33cHplKBtNrDZzVFi+XFW5+0tJGMkb6xU3Jjrpck2g4jGf3sh167vDXWIWBGXLkJRpfZqHvpAZ/YTGIQ2LwNThmJ91YKhhSvLOPxp4Te2gOgmfZlYsQKsjujW10ZatE5zneCpG6VHd0OcYljIQ66JzLX8hhhZ5jYahMCRFpeursWZWGiuJWx+Zz7BAy62SFu6ekpp2MNY01rmZ3/kKHut7VArjT0TB4KIYnJjSPkSRQiCEF16JuHkQzsKyARAHsyRisMgvYwWA+d0ZcHTtodHNj6C4k+PzdY943IuLvJfh9zoNSstaQv6t1F4FKQgonM7mytZv1MdgZFEt0YRdbA56NdK4tNB7iqUidJIGdE0ZqXZ23DV+reJFQKUYnYnFW6XkWC0G1Ky3FXR5LZfpHCUeNmlK6aws2dNMT6x6PbfgWqXpgPLk0EsAukf/uAH9jY2TgQCL4K19XI6yCMUgN2C6C+QQwMmYNK8qOQkYSgoyVtm4GswkMZzumMYXxjGIwggJrWMO7vMkSFsVaA7W4y7mYuxMNi/vYOcKsFcA2oVOXMaEDb5T0dYwoCTNIf9B0knON1l1ajIrwTmsLtmFrtmIMQ1UJxXpWsIiFLIgsP3Wjl0YFpdEQI0mgh+VMijmwyXSSTyUAHk8SSRHu/v1WsU96IobIHCQvs5SJgXT9YKhlGOsidjg25i3rYjwFEXnoUaTgYDOcD3Ike7JVLFusYlDMLZes4WwrGU5zI/9dAGPRA7iSFehMcjYHlTTBx9d0MhSCrm6QiiriwhWTM/gIh7Ito2Ke47bP1hsUQTVrJB2bBewW6SJKtmRrXmgaI9VKJA5EeAgewSyuoN/WsoSJkVp3GCPKGEkqRooy7borHo8M6SMtEts5zuQsJbpc30+U7UYwOvayMs6ZFzWSzluRPrAAhjM4YFg6sW/uZjMuKUtakizifSVZc5WyJ0Wg9K/SmjVstuICTlHGrVlyD+lhzqCjzIqSvkhtGiMJ4KWY4zHp4ABeaFJhlEwcwQn+YmTk7zVgfewzBVKZr+XQEXmX5TJS1DqWlz1HqxKrCpPCdvycPYGC0llGzK/Dl4oygfcga5C4EtiIjRZ5mdzhp50G7YYoIfw9hobMOpscN/ImF5cky8YRclTOZbQe1HD4X77DWBwKKsQQnW8ny27g6lYDtebazaU03b+YcvhRahulXmsPABGRdyAqsFeO+EyuenAiYxzuUTHPWBm5LhljUpaSwp48xJ4UsEsangg/X1z6kjVK28hILSIrkGUljIhYwRPuGhEVJtAp8EWODRlREo31fDk2iFQex3QqmvFhY/Gb3MBYCki/QYooC2UUcScizVbRPEZygLms9u/xg0eoY7MX70cmDoNr2DWkBtYmKVyJG613JDC8AouJiGRMFzayoeSJAonG6MjwgR3x/qQZzZJNuY2xFMqackj/hsdQDOZgU55ZXtt5iwprEyqGFa3FethYVb9KdI4ueb6DztdYoWZkRWlkrSa6DBrEx/M1TKwI3LmdMnT/StaOFfw1TzuuTSNpLOWRmGC0g87XE7tpOg6nMx27hv4ttWxOA96MjdptHmuDwwgmQBlZSmCVSicKw9AYjWRG+Eh2DJnLMvY8j83JlxneEqESbNeyjKWsxcYgF3uKThUilwnjn5tFPssN8fckCFqIkktuhxz3cG2FRi16DJYqR24FDqP5Dk6E1+moq/v1LGMpq+hFI0cuhq7sWl0Uo0a2c7iNI2K2bnIoZ3AduapZDjlMTuLHvMOnuFuNzWwkmhf996+W6Q8PaXtwU+SRaDhMY9OAnBIBJ3cJvWWxPMlYxkZIa8Fa1tTl3WnYTOTjOBFspGPzC/7CG6xkIw6DGMXmTOdCxuJEaCVZg2avJFJ3iX3WW5Q3DBFVvECJxhrOJP6Cv15fRcPmZLaIyOSTGLzN9fyTxXQj6WAYoxnPB/gMTqDgQrQiaudK1Lt4i83LrtVcI8fi+7zNHbHNuDylbXIyv8RkAn/hW1yEHdv5JkgWIuKwqgVttUiCOYLz6Y44cIHko2hlQVqXAd0OOlaZtB4acvdlBf0V9CFkzKEJ4AOMLSMGiWAdH+PewN+t5m1e4G+cyDh17yUquuHRZRTu96yYMhEHgyOITg2FZ4jqvBNdSFfs/5PjEt6gk3wsI5kx0bTKIslBcHRIQ3kel8ETfIS3Ar9apgJCny1zCdw8Hb22BOxaU4R01nKdTy7hWhU3jPtbPoaJjOhg6Xa2dLA4m5vR0LCwuYB/sFVCE08kllgOMC/Sn9MweR8nICM6z9iM5+MRfp7boe0hoqqVtg+EWIIEtBQz8WVA6T3SrpHyX+NS7qUj1HZTRw+ZdsneF3UbNwcn4j7LwOFoto9kMw33Rk5WFICihI1scjzKjyJzJSqZ8TLBriRj2NY360QAcxs5lbfoUC3TvJ6tBmNinqw1M9jg8fyPWVyCBhnYSge/5XKGYeEEsm0NdCQOFlvya67BUnfdggL782/2xaqoX5JFbMJk9w6PlOQiFAsaLmYzTHKBY3b7sV3DOJVWFLTLJTqr+bcv0d3saDeWdSThckHvPfMjsBufmipC35kS6bCb3KOEjxNo5CUxQ6lAxS4URNZ1RZvlNhfzGcxQl1m3Q8MmXBUZ+JYYvMtjoV05VdlJIsjzOdU+rIih0opXLfKNoiLuBDCeUf4qZIAWnucFNAqBUkUHVOC9dpZNgZFc+/bSMnUeZCWbC3mS85gSyLZ1W/nN5kqe5CTMANIMCmzOfZwbW7xXyUmunG98A9HFCQ4TuZMpKmlVUy0bO/keH4uslLER3Mm76L5UdfO2TA7i4JiODvNqsLRLAxCDYkPNpV26dRzOYdtYwyy5XLW5nrP9a1+3AafJFO5gUoCRRMjMv59VPk6qhYM8s87gSp4uyWhILiCr7acTI5KKRFmhvYHJML4cQ3OyFW32dQT3xjRvKlbjSNbzID/kAr7IF7mU3/KckgaFslZa7jyKv7B1ZD8DGMGbqjtpsKFSHsnPics7Fwg6eRoHM6IVk4lkOecyUX17CEcyN6byxsKilx38WFInX+dYtmYSp7Eipl2mxS4lTKwTrEeyQ63ATGZAwCB5KAK7BSTfANX4vdjW/oyY4vwCkk+E1lBsxxXV2MzCRHIfR/spTxO4gJUx9UsuBoPd6ry+dk6FFmomkqfoVGvXcUcsF0o6C5pI5oW8Yg3Ynt6IXP8CkjOV7nULOzaotgPBBFWbDczCLbox/MrlsdxfcuLF9y9hME2fjaIh2JzFFVnJjOyL6fit+soLyzYg+WQEW5Qykp2Qkdy/P66EEMKsJFnOv7mDv/GaP27GiZxT+mPwS80GsxzJOrpV68aovmwLGFJyEGFGcmIZSQd+hxOBW4s8Z4R2uAM/i2Ejr7RwNB2hTj4nhRjJiRSA73A/d/AwyxVO7Ii+fwUkD4WCzMUGkU7F6Y17+SdmAJdGDKuLZqRwYZ9HQ2agr51r2nmlp04Jaz7F9qFLixN4OXYUhIXDqei1hOLqGTTmoLOY4/g7XbEdwDR14SpDGkIrKcou/tliENfzi5jiaCfUFyDJ7YdrfGj8nk9yCIUIhe+ubyx7+yvwDliUGCMdLOaiQBMSjXWMYjA6ZqQt7wD30xMR9ynNRSt2uw4H3B/l+Egdm+NHnMxDLEVnIjvzfjqwYowQHYc5PM8TfASrJMopy0IAxSsMwXjG+7GzShejl5Slysoy7IkQJnNcyyMhvGgRHpAAjApl8iL2jYJ3eYWxZevSsNmJx7ibeaxnBNuyF5MhEJ0VJfQluY7zuJRbkkbvjLp0ko3Oo5zI78nFVN+7S4rSLl5IMmhZO3TyG86qEOWqPxX2DB5lE3+VInQAOrafLKLFRv8KnMLygFfoXuxZJb6RCAUzflUluhQOtzolDvs9fIuuCOvdQbInewb+u1DxBAtMYFpNeNT9y0gROr9wTatFBzfwQBmRlTdtlIG1GrzJxSXeddwFq5Y4z59QsYvNX9g7otxCYDGE4/xierei26jIqtMSVxhT//xNG4M7OZZuchUnT0RFbsod+RzXckpsFSwV8hBE1Rjj63yINX4BealU8+Y2xbORwad4MBSl7FKzBctT+d1pGAZ/4+FIiarFxiODBKfxGndH/l6gqd7kbpN76SeyypjTlSVVNU5EuEZECEC9QgDYooN5nB1xf6RH9o0tPvdMVofESPyVcS25BuGI500hoRfWSl7rfBPL95Sc2BZpTSw1D6PT4C7m8AIdFW6oqXJtapHD5PN8vkqsRtT45KAc/A9H8m4Zw4uqz3LTRc/kJozQTdHgsqha+EqwwFcryPskVVWCS9kYc9OiBS4UhG9q67Gh584E+YzCH0FDVblv0cEbfDgykzGe+WwMfslfKuiwpBce1e453+GySHPMm88Xntxnl0wnDO+mqxWM5Ebhn2AffoKOoZInk6PFwUKngyeZw7WR8XzKDCdZB4ItdB7mAJ4mp9IWK11LEvBaciznGH5Uks1QyexwcDC4gHkxhB194y9LPBEHwfOchZ6gnZbbV+FNvhbTWw+6qvaBlYoEq3kDbsysg/kcxsKY4nMZk92us4TzAn5mlEVR+XT1RMLUQeeH/IEOv8+HrFCtZZHjNwHtL8tw1xJGct351XyGD/AoBjlQw8AqH4eDjcSgg8Wcy948qnyVyr+KmyyUzKN7kf24HkkO4aefyBiSsnEwMLiTPSJHWGmRRyOx0Mnxbb4bS5JOzC5KvUkHnV9wBja5Cn1mJRaCDp7hcC7nYXQKZYEYSVdMc5awgeVwkzKA7QpNZgxy3M5+vBKzQ/fXTsQpaZzLighzSUt8rsman7hvP4Xb6EAPJBrJsjx8V4z/ipO5BBstYt+STlo4XV6osPAx3Kfuq53QOKziNJvwSKxnOI9xCZjZrcN8U/X5CX7MGrrpue/Yg9+xUQ3TMkPjtAoUyJP3V/cQxwSMsfBzZqjbsLzvreRV4HgNp8caODrw6YhduDsp72unA3vyQAlGi2/0Rn9dwzBAYxILAgO18vSSJ4+kwBT17NKxLuFOcnszk4f8t4XfVfDHr50Ye2IasHMkU9hIbo3ApQF8W1kJYSaK6mu3PfmIwHbwHimsoc7kLXU9UY47941L+Yxa1ecC38yrgWS9SH5GiwaPhW1/2JnLeVKRavxnAddziKqsrD72WABDeZZu1rKetaxhDWtZxzpWsZGrE2/Vi8vtwNW8VGF1i/kZc0K/KF3NptzDmrLfreVGplUQCzrwP/SwmnWsU/tYzSpWsoYVTI34pbuvj/B3eiJXupSfMMu/bIAtuJnVJd/ZyLNsTrFhWjwjfUCJw3si39bNg3xKVWqJWFE1k3dZwSpWs1L97ypWsIZXmBCBTR34BmtZxmpWs5pVrGIVa1hDD/8KGW3RjOTdZ5UPGnPXOI6v8kLMKb/GZUzAG6sKH+TREoZ2WM5XkzOSSE0vacqo05nGLGawNeMZxRA60LDpYS0rWMArzOM5VeWffPitxkQ6AgOZNeUz6axiVQ19IjQV2eliJrOZxmRGqr4yJmtZzGs8xVOsJjgCORq2ZGdmMpmxCNaxhBd4gAVQxc8Y4vdOdwIl1RoaSyJLTzwjclt2YzqTGYuOJM8yXmcuj7M8gEU3UrUFs5nGSAQbeJtFvMkiv/ROx+ZEfhO6Cigm7hzIgyozcTqHshObMQgHk/Us4Gn+w6v+M+IhxxjVNtpRib7us9ezKuYXIxiqMFA0cjUEPSo7G/9CYQZz6cAuGcpjk+MsfhgxtdhdaSc7sStT2YLh6Nhs4G1e4XHm0hPYjYu7nZnF+xiETTfv8BqvsKJ1hl3pwesliB3GSEYxosRt0xNoolatkYjJdtXGXcbJZK0p2r7SEDWthveHWxaHcyYk+1c5F9HQmYkGzwx2woxIxyrEzJAtOh3J8NqwAWekeujFWeRC5SWbJdEuoUa6134Q9c3RqbTG0s4HQjUwrh4pw2/zLwOy3aljF5LKhd6oqeYe5op3cuUrdfxvBsMItWHIxkvidUJrToKX4H2aDPxvpdB6edsW4Z+r5uNFoDECI2ZYwDriu/C6+TQycFLRuLNL8s8lNXYSMlKXoDImwCwb6i8kU1Wy5aXdtT7fSXEXssa3yQbWFc7iljHPcGpaXfnaZOR/VYsdlv7JwZtGYpBnlrr1Ka/AXV4F48l20yCFpc9I1H0IfQX9Y5XvLRBItkPyktIXk/i8yusUIVbSMXmnHc7QyM4sg1TDTml5sjZf5cP8gUdZzWQ+7Y/KDItAjXd4I2OkDPpe7he9vnZal81gdqOLkzlZ/V1U6aKDxjzWN6ktacZIGcTqHM2X5aKNV6phM5vJasiMgJJuqcHgzZ/aQ5tmjPReNuBkW5p1LuyNhhWRsRBcvc5i7oK+10ftpdAzaD6Ex5GVMlQ7rXIfqNKX20ZwCatDXSMyRsqgZQEA2eaU4Lbd3LnKmkw6uI1f1Np/LjPt3tvhgPTALrnWdK+DnTZiJA2b3RgXGaXzKrAcOvk7p9ZafpcxUgbpQA49ptlXrq3WeTgaBTVJItw30Buc/TtOo6eF87gyRurHIFN/2mIewA61jtfUfIYVbeMrOQie4Q1/NqTjp3F5GXHPcCW/a4q+ziCDAeYbDuc4buAZlgcquLp5kV/yITX5SrTbkjN4r4cv2k+ua35z6E0Yzwi6kPSwjDdVM5c2CTFkjJRB+7O8W39WCl61ExkjZZBBLfQpSoINGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkUCf8P//XNT2b1aI8AAAAAElFTkSuQmCC") center/contain no-repeat; mask:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAD8CAQAAACS7xiQAABKnUlEQVR42u2debwbVb3Av2dmcu/tvkNbEGgLLYXSQtllL5vIJoogm8+HKIqgCAqCIoiAKDxRUXBFBEVBRUABRRFQQFlK2bdCKaWFlu7tve1NZjnvjzkzmUlmkkkyyc29zC+f9yxtMnPO7/z281sggwwyyCCDDDLIIIMMMsgggwwyyCCDDDLIIIMMMsgggwwyyCCDDDLIIIMMMsgggwwyyCCDDJoMIkPBAD9bgQAEDk6GkoyRMqjOMMX/k4CDHHD7FKEd4u+wiAEJSGTr9y76GcF4yAyDh1Y54IgnXsMUdxy3Z40hDGYEYxnOFvyXZ9H6nVYS6iOxa/yljkC2TpyIAYdIF4H9nalEDRrGYBBDGcZwRrIpmzCSUYxnNKMYxRAGMxSAa/k8BlY/2r9Wcuqj2IRNmMCmjGQ0oxjMIHIILNaxnvWsZw2LWcYq3mFV4El6KxjKaFtEasquLyJgMCOZwAQ2YRgdGEoI5NnIatazmmUsY30A9ToCp58wlF6iY6JXPYRhDGcUYxnDOMayKWMYzSiGM4ghDIp8ssTGwmAm1CzV++rkwUbiAIIt2YkZTGcrtmB0zB7DUGAli1jAs8zlOZYq4aGhYTePFtpPI2loAcd4OJOYxjS2Y0vGMZIxFVa8geUsYwEv8SIv8zobfWHR/xztwYxmJKMYywTGsQljGM1YRjCcoXTF/MZRYsPV4PhGsECis5ztWa7+pb1ZyP3zdPZhT3Zga4YHhIKjGKyccqVvv2iBf1vO8/yHf/MEK5XAapL3KNqMhTzTYyQ7cQB7MI3N0COIhQBJeL5T8HsWbzCX//Iw8xTi9bZ1vwWSOWzOUMawGZsyimEMZxxDIu0FqTAgS4IMxbMUATe8+Cudffk3eptqpeLZD2VfDmVvtqdTrdzCUQySjF6LAQfdp4l3+C9/5i7FTkb6ukm0jSzyJM027Msh7MVmPuvYSsoSGWiIQqDwDT+H57iTO5inmEm2nW7SsTmKOyM1jLtaWRKTE4nONEwoFh2cwzVt6SXpSg91sidHcjRT1O4tQKty5lFCKShkJRIHTYmkJdzOn3iEQpvSQoOyyJO7W3M+T7BRMYNFngIWdsTHwcEJ/Tn4cf/epEABWz3rUT7HGHVsWpuZM0N4AYdeCuQpUKCAiYkVs/doXERhoYgLmwKS26Ct9u4GAlw2mcrlvKJO3iSPWWH34XOujAvvXywKFNTzX+ArSkzrA+X6R1OqdxDHcic9aqMFxUBODMqcxB+PoVx2WsK32brNEKgDlyDJJ2KUWnZvl4gVyYt0tJExXzTF9+c3dPvC06xZbCSnCosCFhLJcr6vNF+/ZyZNScfJXMRLPgtZFVFSCxMF0WxhKnm0juuZ7pNw3+MAprK+TP46qX9sJN1MahudpKv//2EeUGcfZqEwg6SJExuTPBLJGr7DxLahhYY00Ux+ytoYLZQmEXnq3UVgD1exqR8l6mtyujOgj5wmfiwkh7UF0bg6YBCf5AllyhVNeKcFnyAtvM2ZGP1TL3kqfTduUZtxZVFrUOgh8C1O73NZpAMnICkkIKHG8VNA8nX6+ubQE14n87wvQFvHQmHR6tHCY8zpf3rJXewUbsBE4jRRD1Vnpn8wq2oksLkkNZTXcZRJk9TjqXffJpI7+9i005VP9JBiIrMPmKg8CCFx+B7D+g8ruRdlI/gGq5HYLVbopaq9gKSHc/tMFunAZQn1UT3BhijTbiFD+yzc4PrE47mxhIn6hpGC7OQGIJ5nb59G+4EuOpH5CpF2n0ujAg6SPzCyD1hJA2aywQ9yN5+RXPExu490kovf41iAxAqcfl+yUTAanEdS4Bz/bNo6QjeFO5VP1JfIKw8/PMvslrOSDtwTECit2HUeyaf6wEty/aLtuMc//XZgolJWMrGR3NzOJp67rNNY4at0py0+RVm0npNaij4d+FDL9XIeyQ19IjLgk6xps9OP852fYOv2ZCUD2Jw/Bgy69kKfZ+Kd1TJZLdAYxWs4mC3dq4nk8ZqTbhpno5G+X2S3LRt5tJBH8iY70GZ1Ea5SP4hFSPJ9FFpIlv1gIvliiySRDnxXEVYrd2ohWcH4FoYbdGBXnvOv2tufkVxWeofd24mVXKftIsyQZdyeCLQwkVzYAlbSgFlsVNkMrTZeJHNaJC6EuifrbtGFc5pRPMnqWvGkN1EaOYzmd3wGsAPv6bvwoqzwbgE4HIzgAbSmllsI4Cam4fTBbbqNznP8B73pec8aEsmFXEcOC6MP7+vck09Gd0Kt3WIIH+ERFianhWaF+gxspvMgR1FAqkoS0afIrIY+gcDkYj6n1ts88XIiB2P1gTvrYn9naHpdlo7DUG7mciycfpUxINT6LQbzZ/bGSUoLWpPYyGIv7mcHChhtw0CiCokJHOBCRlTUXY2tQDKSy5v2/CQYmEUHdlPfr2OzKX/lZPL+Bafo45NP+v5iHZOGQy75urWmINLieP7KBEyl1PsHWHSygKNY27SCbA2HC9kSq48u/TQkU5jU1DPRsXkf97EX+bbtCFKdEnIsYB8egKRGsNYURF7A7xiCpbRR+4IMSCCLDh5mf+YmR17NZGyzE1/A7rO7c4FFJzOayEg6NtP5JzMpBOS56Gds1MGTzOF59OQCNe0jNbD5CldgJbcu+9QF9QrUbTr4E4fyVi3Iq8OwuoIOnD52u3dpGmnr2OzA39la2SK1mVXtIVhtOriXg3iztv4WWspsZPEFvoXZAr+o8TZb3vpsJDmu5yNsQGtacxAdmw/ygT4JM4TPe1aTdK6OzdbczWYU0Ns4uFSZpnLcwNGsrbVNjJYyG53N97BacHuentZwMNA4jzOUD9MsbSQZxLf6vI+RAKYzpAlaUcNmAn/mfQFt1J4nHgc2YPA1PolVu0DVUmWjc7kGqwVySKaEXIGDwUqO5CrV8ax5msDhK8xUYQbRh4wk2Zwpqa9Bw2EM97AtJnoTdigTfKMxG8XGAD7O5fVRgpYiGx3H1YqN+otKtzBYxIHc3YxOZyVkti1faomurh5uMNghZVIXQBe3sSOFprBRchaSDbDRGo7hZoz6+h+mw0g6FrP4OXaTkChj/6seOST9tk855jGHZ5re7U0guYLBfXZ/VAq7prw7DYefM0cFvEUKjFHt7OJbO9fDSiYG85nDnzGw6mPGNKxZ1zq+jWFNMFy8yJrXJFL4iJYB3SdDwYNkT3To4FY+zTr0JrORjs0RHIPVFi02NGC2unxOa38WF3ESBXIpnnv0zBGvHX54IgehRsW1UIPLRh08zPG83YhAFanII52/sT+FFK9fpR8KcAItJKPREC4QFgme6yDQ+RYXNjXA4K1HMIynmITdFoXMEo01zGBJSjvXsfkwf1S+UbPMOrfrrF4x4mkrDIua6Nsix+2cwobG2jkbqcijH6TMRp7OEGp97/ICL7GAZfRgojGEkWzJFmzDtmpoiVlDcy0HA8nZfB+tqQGGor7+EpObFMuqh7FtRrI9S1I5Kw2bqfyiqSm4ToCFljKfV3idd+hmIw45hrAF2zCVbZiAjnu1HtROogqN5fgxZyCbePGRkI3gxCYUbXndUZ/hcg5kXOz7J3EiN/O28nmq9ePx6k1WcAT4/cGby0aCbVjf8pKJSjjIq9orIwWm1OnkcWTTShTd8haJySN8lb0YHbuWUezH5TyuOqkGm13HP9tGcilt0OFQAyayvMYWHtWRZyMpcBdH+la3QMdA9z8GRkDNj+VTPOkjsBoRzWcmrSrb0oHfN5HQ6q0CvZE0Smi8EsV8k7rDukz0KhczK8S8RgktBLXhLK5iWYIGOyYSm9Npg+aQbgv0v6Ssj9zWwjcz2zc+K21U85W+zgm8qHrlxXXAziN5kPEtZaNjkaEVtUM9sOQ5cg0b4jrwgarCq9bVhRsAzOdMhiWiBBHwoCZyOSuQJa2gS6lsPUe3yC5JgMizU2Ujt4bzSdX5UkssKzxfaihfpyemJb3bye4WBtGq1hYCjdG82XBvBjvVvjs2Fg4b2KbByw+BxggWKDM8vfrUouXQyzfVkDGjhpV67bC3DHWKCOOugOQt9qQtysndFkvFBvDp9BSQXEUX9Qxf8Vohz+axEvS5bGQhudJfeasEzXca7s3g7cBNqLRTM5mOblCg6MDVvtBKh5GC63tc3XbVozE8wXoC75aIVY+N5jKJNunKoKPxQIqINJGs5lj/kOqTkgbQxXUlat21hz9LKztpasAMvwVko12qbVayQvmP6YQbLm2IkHRgNr0pitEgO0muZ1CDZpermbbhsRJWyiP5B6Npk5ZbOnB6ymz0GrNTsFld9JyH9EMgeSSrOKrFbmWwBWSj2shE8j/8NqXOQ257j7824CMJdDp4tAnRWgtJgc80JE7DlztDFd6sgHnf1S5sJBBswrKUJKTLRvPYPCVl6+ql03AwMelF8jKzmqLIRWxmoQ58tGFCK3a1+TdwZUqE63qiSxhRNyvpwDlNYSOHtRyaoshzzfgfqJknJpL/a6l5nwCR304tGuW2MN8sVSlhAJ9GkkfyrybF6eLZyJ008aqaNNEo0ZsU2BPBGSkyko3NznUSlIZgIisaNFrjQvMHQ4qpRl677KuQFJCcRxs1ytcQTGGtiv+kwUZL2Cp1ZWsAn0dyC4ObqshFjKC5LCWyLyD5MQCHIFPzSApIPl4nXprT4NKlphOaIPLcMNR1FDiZthoppgM3pmavW2xk76aQugYchtZyRe5WoW5IxRG3sVnORAQwlQ2KldLpA/7DurDuitH1Kesj1w/8bJMiaQJBBzvRVpMmdGAn8lip6CMTyelNC0Q2rxVUpaoiHY0HU9JHJpLzfbd5ATKlNvQmkv/WVTmmAz9PNeztred7TQ9It1UXEQ1Six+Zami90US2F01k0ThCOzklNrJweJmhfk7zgw1HAYPDmVeqSbq16qOpbPD9rPRidY/T2VSzq8n5dFrNhOkwg2NS6Z/poLGUz6daG1MKzap7lbHHJRnKJal1axWcQzdCPe810updIHAYXUfJuUByJoOwUiuXkTjABk4jTzM7M8jm5vnXc9yfpzOVUjiJxgUsbXpFUGv1tcO5TImojKlHCOjcyT2BOpkFVdi4FrCgZq9Bw2FzTkqtDbFXHaZzKc/WUA8k+j+ZwFZ0N3B/VEzVMJHc7yf2DBQ2gmnKEU8j72wdU32TRAeOT204mXs7dWuN4QYduDzVAWleOlCuJrNOtOfR1/bt4xkSKp2qzyCSCGwu6vP2VOl7TlcxtOFmVxKw0fgBr/r6WgKvh+Z6yIbXOrOmPuBuSeD/IpW2TaeNi8Dmy5gwwGihSqSqixcSVNfYVXOYC0huh7bvxlprPOvo1KJ1Dq8zIiCwBDCOpf5dUqPvsJCsZ1INZ2AAn0wlzFTM8i4g+T30f7ukNgtZciDb1dkCXpR4RxbfHmBiRjI4xRaQgq+F2vlLYCVvpSa5NSyGsm0NhpKN4OMph2s0ClzR/32e2hhJAqclOshqiHHQuZfHagoziLbHpMOXmO43AWkszGDwT35X0kdAw2FBAP+NYsQB9kz8HA3JbN6fYncGiY3OH5nX1/0SWstIGg5TOCSViI2G5EcDIfoSws40zgv5MPUTmKDA+WWNOzTg1RR9CQHsDgmJWAOOxUh1tpKOw7UDgwq0mr55BIMbCHyLgD56kQdrvD9qb1dUILks0FO7EeJw0Pk1T5aFgyXwcop+pQZsy9BEbSsFFh0cldLbhdK7Go/w38SsPEAYyQaOJtiarxGT4g7yTRyg0vowg80hfERNmmgsmiXRWMs3I4adSWC+Py4njY6EDhMTXspqwK5MT00feU/5BXJgXIBoib8nmcJuKvTZGBiY/AkGzDWsG2a4JiUSc9C4mIUR/qMElrAutWHRAhuDXRNRgQA+iEhRd0hyvM2fB4Y+qoWR4ACGYKbg4mo8zdOpJgaJPsahw/lsh9mw2SOxMZjLj2LDMCt4J2Uzd7dEz7PQOThAL41Pp3KAP7NqoNglWuIjhgMbbAIvfQQ+kIpT3h7+k4bNdL6cwkBLryv5hViRU2wlGnk/AC5TOv2ZCfSM603NTHUKowbcNXDCTckQI7AZzK4NWf8y8MZHGTj32AL4DoNS8R5sDP7IfbFZZwKYT7pxu6mMr0oHGrBXKMNSNDiw2kHnbR5tdipp+zESbMtWKcx5kxisY96AYSR3oOURWIGZqY2EGdbz1QokKoDXUxUCNqMSDGeWwD6pGtQO8B/WpObv9RNGckeB6HXn2IWP5EXeamrpRGvDDF18OxVicKct/DCQXReNvfmkmVhl4+aAiyrs1snu6r0iNXP6IQZQipiWmPzTGU4lgedSq9bpe+w5fJEZgaSpRvSRzhKurihiJLCQAnpqI8uEYiRZ5TuT2TL0zsa8NImG5KkBZOAnJGgHwQ6pyA8JPM/AyGnQcJjKhX7tUeP3R5eyqqKxI4G3WZki9jRg+yr5Cl6eePl0YNmA0FjJfAbOFUgi1hBIxqY0wFfDvZ0fCJJIIP2iiUb3Y2PwKDckyD5cw+KUww2T2azi2bqMFH5nY/kbbknI8veaRtKAyYyrILVkYgTqdPP6gECgO6nuqIRJqtXuXQQ258eEvcP4c3glVUayGcJ2FZlCQkSWeKMR3FcHSk5DLaYdTEkpPCBYzYoBwEgCyRC+k5Kv4mZBP5yg2DrtALhrXM2syEg2GpNTN8dfZyAlLSc07WByxcNLihAJ9NI7YMIMUxLXZlWS3w6CHr6eyECUPgnK1BKFyg230n8fxxapkr0XxpfvLUaSwCS1/ca3vgZzQLDRZL4UyGZoNNv7al5JXJ31eqpGkQBmkYs13AWwGSNTuEMMP/NdBhQkZaT3NRyp8X67sk7nvJ3MAIHku4wIdC9ohI0MXuQ7CdnIARb7F5lpaCWBZBu2jsWwy0ju6kTDFOD+XuCw6r2mkQQOGmNSI+UNdT9JtAkz6dgcxdEpJKl6+zqfDTUIl+UsS5UILTqYXZGRNg2JMpECI5lseO9pJBjMSLxKpEbRaNZ5FDI1ryCNMMNVKYYZ7uYeOiAwXjj+o5HDYmGqjCSBnSueytgU3yeVcDbrwLzo74w0RM3yTAuRjdrXfe0ffYmpKswgG8SDRjdfVHNYk31MbJ5PWTTAjlSqCxpThxlZ7fuyDoy1sSloJECzZDCdqRFxRx8zYqNsZLNtKkUTnpHTy4XqWY4vdSUOjhJzwf/1TLHZKskqvWFc2zKSNTHFGzAksN50BJ4cSKHvZIwEMIhcalsfQn9ODBHA/zEkhV5BAi9n5BN1hSjSjKE5bMoU5sb6aUNSYwCv5spQovk9xki5lOZFCGB0Cgk1fRlm+BAfxMJIbQ92HWIl7ckKFh3sxNzYyGGONEfkCBw6GM577kLWHeaRlm8ziq5+ikK3aOIKJZXTadorEImCDKUhh/S9xV2pfCmbJkjld/FeYyRSvEUfx7h+ykgaDucwvc5Os5VYKfzpGyqYVSEJzPJXmsZuXWoa/17USDKVLgECgc0INu+XKNSwmaaKJpqt+ap90hRzXnu1KYyN9YDMlPcnga3eixrJVKHRxvWSA+zQLxnJCzM4bbJ2kSrj2oxheiQ9CKDQhLVPZQBVIyVlpJ6UbvHdw9+d/pccomNzOIen0tk7fSZq3FNzEOwa+6QNTaC66eTaRii1hJEksIF8iiSwB52pdpBuTZjBnTQh2mZF6cPsWAG3JnWqk0ypkN83YDVSLz0pOuxTmdne6R6Rq76AHVIOM7QbHewQmwO+KnWSt+hiP95zzU96WJOaOWahc3S/utl2J02c47ORGICMFF9yLoHlTXnnkbyneja4QyrTqmp1Z8aezIim2sci1UHzbm+Gwcg+C0+3gpEshjA9RkwsSl3waUj2ZXJL+klprTi1pD0bFgXkU6NvtNiS45pYsa8hsVM7eh2b4zkSM1XmbD+IKzmXwDtsSLVHt0RgMZRTW2CZaDitSHdNWmr+Bukm7p/NoCbpJB0HjcvZLrG0qySvNCTjuGYgxZdiTgRgRsQpS2AZ75J2pFVDcjrjU+0nXg4GDpO4lc2a7Y8lrZD1WlWIVN5psR1npTL7r5QlDGy24m4u5Gd0JVTplZsjOlzIhAEcZgiHG8rbr0gEG1mYqj8jlDE5ls/XqJNq+66GxUE8wHFc2w6+rQbsksIc7eJMawuL9cwk3WnWbjvlw1mCpAfJ/0GNybaiTLvB9mzAUpPEnQH7sbFw6GFyhHA1gO8iyaf6PhsLm7VMST0Ft3h28CVMJBuQXFIzNTQlojOSJWowfTpoNJHMZRBaauXaOqDzNWwkeSwKSE5pkFV14B6kKrtzBvTHPZNjIjCmAychKaT8PveNdwBGytpCYADD+TUSi4KihsNTFtx16qR7U0SljU0ByU2QAisJhZ5d+DdSyVZX623wW7/Xy0YnKjZyBvzHJo/ksgi57Rp9BZwm4MFEciZuoUa67sr7eUaJVK+u+O2+z/I0gK+nqtw9VvpBQA03wkRDuZgNSPL+YbvPf5WRdU7QEGiM5E0czPcIIxWQ3BMheATQyctILP/s0tSDJsekxkquLhrEN+j1LQnbZ9l/oPdt7FUHDvIRWS/j2JGsdDtjwK+xqYeJdE7iBaTqfFAqY2+p0zbWgSvfI2ZdUTu8ybAYX/F6nFS9JO9jYdPDISkYeEKd8+48iVRaKHh2BSSX962nJIBRLEXWTVLRjOSS+sscqI5Lq4GFXCbq4EQeQyIplAUEvOefVQfyWhdmsNtIJ9lY7Bihk3TgcGRTdLONiUMPxwZEY/1MtClXsjFg0tllb+pjT0kHfouTosPpdcUpIHH4qapPERgVlK9Aw/DRsCln8JRiougjtrEwMZlTM/J03ytsFhuV9weK+/dWMZ0rdk6PEDsCGM5bDQjSakEHB8k3MeqyTTR1tqP4Gu+EdJEdof1WsB19mOOnAx9DYjaBkEwsJCu4mp1COscIfYLsZbAfN7I0wER2xUNazMSagqw6cIySwHaK0t7ExMJSfyp+Curj/asV+rfwt0z1lPS1g8tIN0QKHR34SeqRuyBuLCSPsJ/PGiKRXWL4QvVcFoQsEzvWfH2Krr7zlFzj7p0KMsluiJkKCgmPcAF7MjJmFYOZwSe4nmdUu8hCmR0cF9T4Sw02uEBjGK+pMIOdmtCQqX+aEY5+MlLg6MD+TdOJQdvkZmb7msZAD2XKubmOGjpGYJV7cD3vlDBR/Drzdd0wpnhTrGPzQz5HISa+IhsaO+XNUHXRs4QFvM5rrKWXAhqDmciWTGQr3qfebuMEonGiytMtOriAKzECc7krxSgtruACVcSXhuSSOBg8zFXo2Fgq/VXz8SbQSsr5ve52XvqtUL3tJBKhZoFfrdpUpiNb3bfrrGV7lkQ0uxHoPMGOWE3xMNy3ufs1uZ8/8lcWV/nNMHbkAD7A7mhAoeQiJQ4rDg45juauhNTQFEaazWNNyYCW/v+67KRX+KZFsR2VSPx0B40P8ecEE4g0HGbzKHqEMSipv92yzR7MSxVrN/I/FFK7zPRI2eBQ7ovAk4HFF/kuZhOjXhK3ibMGrOZJHmEub7CU9arYXaeLoUxkC2awE7uwpVqzVWKqiSpCTWMV+/JS4vkfKecuaTjcyweaJJPC2qk0X7fRFlgOGqvZhTeqIM99/sPsEUMw9eldixzX8Tk6qrJx8ps9i69wWeqMZNHBV/h2hLTWcBjHS4xuesa2xA7cK1msZDU9WBh0MoQRjPQFnI2t9JCokVlzPM9edPdNG2QdOEQlCjU7JBz3qf+ZBSQPVYwJenv8dMrZDDY2yxifWjqUt84Pp7rOop/yh5iolg58q0kBh6jwQ4G8iueFPzYm+YB/bNexzzySX6XpKek1SQqN19mfSSoXupmFeaJER4iGO30KTCYzlL9ixOokDRjBbQwhzdkHDjoX8M80DQkEkhynYaR+Dho6P8WKeKoAnudUVeLY/PCWphqThoMqEjetTKtrzIz0d2kym3d4ogI11Ii2Wo/vG7QmX6mccRolbQOTczimgmkqcLiIian2rrMxmMtPUmUjlyAWsyLF9s/CP+EtYwZdOmgs5bKUd5JEqGqBT2kMT9T8NKFUiMX32C2tAhmtRqLQeIC7MVKz9ZPqpbQOxOFnTI5hFB2bvfhCqj6gG+j4MoWUO55LYDVvkuawE9cLtemKLTl30LiWueSafP5RDTHT7kgrkAziJkamo1/ryXC7gI39tBG+hsMYbsSIOAgB6Hw35ZJqG4M/8ECCaGHte5EsonJZYj07cYgfO+aWiH8BG1pTwN0Ukeo9T8dkGj9RA0xb6CO5qNRZiuTgpsbumslKFpMYzr1lDKNjczqnq94MIqX7I0EPx7Oa9Fti6jjsyL5Ku4qGY7LBE+7lNzHrlei8ySbs0XQ/uRXMKTCZyRr+k5anVNsCdAweSDVdqPXlAv9bIkQ0BO9juUopSutTQHIBzUmSDFZL2SnG7qzYHPBiEGAE85uUwtr6umCTXt7f+BlpdUgsicUnWIbeL7uSCTRsrmMX7ADyBJL/Y2zqYYaX+V6TnHMJvBKwC9I0SCeyVSwjSQRr+QQmA2EquQBy3Mq0Rpuw1PNjB503OQ3hx/j7G/IcuriBMX5vIB2bA/ho2Q1542+6qGn+pAQWsRIt5acLLIzIYoqggHiEr2Bg92tW8i7/NSYwudGQg17nEnReIcf+FNQTRD9jJYuJvMpT6H6u201sgZ1a5ppLbn/jwiaEGYqytJfjmOiLgzTvvVby5woCwMHgEcayJ2aKGOsLsOjgbT7M3xu1G7QGkH0Rt9GZ8uycVsghG50OruQWNGzcyUdnsFeq+sgds3xeE80fiYbD6014gwbsiKgoAGx0vsCddGD1Q5vEc1FsOniIvfln426KVvcyHASncBudaebQNhlxrn+XYw3/wwVsVBPDHaZyGXZqQVapBM2PebapfqQGPO8zUpotmmHrKhP1XFyexIN09FNvyUYnx3UcyhtpWA1aQ+RichJ3+FJJ9gNmsulgLvtyk2/UCiTfYXhqHT+9XPN3uDx1/6X8TS+rM0wzcVVgM5Jtq1CHg6CHD/GvfmqVuOL0c+SVXdJnjOSi0uYE7lWs1M5ySfoy6Bbm8Jyfm6FjcxBHp3wr5qBxMSsqTGWtphGS7umNpozitInuA16+y7Uczd/o7FdhBxsNgwfZi5vQ6zyjppgXXdyKxEytfWSzcokl6zgzFGIRaAzimbL+Q41343ksVMPZrJAJbMq7DXV3iu+jcXOiUJQG5LgBqdrE9N0ZJ/uOhYlkNWeiQXulFLjkchmyTa9ovaR5yR2q7YUIxSwvTL3FiYXFPi06JoN5Ibw3to9iFw3JC+QSaUf3/C/AUV0F7T4646TCVHIH20KTGiU3KBkFcDxrW1KrUnseg4VkGZ8M6SIUS01mbcott0wkv24RG2nAn0JYt1Nhpfg+4NHnrwFHsCzQBqv1jGRXEW6uMF3ASWV00FasZAA785zfDKkZZX71pOiYSCQ/ZXPKmyPrwO9T1kc2Ft1s3SJ5Z+A2sQz2l01PJx1RA8EZwBTuQfaJXqrW0MxlojV8g9GQaoFlE0AHhnMNturuk36dbG32sqmY6H7V4imqNfxhKeaqFb2Ly1om8QzgtMAe7NQYKY/k69RSQeru+BzWqsb1dgvZKWrvnm51mWg917NNO+uicmt5bx5UcqlR57O2QnM71NzLZaJ/8WGFPBFhjgznZRVmSIuRTBxeZEjLbvt14IBA8X+jrBRuj/bXGqO67q6n8RvVGqvQJ4wU7JdYUEz0Q6bG0AHtauK5/H6qataXr7OuvqhXamUji7zqIPcQRwYs+CgSvNI3Q9LqXWciOayFUk8DptCteogm6XFhJyREC8lihtd8Q+XufD8eUMGndM18OyEjWb4oXcZ3maZW1s9GxblyaTTns8iXTLXrJrsKI5UrcouCkkAW93J0iLGj1jg90Nk7HX1UQHJ3S40Hd07ES35P2MrMVBmTtt/x1FL9XfPMrOOm0Wsg/GEeVf0WCimG56sxUpEKJC/wJcb3TyYKy6WxXMJChcx8RJP7pJ2Dwsdf/ndFJS55h2vZNbSKuPX9PuRbNG5WWFjkmdViK1wD/hzhJcV/rEBb5AJ58uT9dsl2Sc+eT1HvJA9Xjx3O3SrrxcIMDIVJ23/yDDmPClZyK0fR2UomEk17rpt4MZIjOIX96AQkJiLSfxB1ZUV4aUluB7TVPMTt3MuKwNvjjtnmEO4JJQXVV0savi/v4Duc37Rs77hwg8W3OU9l4YtAq01Cfy72PNAq7shiAxvZyAbWU+Dn3Fz3frzf7ciJHKXMKxu7hAJEJEaF/99RGegi9G2Jg0RTDL+Gx/g99/K2WoPTqowL0dRne+S8PUdwGLsxKIBOUdJ0S9ZAvi4Dea0Ru3mK27mdtxTyZJUWkNDBE+yQ6jxtB40F7EhPi3MOdWxO5kYKqkC+mjttsYFeTNazkrV0s4Y1rGYN61nDejbQw3o20Es+FXHgnUUXe3Esh6nOqNEUUKsIc5CqD7gLi3iYv/KgTwW0jomazUgeM3kb2o7DOYSZbBKQ4k6gh2q0xAkzjwio6gKv8RgP8AgLfM+nOvJ0bM7hCjb6RCfVr4pHK1X3ND1wbA5CdVnz+nDjS1eJhcFp/LbF+sjNXX8/j/j/XaCXXvJ0s5YN9LKW9fSwntWsYBVr6WYtveTpUU2Aq9GGTGGFXkHGcHZjX/ZmBuNKKMDrYBRflVukgrC4kCzhBR7jIZ5gvXqf1heZf6JFx13c3FhmsD+7MYXxDI8014KrK1+fzbu8yTz+wzxeVeQg0HESJx8K1bfNe7qt5Kbwu6a5/60rnSfVDA5Uq/siI3l91lwvYGEf9FYSSMbwCXpYxWrW0c16esiTr5qR7e1flBmDMsJwbVyc4ouYcUxjV/ZmOyYwoq7nmSxnIU/zJM8znzUBz1f2VQqqaKn01ALk3skmTGE6k9mciYxmGMPpVC2FPfJ1Xcke1rCGd1nEQuazgEWsCoUN+gx5bX8ZEWQVGckurV2Pq51kgAI2ZzMmMZFNGM8oBjGYwXQGBBiY9LKRDXSzgqUs5U3e4i0W++zj0pVsrSHXt4wURGep/jAYzBAG0eUPgZKqx0uBbrrpiYi71V8DJZqyb6fPzlBvC0ZpjAIAuuigiy5y/hAbB9OPLEY/pU3q4EQfvlkEDKnqyCgaUXIAdK/JIKwxk9CAFrBV2o4GRFutQ1SI02UgBjwWoqmg3TVsBhlkkEEGGWSQQQYZZJBBBpHuXXXQfFe3NDtKZEjMYECDnaEggwzaSCMJJJPYNNAZW1N31A4OGjk/dcbrwOr+SUP39VgxA9n9fTF/rpjn5j7dKcmxw89nC842l/6f3TsFTVXiS/U3QY1ZvLGyA1PTNZU17uZFGH7Sp9tYzFubho7hX3hKP9nFfa6hWkCGb0GKE05lYMyAi6sOdYmo+yuyQb3DyzlzCw7cAgARKGrQ/DzDIt40ipmBIoAdG0EODRsHG4mBwMJCoGGpzm5C5Y4IDAx0bPLY/js0lTFQfJOhUqWCmRLuqRZPSODlVzoqsdjAxFSXxraiDs1/krcn74JWlFwpC3RyoOqtHIV/918MNGx1pjoaFnkEOXSFOTeTxsWlm9Opq8xPzc+akQRLPx0sNXbMW4WOxT/YkA4j6dj8jNOw0psBnUEG/QQ2sjVvV7/DS84aEqeqtSjKtEkps8oYRg5WnojQt4OyLvoZ6YOMFDGyZs8y+tki5o3E7r/0e6LCuovPkCV/FpFrkWUaJpzIGr8aSVSmfhQt1HaG8TVKsurqZMUnypKViSo0IDHoSZb6lZSRRIUk92gU1DaMMfrp0QPgs/BGBq0Bt2BQT5OR9IRsJGqQNUlkSfmvZcInEimd41fUuJ4TFdYQLRvT9nT7Ko1GJLZDRKz+qnaK1TAua6ScpKApH05W+1p6QQlZ9zEISHlSXu0rEy1go+aSsWzgCWlOs6jVeEtnlLSo+i9NtWSMGlAkG2YlmVCHJH+6TEDGsgnMX8vems1gss+fIGs6r3LpLuvUSK0QV240UabFSCZWSgPFRA0ueL3Plw30AujfHpgs8yf7T9a0CAQD2mPdMlSImAojdWFkwe8M3oMwOJloNRLxJfyW1zD9EuBilxYR6LLtXp8FW4o4qh9CVHMo/CcIv59asWhL4F37SjUdQfjWfLGpk/DLzL3/FeoSzg5clEr1Xe+ddqBbg7cCt9WJe4HsXohKdbFHaGWOutALehbu1Wfxgs99r64mJMnAxZ/EVmv0akS91Xu9IDS1Qi1w9VrUst6vgkWRngz39ul2SRW+WSL8C+XgGYXfqge6UujqPDwP2sZBJ+djQahBCcFr8OClrPRxmvOpxNu9AyW9g8KX8VL1qJPqKljHwOuOUVyv8C/dpbp4FepUDf8bxdQA74wc1YEXda3rXTejcCQC1/7Sb8ojKbCSrBoqgwxaG/GpBu01CkPGxOVaeWmbwXsFsqTVDAas+G+7kJCenUoG/YqFvERod7hdZnlkkEHNoPnsZPiKQLQLhzfzyaIkiSNrpJVBI2zkMJqPMYctyLGSf3MrLw9s5VtplIbef6fVZNDH2uggNcDO+2zgMlV7NMA0UrFhOuQYx2aMppNOOtnISlawlBX+e7W+bjKbQT8CHZt9+BuDyAduBHNofJ+z0fq+aXV6iTkeYwxjZ/ZmJ6YyntEh3VNgBW/xLP/h37ym0JMxUwbJqLSLx5lBIZRCIHHIsTuPtwMrpSMvXNiN7/JaQPVamJhqlpqpbpYlkm7+zqlqEkEWN8wgCX0dEDngM4/khwOFinRA5wT+qVjFIq9GKVplQxddpnLTRt7gKwyH9rBxM2hjMIAv4/ijs8PT1/8zECjI3cIcHlFThAoxY4HD8z4tCuSRSF7mWN+VzCCDeEb6ZmAGffFjInmJLvp51r5bN/tNHDW93E40pL6IhF4kkl8wPDPxMqhCZ2fFMJLDY/1dDOvAGO5EYiomip5SXml+uTuP/DG2ylgpg4qUtheyxFXwfKTr+zft6MC2PIckrzboJGQkJwIZC9k5Y6UMYkHQqWjN87ZdMWzRy8z+7BrowEzeDqjbaHZx43ZWBX3lsdJydsx8pRDpZBD0xeFgTCS95ClQoEAvNpIv9Geq0YAJLPDZKJqF8qr8y/uYFLBiWKmAwzK2DnS9zBgpg1KaO4qFIYrq5ux2YSOjriMWGNzEJHU9Vl4b5F6U6UA3K+klx1CG0wWAFRGsdLN5F2KT5fMGcZJBERw07uJhTuJotkRnDQ/wE17tz1exOvCtGKPOi6RI3uZHHM6WDKOTIYxlG47heiVRzJBGcq9qf8Ug+mY4tGjH+paEqxbvKcx4umcQw9Sf9bbEXGI22k85emFGKkb281zOJpG/HsEXWYEMhMoLSEzOCiBKNPypjkwNQ/VUKP6drlrpN0LWzVpxeNWigXVXX0Fpd1GthufXvr/kv3B7O+T8tRn+KIIk63KxpFWhghZKQo0cT4RYIayNJG+xn2I53W87IlRzEYBteNzXZ26Y4VBaV1mil0ixHF10hUxcrX2qXAJkoJeY5IMYQleICPSGo54itPMOBtMV+O/+mbUvStat0cWgkhMXqq1PC11aHZsTuAUz8tAcDN7mYF4khxVp5Qt0LEZwG4dQQMPgMU7lRQy/a55GJ/h2r/D7CeH3tiEw3MPzyYLzsB3yMR6GlySbY3t2YwZbMYHBGEgKrGYhL/IkT7My9N0kMJSc3w9HBPrleH1vpBoqUgQLiR7oY7O+QlNlTWXUdzKDHdmOLZnAMLrQsOhlBQt4gaeYR7dagVPx/Ab7Ok34XZbAptv/5c4cxI5swQg6kGzgbZ7jXzzC2qpY0Rnm74nAgBTBusiuiALJMB9vmt9tSmKWjVLRGOZ3PyLQ0cl1JeJMQa8aYVO2ZxbbM5kxdKLjUKCbpbzJXP7L/JpPvGFGEmg8ym6RjCSBbg7iyQBbxDHjIG7lSOAHnE8vutquhsMO3K4YSfhs5LZcsvxj1wJTcvAPTqhmXYKT+K//zKBh4AB7czwHMjVWei/lYX7LPfSq9VTHiOQP7EuvPxUpzEj484q8ImkNiYWDoY5OZz0HsSjybe4uNPblOOawTQWdsJC/8hse9n8TjffD+CmSDr+llaOYvMDhvIjOcZzOPpFvWcSd/JxnY5/vnt29GIH2a97pdHJUxIno2Hyfj9KrWNujRRuDx/hQybO35D6GY/utIx1sLGxynMsdEWvyBNA4DuZj7MnYWMxtZC53cCuLE554Sv7RvqpvnB2Z93RcokigBnTxEKeHXEj3T7uHApz1fY4qc0Pdd8zh735/OpOCyk03/Rz1YsD+RT6tknGTwNwG1+swPSKM6+owg1P959sU1C1KcNUFCljqG/eya2xAWAdOjF3DTCb7GZPhdxTx0stPmBCDFQ3YNfbpc8p+pQMfiv3+vLJnT1XZmeWfMyJozsXAtvyQpf7lS14lU4dP3EuhXsllDKFFSQEG8KPInCc3aHBH4oC6AAZRmvntMlKQxK3Ax/sbs+KnF5sjSxCiA6P5hZ+bbpbdexX/ZFGggETyrwTZFgLQeRaHQmityT8mNr1sV0b+Ll4O4rHAqu0KH4sCNpI85xGdUe8ykk2+bAUmvZzPQiT52IxJizw2koXMiTxlDZitvmmHnl/A4YASTAo0JrA4YjXu959WMyCKz96WHpwARRRP+3Nl69GAIVzGOqTKAi2mBETtzFRM+jSzWsFKAujg+ci6EDdwsHOJJ1DtaVrEYewR0nhO1QSj0r8pIPlgCB06MIvnAjmBdiwjFWOPeSQbOK0KYl2BMD8WJ9U/Fg69ZRrJfe4PFCEke7aDrZjp2sjgjQ6cEAoTBbFmxfxLECsWvUh6+WgEVjRgFrbq2Voaxz0wQrTdgqQ3xrJ5iVwJI01nYwlleMGqs0oYSQA7MReJ46evle4kWlBIVrAbdV3xajUy0nSmRraot9F4mLmBUvPqF45xbnG1qTfFWaki0Mi4kkd2IA8wgwJa2fHLQEPi4Ns1DEy6+BkXYFcRDh10NnAfI0JvL/7dGB7gLAqYiaNlbitpSYEzuRA78lciFksCq6oQFOQwyXELR0ZiRcZOrxJlZ3IMJ2CqOb5JfHUtduKILHm25FAeZja9OH40TlSdkSQwKDCGP7EFTu2spNX43b3IYcZs+/Yanydr+pZMRBCUeV02B3IXozB9qSUSThTScTC5gnOqsFKOjkSkIEKEVYm9JIIeXgecmg0NNy56Ke8vW7VogBZECCsat7J7BKvqZcJRBDRQMDwzimsCsdby+VhmQqdfi8TdYlZjBXRy0glSBgUm8ms6mquRJLBTDHoNTP4VCFs3I4YoE/+2aBJIJvM7BgeijOG2xtJX+1HPE2iYXM0HYuS7p5E6atqhiBi0VZ401cunmEtXiYaXfrTK9kcFRMURdS4tG40iS3RENCtL3/yJDyrbDOKXDCV6KGmUyBMlMbjL2BIr5AdV1m3JtbyD4AVOUXHJMBvZAUNPRj7ToMA+nFC7AKuFkRxgK8IT0IS/+EW8RqMZYi5pWxFRQRm7JitAVl6KffCJ32cshTI28u4hdHLkyGGoSRHlZCCAG5jgz6AoZ4yuGNPO20nRjbZLZtrJCoyksYFTWK1uVzxCEBjk6CCn/n90KFrH5gB2izBRnApiRygT3fBx4qiIliwznwpM5ytlz5cJxKGOzcF8VhmScVOHtcgMzqR0qvMAF2D4sz68CR8e5nLkYm+NBJL/rX0+k1GDLJXobELcvO+32JjKeCgjchKTjBkeVn6bn/N3pWPzQY7wjbqwLrLJAYuZz1qGMoVJgB3Rhl/DZALf4hOxQqcLI3LfUZkGTmzyS9Tl9kucza+UNrXVvdNcnuJ1utHYjB3Zh8FKspf6rB0cw2M13IsIdVVt8jSvk2c02zEFYq7edRzO4scsDr1BJHrLUK6t+v2kqT/Ro+EcdK5iH45UadUWOWANT/Icb9DLEKazJzuETlwErhx2ZRILartTqi37ewjDYs2tpUrpN6qRFvN9f/YR6hJzBMeo3PFSqT2f+zHQVCBUUzcvryrW6+LyCOPClVA55nMJ97IagGHsydkcFiJKz1AxsDiFG/hXjPwfFMFIEo0lXB8Ym6jhsA+HKSNRBJ4fRzIWBjdxEKeQRyNHnpv4GXNDx7stV3J0SAAU1753ovOQPuvpCH7J93lOvWEo+3NRzOW7wGI4H+eKELlpatpe0F8JD8PWsLmMaTHsKULZKklZS4sRu59lZyZgopFjIT/gjywKCdyTuIYRSrSJEN4HswsLmpUmJoAJvBso+C0GEwtIftrECHwXS0JhVfdTQPKjCiYEfCwQ0i3NCHxA3XWLgBlxcWQOofumuyKPzL2iLi+CLiC5v+zbp/rPLz7bwqHA9pFPF2gM42kkkn+yi/9OV2vriiXvKwlcu0+VvMumJWEC90K2EJFqbOHQw3EBXaopIfGHmNC+icPT/oAud/W7KYM5+GR3LQf7GnpOIOE5+mrDRPJcyPDTgBnkFQ0Eaa+gSvuMyJM5kDwSh6sZ4+sbD3cCOCSiutsNqV9Rq5LRamKkcKBXhiJqZmoMq4c+BjpDY5VsDp2Okl/ovgw8JXJYs4PO63yEFeT8fDP3rd/gx+SUFA/KVR2Hg9g6JizaFeMb9mKQUwdn0IkRG5RwYvYngfV8nHe5jAN5UqXS2L7H5ZBDcnGkcScZyXiSz6PPczy3qVxol7QEBhs5iSfRI9bnEvf2IQ0kqgRZYBDfQ/N/I2NDRpVC/qJMc0eBjcH9XMq7HMWXWImBpsINLu4gx33cHplKBtNrDZzVFi+XFW5+0tJGMkb6xU3Jjrpck2g4jGf3sh167vDXWIWBGXLkJRpfZqHvpAZ/YTGIQ2LwNThmJ91YKhhSvLOPxp4Te2gOgmfZlYsQKsjujW10ZatE5zneCpG6VHd0OcYljIQ66JzLX8hhhZ5jYahMCRFpeursWZWGiuJWx+Zz7BAy62SFu6ekpp2MNY01rmZ3/kKHut7VArjT0TB4KIYnJjSPkSRQiCEF16JuHkQzsKyARAHsyRisMgvYwWA+d0ZcHTtodHNj6C4k+PzdY943IuLvJfh9zoNSstaQv6t1F4FKQgonM7mytZv1MdgZFEt0YRdbA56NdK4tNB7iqUidJIGdE0ZqXZ23DV+reJFQKUYnYnFW6XkWC0G1Ky3FXR5LZfpHCUeNmlK6aws2dNMT6x6PbfgWqXpgPLk0EsAukf/uAH9jY2TgQCL4K19XI6yCMUgN2C6C+QQwMmYNK8qOQkYSgoyVtm4GswkMZzumMYXxjGIwggJrWMO7vMkSFsVaA7W4y7mYuxMNi/vYOcKsFcA2oVOXMaEDb5T0dYwoCTNIf9B0knON1l1ajIrwTmsLtmFrtmIMQ1UJxXpWsIiFLIgsP3Wjl0YFpdEQI0mgh+VMijmwyXSSTyUAHk8SSRHu/v1WsU96IobIHCQvs5SJgXT9YKhlGOsidjg25i3rYjwFEXnoUaTgYDOcD3Ike7JVLFusYlDMLZes4WwrGU5zI/9dAGPRA7iSFehMcjYHlTTBx9d0MhSCrm6QiiriwhWTM/gIh7Ito2Ke47bP1hsUQTVrJB2bBewW6SJKtmRrXmgaI9VKJA5EeAgewSyuoN/WsoSJkVp3GCPKGEkqRooy7borHo8M6SMtEts5zuQsJbpc30+U7UYwOvayMs6ZFzWSzluRPrAAhjM4YFg6sW/uZjMuKUtakizifSVZc5WyJ0Wg9K/SmjVstuICTlHGrVlyD+lhzqCjzIqSvkhtGiMJ4KWY4zHp4ABeaFJhlEwcwQn+YmTk7zVgfewzBVKZr+XQEXmX5TJS1DqWlz1HqxKrCpPCdvycPYGC0llGzK/Dl4oygfcga5C4EtiIjRZ5mdzhp50G7YYoIfw9hobMOpscN/ImF5cky8YRclTOZbQe1HD4X77DWBwKKsQQnW8ny27g6lYDtebazaU03b+YcvhRahulXmsPABGRdyAqsFeO+EyuenAiYxzuUTHPWBm5LhljUpaSwp48xJ4UsEsangg/X1z6kjVK28hILSIrkGUljIhYwRPuGhEVJtAp8EWODRlREo31fDk2iFQex3QqmvFhY/Gb3MBYCki/QYooC2UUcScizVbRPEZygLms9u/xg0eoY7MX70cmDoNr2DWkBtYmKVyJG613JDC8AouJiGRMFzayoeSJAonG6MjwgR3x/qQZzZJNuY2xFMqackj/hsdQDOZgU55ZXtt5iwprEyqGFa3FethYVb9KdI4ueb6DztdYoWZkRWlkrSa6DBrEx/M1TKwI3LmdMnT/StaOFfw1TzuuTSNpLOWRmGC0g87XE7tpOg6nMx27hv4ttWxOA96MjdptHmuDwwgmQBlZSmCVSicKw9AYjWRG+Eh2DJnLMvY8j83JlxneEqESbNeyjKWsxcYgF3uKThUilwnjn5tFPssN8fckCFqIkktuhxz3cG2FRi16DJYqR24FDqP5Dk6E1+moq/v1LGMpq+hFI0cuhq7sWl0Uo0a2c7iNI2K2bnIoZ3AduapZDjlMTuLHvMOnuFuNzWwkmhf996+W6Q8PaXtwU+SRaDhMY9OAnBIBJ3cJvWWxPMlYxkZIa8Fa1tTl3WnYTOTjOBFspGPzC/7CG6xkIw6DGMXmTOdCxuJEaCVZg2avJFJ3iX3WW5Q3DBFVvECJxhrOJP6Cv15fRcPmZLaIyOSTGLzN9fyTxXQj6WAYoxnPB/gMTqDgQrQiaudK1Lt4i83LrtVcI8fi+7zNHbHNuDylbXIyv8RkAn/hW1yEHdv5JkgWIuKwqgVttUiCOYLz6Y44cIHko2hlQVqXAd0OOlaZtB4acvdlBf0V9CFkzKEJ4AOMLSMGiWAdH+PewN+t5m1e4G+cyDh17yUquuHRZRTu96yYMhEHgyOITg2FZ4jqvBNdSFfs/5PjEt6gk3wsI5kx0bTKIslBcHRIQ3kel8ETfIS3Ar9apgJCny1zCdw8Hb22BOxaU4R01nKdTy7hWhU3jPtbPoaJjOhg6Xa2dLA4m5vR0LCwuYB/sFVCE08kllgOMC/Sn9MweR8nICM6z9iM5+MRfp7boe0hoqqVtg+EWIIEtBQz8WVA6T3SrpHyX+NS7qUj1HZTRw+ZdsneF3UbNwcn4j7LwOFoto9kMw33Rk5WFICihI1scjzKjyJzJSqZ8TLBriRj2NY360QAcxs5lbfoUC3TvJ6tBmNinqw1M9jg8fyPWVyCBhnYSge/5XKGYeEEsm0NdCQOFlvya67BUnfdggL782/2xaqoX5JFbMJk9w6PlOQiFAsaLmYzTHKBY3b7sV3DOJVWFLTLJTqr+bcv0d3saDeWdSThckHvPfMjsBufmipC35kS6bCb3KOEjxNo5CUxQ6lAxS4URNZ1RZvlNhfzGcxQl1m3Q8MmXBUZ+JYYvMtjoV05VdlJIsjzOdU+rIih0opXLfKNoiLuBDCeUf4qZIAWnucFNAqBUkUHVOC9dpZNgZFc+/bSMnUeZCWbC3mS85gSyLZ1W/nN5kqe5CTMANIMCmzOfZwbW7xXyUmunG98A9HFCQ4TuZMpKmlVUy0bO/keH4uslLER3Mm76L5UdfO2TA7i4JiODvNqsLRLAxCDYkPNpV26dRzOYdtYwyy5XLW5nrP9a1+3AafJFO5gUoCRRMjMv59VPk6qhYM8s87gSp4uyWhILiCr7acTI5KKRFmhvYHJML4cQ3OyFW32dQT3xjRvKlbjSNbzID/kAr7IF7mU3/KckgaFslZa7jyKv7B1ZD8DGMGbqjtpsKFSHsnPics7Fwg6eRoHM6IVk4lkOecyUX17CEcyN6byxsKilx38WFInX+dYtmYSp7Eipl2mxS4lTKwTrEeyQ63ATGZAwCB5KAK7BSTfANX4vdjW/oyY4vwCkk+E1lBsxxXV2MzCRHIfR/spTxO4gJUx9UsuBoPd6ry+dk6FFmomkqfoVGvXcUcsF0o6C5pI5oW8Yg3Ynt6IXP8CkjOV7nULOzaotgPBBFWbDczCLbox/MrlsdxfcuLF9y9hME2fjaIh2JzFFVnJjOyL6fit+soLyzYg+WQEW5Qykp2Qkdy/P66EEMKsJFnOv7mDv/GaP27GiZxT+mPwS80GsxzJOrpV68aovmwLGFJyEGFGcmIZSQd+hxOBW4s8Z4R2uAM/i2Ejr7RwNB2hTj4nhRjJiRSA73A/d/AwyxVO7Ii+fwUkD4WCzMUGkU7F6Y17+SdmAJdGDKuLZqRwYZ9HQ2agr51r2nmlp04Jaz7F9qFLixN4OXYUhIXDqei1hOLqGTTmoLOY4/g7XbEdwDR14SpDGkIrKcou/tliENfzi5jiaCfUFyDJ7YdrfGj8nk9yCIUIhe+ubyx7+yvwDliUGCMdLOaiQBMSjXWMYjA6ZqQt7wD30xMR9ynNRSt2uw4H3B/l+Egdm+NHnMxDLEVnIjvzfjqwYowQHYc5PM8TfASrJMopy0IAxSsMwXjG+7GzShejl5Slysoy7IkQJnNcyyMhvGgRHpAAjApl8iL2jYJ3eYWxZevSsNmJx7ibeaxnBNuyF5MhEJ0VJfQluY7zuJRbkkbvjLp0ko3Oo5zI78nFVN+7S4rSLl5IMmhZO3TyG86qEOWqPxX2DB5lE3+VInQAOrafLKLFRv8KnMLygFfoXuxZJb6RCAUzflUluhQOtzolDvs9fIuuCOvdQbInewb+u1DxBAtMYFpNeNT9y0gROr9wTatFBzfwQBmRlTdtlIG1GrzJxSXeddwFq5Y4z59QsYvNX9g7otxCYDGE4/xierei26jIqtMSVxhT//xNG4M7OZZuchUnT0RFbsod+RzXckpsFSwV8hBE1Rjj63yINX4BealU8+Y2xbORwad4MBSl7FKzBctT+d1pGAZ/4+FIiarFxiODBKfxGndH/l6gqd7kbpN76SeyypjTlSVVNU5EuEZECEC9QgDYooN5nB1xf6RH9o0tPvdMVofESPyVcS25BuGI500hoRfWSl7rfBPL95Sc2BZpTSw1D6PT4C7m8AIdFW6oqXJtapHD5PN8vkqsRtT45KAc/A9H8m4Zw4uqz3LTRc/kJozQTdHgsqha+EqwwFcryPskVVWCS9kYc9OiBS4UhG9q67Gh584E+YzCH0FDVblv0cEbfDgykzGe+WwMfslfKuiwpBce1e453+GySHPMm88Xntxnl0wnDO+mqxWM5Ebhn2AffoKOoZInk6PFwUKngyeZw7WR8XzKDCdZB4ItdB7mAJ4mp9IWK11LEvBaciznGH5Uks1QyexwcDC4gHkxhB194y9LPBEHwfOchZ6gnZbbV+FNvhbTWw+6qvaBlYoEq3kDbsysg/kcxsKY4nMZk92us4TzAn5mlEVR+XT1RMLUQeeH/IEOv8+HrFCtZZHjNwHtL8tw1xJGct351XyGD/AoBjlQw8AqH4eDjcSgg8Wcy948qnyVyr+KmyyUzKN7kf24HkkO4aefyBiSsnEwMLiTPSJHWGmRRyOx0Mnxbb4bS5JOzC5KvUkHnV9wBja5Cn1mJRaCDp7hcC7nYXQKZYEYSVdMc5awgeVwkzKA7QpNZgxy3M5+vBKzQ/fXTsQpaZzLighzSUt8rsman7hvP4Xb6EAPJBrJsjx8V4z/ipO5BBstYt+STlo4XV6osPAx3Kfuq53QOKziNJvwSKxnOI9xCZjZrcN8U/X5CX7MGrrpue/Yg9+xUQ3TMkPjtAoUyJP3V/cQxwSMsfBzZqjbsLzvreRV4HgNp8caODrw6YhduDsp72unA3vyQAlGi2/0Rn9dwzBAYxILAgO18vSSJ4+kwBT17NKxLuFOcnszk4f8t4XfVfDHr50Ye2IasHMkU9hIbo3ApQF8W1kJYSaK6mu3PfmIwHbwHimsoc7kLXU9UY47941L+Yxa1ecC38yrgWS9SH5GiwaPhW1/2JnLeVKRavxnAddziKqsrD72WABDeZZu1rKetaxhDWtZxzpWsZGrE2/Vi8vtwNW8VGF1i/kZc0K/KF3NptzDmrLfreVGplUQCzrwP/SwmnWsU/tYzSpWsoYVTI34pbuvj/B3eiJXupSfMMu/bIAtuJnVJd/ZyLNsTrFhWjwjfUCJw3si39bNg3xKVWqJWFE1k3dZwSpWs1L97ypWsIZXmBCBTR34BmtZxmpWs5pVrGIVa1hDD/8KGW3RjOTdZ5UPGnPXOI6v8kLMKb/GZUzAG6sKH+TREoZ2WM5XkzOSSE0vacqo05nGLGawNeMZxRA60LDpYS0rWMArzOM5VeWffPitxkQ6AgOZNeUz6axiVQ19IjQV2eliJrOZxmRGqr4yJmtZzGs8xVOsJjgCORq2ZGdmMpmxCNaxhBd4gAVQxc8Y4vdOdwIl1RoaSyJLTzwjclt2YzqTGYuOJM8yXmcuj7M8gEU3UrUFs5nGSAQbeJtFvMkiv/ROx+ZEfhO6Cigm7hzIgyozcTqHshObMQgHk/Us4Gn+w6v+M+IhxxjVNtpRib7us9ezKuYXIxiqMFA0cjUEPSo7G/9CYQZz6cAuGcpjk+MsfhgxtdhdaSc7sStT2YLh6Nhs4G1e4XHm0hPYjYu7nZnF+xiETTfv8BqvsKJ1hl3pwesliB3GSEYxosRt0xNoolatkYjJdtXGXcbJZK0p2r7SEDWthveHWxaHcyYk+1c5F9HQmYkGzwx2woxIxyrEzJAtOh3J8NqwAWekeujFWeRC5SWbJdEuoUa6134Q9c3RqbTG0s4HQjUwrh4pw2/zLwOy3aljF5LKhd6oqeYe5op3cuUrdfxvBsMItWHIxkvidUJrToKX4H2aDPxvpdB6edsW4Z+r5uNFoDECI2ZYwDriu/C6+TQycFLRuLNL8s8lNXYSMlKXoDImwCwb6i8kU1Wy5aXdtT7fSXEXssa3yQbWFc7iljHPcGpaXfnaZOR/VYsdlv7JwZtGYpBnlrr1Ka/AXV4F48l20yCFpc9I1H0IfQX9Y5XvLRBItkPyktIXk/i8yusUIVbSMXmnHc7QyM4sg1TDTml5sjZf5cP8gUdZzWQ+7Y/KDItAjXd4I2OkDPpe7he9vnZal81gdqOLkzlZ/V1U6aKDxjzWN6ktacZIGcTqHM2X5aKNV6phM5vJasiMgJJuqcHgzZ/aQ5tmjPReNuBkW5p1LuyNhhWRsRBcvc5i7oK+10ftpdAzaD6Ex5GVMlQ7rXIfqNKX20ZwCatDXSMyRsqgZQEA2eaU4Lbd3LnKmkw6uI1f1Np/LjPt3tvhgPTALrnWdK+DnTZiJA2b3RgXGaXzKrAcOvk7p9ZafpcxUgbpQA49ptlXrq3WeTgaBTVJItw30Buc/TtOo6eF87gyRurHIFN/2mIewA61jtfUfIYVbeMrOQie4Q1/NqTjp3F5GXHPcCW/a4q+ziCDAeYbDuc4buAZlgcquLp5kV/yITX5SrTbkjN4r4cv2k+ua35z6E0Yzwi6kPSwjDdVM5c2CTFkjJRB+7O8W39WCl61ExkjZZBBLfQpSoINGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkkEEGGWSQQQYZZJBBBhlkUCf8P//XNT2b1aI8AAAAAElFTkSuQmCC") center/contain no-repeat; } @media (max-width:600px){ .brand .mark{width:96px;height:28px} } /* nine links now (owner's 2026-08-31 catch: garage, gelenderi, struja and grejanje were missing), so the gap tightens and the inline nav yields to Meni sooner - see the 1280px query below */ .topnav{display:flex;gap:var(--s-4);margin-left:var(--s-5);white-space:nowrap} .topnav a{position:relative;font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--text-2);padding-block:6px;transition:color var(--dur-fast) var(--ease-out)} .topnav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)} .topnav a:hover,.topnav a:focus-visible{color:var(--text)} .topnav a:hover::after,.topnav a:focus-visible::after{transform:scaleX(1)} /* the section you are actually in, set by the scroll spy in main.js */ .topnav a[aria-current="true"]{color:var(--text)} .topnav a[aria-current="true"]::after{transform:scaleX(1)} .masthead .btn{margin-left:auto} /* needs to outrank .btn's own display, which is declared later */ .masthead .nav-menu{display:none;margin-left:auto;gap:8px} /* Below the width where the inline nav fits, Meni becomes the way through the site. Above it the inline nav is always on screen, so Meni would be a second control for a job already done. */ @media (max-width:1280px){ .topnav{display:none} .masthead .nav-menu{display:inline-flex} } @media (max-width:420px){ .masthead .nav-menu span{display:none} } /* 5. BUTTONS -------------------------------------------------------------- */ .btn{ --bg:transparent;--fg:var(--text);--bd:var(--line-2); display:inline-flex;align-items:center;gap:10px; padding:13px 22px;background:var(--bg);color:var(--fg); border:var(--border-solid) solid var(--bd);border-radius:var(--radius-pill); font-family:var(--font-body);font-weight:var(--w-semi);font-size:var(--t-sm); transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn svg{flex:0 0 auto} .btn--action{--bg:var(--red);--fg:#fff;--bd:var(--red);box-shadow:var(--shadow-action);padding:16px 26px;font-size:var(--t-md)} .btn--action:hover{--bg:var(--red-lift);--bd:var(--red-lift)} /* ghost buttons are small pieces of the same glass */ .btn--ghost{--bd:rgba(255,255,255,.2);--fg:var(--text); background:var(--glass-sheen), rgba(255,255,255,.05); backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .btn--ghost:hover{--bd:rgba(255,255,255,.44);background:var(--glass-sheen), rgba(255,255,255,.11)} @media (prefers-reduced-transparency:reduce){ .btn--ghost{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(40,45,50,.95)} } .btn--sm{padding:9px 15px;font-size:var(--t-xs)} .num{font-variant-numeric:tabular-nums;letter-spacing:.02em} /* ========================================================================== 6. HERO — the occlusion set piece Layer order (back to front): .sky CSS twilight gradient .h-type the headline .cut the SAME photograph, clipped to a 17-point polygon traced from its own pixel edge, so the roofline really covers the type ========================================================================== */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate} /* Daylight, owner's call 2026-08-30: a late golden afternoon. Deep blue up top so the white headline keeps its contrast, warming toward the horizon where the 3D house stands. */ .hero .sky{position:absolute;inset:0;z-index:0;background: radial-gradient(120% 60% at 50% 92%, rgba(240,196,130,.5) 0%, rgba(228,178,116,.18) 40%, rgba(70,104,143,0) 68%), linear-gradient(180deg,#3F608A 0%,#557CA8 32%,#7FA3C4 58%,#B7C9D2 78%,#E3CBA0 100%);} /* the bright scene hands off into the dark page through a ground fade */ .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%; z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(20,23,26,0) 0%,var(--ground) 96%)} /* the 3D evening replaces the photo layers when WebGL is available; the canvas sits on the cut layer's z so the name still sinks behind the roof */ .hero canvas.hero3d{position:absolute;inset:0;z-index:2;width:100%;height:100%} body[data-hero3d="on"] .hero .photo, body[data-hero3d="on"] .hero .cut, body[data-hero3d="on"] .hero-lights{display:none} /* full photo, sitting low and dim — gives the sky real texture */ .hero .photo{position:absolute;inset:0;z-index:0; background-image:var(--hero-img);background-size:cover;background-position:center 62%; opacity:.5;filter:saturate(.92) sepia(.14) hue-rotate(-8deg) brightness(1.04); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 44%); mask-image:linear-gradient(180deg,transparent 0%,#000 44%);} /* The type block's BOTTOM is pinned just past the roofline, so the last line is always partly swallowed by the roof no matter the viewport ratio. --roof-y is written by js/main.js from the photograph's real geometry; the fallback keeps it sane before that runs (or if it never does). */ /* js/main.js sets `top` in pixels from the measured roof position and this block's own line-height, so the last line is always partly swallowed by the roof. The 24% fallback keeps it sensible if that never runs. */ .hero .h-type{ position:absolute;left:0;right:0;top:24%;z-index:1; padding-inline:var(--gutter); max-width:var(--measure-max);margin-inline:auto; font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:var(--tr-hero); text-transform:uppercase;color:var(--text); pointer-events:none;text-wrap:balance; } .hero .h-type .l{display:block;overflow:hidden} .hero .h-type .l>span{display:block} /* When the 3D hero runs, the name is red channel letters standing on the 3D roof (hero3d.js), so the HTML headline would double it. Visually hidden, not display:none: it stays the page's h1 for readers and search. */ body[data-hero3d="on"] .hero .h-type{ clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap; } /* the cut-out: same image, clipped along its own measured roofline */ .hero .cut{position:absolute;inset:0;z-index:2; filter:saturate(.98) sepia(.12) hue-rotate(-8deg) brightness(1.03); background-image:var(--hero-img);background-size:cover;background-position:center 62%; clip-path:polygon( 0.0% 47.2%, 0.6% 47.7%, 1.9% 48.1%, 2.5% 48.6%, 3.1% 49.0%, 3.7% 49.4%, 4.4% 49.9%, 5.0% 50.3%, 6.9% 41.1%, 91.2% 40.8%, 93.7% 52.9%, 96.2% 52.0%, 96.8% 51.5%, 97.5% 51.0%, 98.1% 50.6%, 98.7% 50.1%, 100.0% 49.6%, 100% 100%, 0% 100%); } /* grade the cut-out into the page so it does not read as a pasted rectangle */ .hero .cut::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(14,17,19,0) 38%,rgba(14,17,19,.55) 78%,rgba(14,17,19,.94) 100%), linear-gradient(90deg,rgba(14,17,19,.5),rgba(14,17,19,0) 22%,rgba(14,17,19,0) 78%,rgba(14,17,19,.5));} /* 7.2 the window lights. Injected by JS (positionLights), so a page without scripts simply shows the photograph. Shade dims a window until ignition; bloom is the warm light that takes its place. */ .hero-lights{position:absolute;inset:0;z-index:2;pointer-events:none} .hglow{position:absolute} .hglow i{position:absolute;inset:0;display:block;border-radius:8px} .hglow-shade{background:rgba(9,12,16,.92);filter:blur(7px);opacity:.55} .hglow-bloom{opacity:0;transform:scale(1.6);mix-blend-mode:screen;filter:blur(12px); background:radial-gradient(62% 58% at 50% 46%,rgba(255,199,128,.85), rgba(255,172,84,.3) 55%,rgba(255,160,70,0) 78%)} .hero-lights.is-lit .hglow-shade{opacity:0} .hero-lights.is-lit .hglow-bloom{opacity:.9} .hero-lights.is-lit .hglow--far .hglow-bloom{opacity:.55} /* light spilling onto the lawn and terrace under each lit opening */ .hglow-pool{position:absolute;opacity:0;pointer-events:none;mix-blend-mode:screen; filter:blur(14px);border-radius:50%; background:radial-gradient(55% 70% at 50% 30%,rgba(255,190,116,.6),rgba(255,170,84,0) 75%)} .hero-lights.is-lit .hglow-pool{opacity:.55} /* fireflies: pure CSS drift so they never cost the main thread a frame. Decorative, so they vanish entirely under reduced motion. */ .ff{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(255,214,150,.95),rgba(255,190,110,0) 70%); box-shadow:0 0 8px 2px rgba(255,196,120,.5)} .ff:nth-of-type(1){left:24%;top:74%} .ff:nth-of-type(2){left:37%;top:82%} .ff:nth-of-type(3){left:57%;top:78%} .ff:nth-of-type(4){left:66%;top:84%} .ff:nth-of-type(5){left:30%;top:88%} @media (prefers-reduced-motion:no-preference){ .hero-lights.is-lit .ff{animation:ffdrift 9s ease-in-out infinite} .hero-lights.is-lit .ff:nth-of-type(2){animation-duration:12s;animation-delay:1.4s} .hero-lights.is-lit .ff:nth-of-type(3){animation-duration:10s;animation-delay:3s} .hero-lights.is-lit .ff:nth-of-type(4){animation-duration:13s;animation-delay:.8s} .hero-lights.is-lit .ff:nth-of-type(5){animation-duration:11s;animation-delay:2.2s} } @keyframes ffdrift{ 0% {transform:translate(0,0);opacity:0} 12% {opacity:.85} 30% {transform:translate(26px,-30px);opacity:.25} 50% {transform:translate(-14px,-52px);opacity:.8} 70% {transform:translate(20px,-24px);opacity:.2} 88% {opacity:.6} 100% {transform:translate(0,0);opacity:0} } /* Scrim under the copy. The house is brightest exactly where the lead and the buttons sit, so the text needs its own ground rather than luck. */ .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(14,17,19,0),rgba(14,17,19,.5) 45%,rgba(14,17,19,.88) 100%)} @media (max-width:900px){ .hero::after{height:72%; background:linear-gradient(180deg,rgba(14,17,19,0),rgba(14,17,19,.68) 30%,rgba(14,17,19,.93) 100%)} } .hero-body{position:relative;z-index:3;padding-bottom:clamp(26px,5vh,54px)} .hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-7);flex-wrap:wrap} /* --- the maker: portrait + name. His name is what is being trusted, so it gets its own element instead of a bold run buried in a paragraph. ------- */ .maker{display:flex;align-items:center;gap:var(--s-6);max-width:58ch} .maker-face{position:relative;flex:0 0 auto;width:148px;height:148px;border-radius:50%; overflow:hidden;background:var(--graphite); box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.5)} .maker-face img{width:100%;height:100%;object-fit:cover} .maker-face[data-empty]{display:grid;place-items:center; background:linear-gradient(160deg,#2A3037,#1A1E22)} .maker-face[data-empty] svg{width:46px;height:46px;fill:none; stroke:var(--alu);stroke-width:3;opacity:.45;stroke-linecap:round} /* the red ring draws itself around the portrait at the entrance tail; the drawn state is the stylesheet default so reduced-motion and no-JS see a finished ring, and the entrance rewinds it before drawing */ .maker-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .maker-ring circle{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:0; transform:rotate(-90deg);transform-origin:center} .maker-name{font-family:var(--font-display);font-weight:var(--w-black); font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:.92;text-transform:uppercase; letter-spacing:-.02em;color:var(--text)} .maker-role{margin-top:8px;font-size:var(--t-base);color:var(--text-2);line-height:1.5;max-width:38ch} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto} /* --- fact band, lifted out of the hero: it was a fifth stacked element competing with the name and the call button ---------------------------- */ .spec-band{background:var(--void);border-block:var(--border-hair) solid var(--line)} .spec{display:grid;grid-template-columns:repeat(4,1fr)} .spec div{padding:var(--s-6) var(--s-5) var(--s-6) 0;border-right:var(--border-hair) solid var(--line)} .spec div:last-child{border-right:none} .spec div + div{padding-left:var(--s-5)} .spec dt{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--text-3);font-weight:var(--w-semi)} .spec dd{font-family:var(--font-display);font-weight:var(--w-black);font-size:2rem;line-height:1;margin-top:6px;text-transform:uppercase;letter-spacing:-.01em} @media (max-width:760px){ .spec{grid-template-columns:1fr 1fr} .spec div:nth-child(2n){border-right:none} .spec div:nth-child(-n+2){border-bottom:var(--border-hair) solid var(--line)} .spec dd{font-size:1.6rem} } /* -------------------------------------------------------------------------- MOTION SYSTEM (elevation brief 4.0) The registers the page was missing. Every one renders its finished state when script or motion is unavailable. -------------------------------------------------------------------------- */ /* headline line masks: the clip lives on .ln, the travel on .ln-i */ .ln{display:block;overflow:hidden;padding-bottom:.04em} .ln-i{display:block;will-change:transform} /* the sliding pill behind a segmented control's active option */ .seg,.acc-row{position:relative} .seg.has-pill::before{content:"";position:absolute;z-index:0;pointer-events:none; left:0;top:0;width:var(--pw,0);height:var(--ph,0); transform:translate3d(var(--px,0),var(--py,0),0); border-radius:11px;background:var(--glass-sheen), rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); /* transform only. Width is set instantly: the options in these groups are equal width, so it almost never changes, and transitioning it would animate a layout property for no visible gain. */ transition:transform 320ms var(--ease-out)} .seg button{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ .seg.has-pill::before{transition-duration:1ms} } /* configurator size presets */ .preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px} .preset-row button{padding:9px 6px;border:1px solid var(--line-2);border-radius:11px; font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--text-2);line-height:1.2; transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)} .preset-row button em{display:block;margin-top:3px;font-style:normal; font-weight:var(--w-regular);font-size:var(--t-2xs);color:var(--text-3); font-variant-numeric:tabular-nums} .preset-row button:hover{color:var(--text);border-color:var(--alu)} .preset-row button[aria-pressed="true"]{color:var(--text);border-color:var(--alu); background:var(--glass-sheen), rgba(255,255,255,.09)} .preset-row button[aria-pressed="true"] em{color:var(--text-2)} /* mobile call bar: on a phone the whole site is one tap, and that tap used to scroll away with the hero */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(14,17,19,0),rgba(14,17,19,.92) 38%); transform:translateY(105%);pointer-events:none; transition:transform 380ms var(--ease-out)} .callbar.is-on{transform:translateY(0);pointer-events:auto} .callbar .btn{width:100%;justify-content:center} @media (prefers-reduced-motion:reduce){ .callbar{transition-duration:1ms} } @media (min-width:901px){ .callbar{display:none} } /* clearance so the bar never sits on top of the colophon */ @media (max-width:900px){ body{padding-bottom:74px} } /* -------------------------------------------------------------------------- NAV OVERLAY — injected by main.js, so nothing here exists without script. The Meni control falls back to an anchor at #index in that case. -------------------------------------------------------------------------- */ .nav-panel{position:fixed;inset:0;z-index:var(--z-overlay);display:none; align-items:flex-start;justify-content:flex-end;padding:14px} .nav-panel.is-open{display:flex} .nav-scrim{position:absolute;inset:0;background:rgba(8,10,12,.72); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .nav-sheet{position:relative;z-index:2;width:min(400px,100%);max-height:calc(100dvh - 28px); display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);overflow:auto} .nav-sheet-bar{display:flex;align-items:center;justify-content:space-between; padding-bottom:var(--s-3);border-bottom:var(--border-hair) solid var(--line-2)} .nav-sheet-bar span{font-size:var(--t-2xs);text-transform:uppercase; letter-spacing:var(--tr-wider);color:var(--text-3);font-weight:var(--w-bold)} .nav-close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; color:var(--text-2);transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)} .nav-close:hover{background:rgba(255,255,255,.1);color:var(--text)} .nav-close svg{width:16px;height:16px} .nav-links{display:grid} .nav-links a{position:relative;display:block;padding:14px 2px; border-bottom:var(--border-hair) solid var(--line); font-family:var(--font-display);font-weight:var(--w-black); font-size:1.65rem;line-height:1;letter-spacing:var(--tr-display); text-transform:uppercase;color:var(--text-2); transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)} .nav-links a:last-child{border-bottom:none} .nav-links a:hover,.nav-links a:focus-visible{color:var(--text);transform:translateX(5px)} .nav-call{width:100%;justify-content:center;margin-top:var(--s-2)} body.nav-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .nav-links a{transition-duration:1ms} .nav-links a:hover,.nav-links a:focus-visible{transform:none} } /* ========================================================================== 6b. SERVICE INDEX — the page's own table of contents The page is long by design; this makes the length optional. Asymmetric grid rather than five identical tiles, so it reads as a directory with a lead entry instead of a generic feature row. ========================================================================== */ .idx-nav{position:relative;padding-block:var(--section-y);background:var(--ground); border-bottom:var(--border-hair) solid var(--line)} .idx-head{max-width:40ch;margin-bottom:var(--s-7)} .idx-head h2{font-size:var(--t-2xl);line-height:.95} .idx-head p{margin-top:12px;color:var(--text-2);font-size:var(--t-md);line-height:1.55} .idx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .idx-card{position:relative;display:flex;flex-direction:column;align-items:flex-start; gap:10px;min-height:190px;padding:var(--s-6); border:var(--border-hair) solid var(--line-2);border-radius:var(--radius-lg); background:linear-gradient(150deg,rgba(44,49,54,.55),rgba(20,23,26,.35)); transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)} /* the configurator earns the double-width slot */ .idx-card--wide{grid-column:span 2;min-height:210px; background:linear-gradient(140deg,rgba(64,84,116,.32),rgba(20,23,26,.4))} .idx-card svg{width:26px;height:26px;color:var(--alu); transition:color var(--dur-base) var(--ease-out)} .idx-card h3{font-family:var(--font-display);font-weight:var(--w-black); font-size:clamp(1.5rem,2.3vw,2rem);line-height:1;letter-spacing:var(--tr-display); text-transform:uppercase} .idx-card p{color:var(--text-2);font-size:var(--t-sm);line-height:1.5;max-width:34ch} .idx-go{margin-top:auto;display:inline-flex;align-items:center;gap:7px; font-size:var(--t-xs);font-weight:var(--w-semi);letter-spacing:var(--tr-wide); text-transform:uppercase;color:var(--text-3); transition:color var(--dur-base) var(--ease-out)} /* drawn at full length and scaled down at rest, so the hover animates a transform rather than width, per the project's no-layout-animation rule */ .idx-go::after{content:"";width:28px;height:1.5px;background:currentColor; transform:scaleX(.57);transform-origin:left; transition:transform var(--dur-base) var(--ease-out)} .idx-card:hover,.idx-card:focus-visible{border-color:var(--alu);transform:translateY(-3px); background:linear-gradient(150deg,rgba(56,62,68,.7),rgba(20,23,26,.45))} .idx-card:hover svg,.idx-card:focus-visible svg{color:var(--text)} .idx-card:hover .idx-go,.idx-card:focus-visible .idx-go{color:var(--text)} .idx-card:hover .idx-go::after{transform:scaleX(1)} @media (max-width:900px){ .idx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .idx-card--wide{grid-column:span 2} } @media (max-width:560px){ .idx-grid{grid-template-columns:1fr} .idx-card,.idx-card--wide{grid-column:span 1;min-height:0} } @media (prefers-reduced-motion:reduce){ .idx-card{transition-duration:1ms} .idx-card:hover,.idx-card:focus-visible{transform:none} } /* ========================================================================== 7. THE WINDOW — v1's "every opening is different" and v4's rotatable 3D window merged into one object. Resize it, turn it, change the finish; the dimension lines are projected from the real 3D corners every frame. ========================================================================== */ .win{position:relative;padding-block:var(--section-y);background:var(--void);overflow:hidden} .win::before{content:"";position:absolute;left:50%;top:46%;width:min(1200px,120%);aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,rgba(64,84,116,.28) 0%,rgba(14,17,19,0) 68%)} .win-head{position:relative;max-width:60ch;margin-bottom:var(--s-8)} .win-head h2{font-size:var(--t-2xl)} .win-head p{margin-top:14px;color:var(--text-2);font-size:var(--t-md);line-height:1.55} .win-grid{position:relative} /* --- stage: breaks the grid and runs full-bleed, with the controls floating over it rather than sitting in a column beside it ----------------------- */ .win-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw); height:min(88vh,880px);border-radius:0; overflow:hidden;cursor:grab;touch-action:pan-y; background:radial-gradient(120% 90% at 50% 42%,#1B2129 0%,#12161A 58%,#0E1113 100%)} .win-stage:active{cursor:grabbing} .win-stage canvas{position:absolute;inset:0;width:100%;height:100%} /* vignette — the wall is lit enough to read as a wall, which on a small screen fills the frame and flattens the mood; this puts the dark back at the edges */ .win-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(115% 95% at 50% 45%,rgba(14,17,19,0) 38%,rgba(14,17,19,.55) 78%,rgba(14,17,19,.86) 100%)} .win-dims,.win-hint{z-index:2} /* dimension overlay, drawn in SVG over the canvas */ .win-dims{position:absolute;inset:0;pointer-events:none;overflow:visible} .win-dims line{stroke:var(--alu);stroke-width:1;vector-effect:non-scaling-stroke} .win-dims .tick{stroke:var(--alu);stroke-width:1.5} .win-dims text{fill:var(--text);font-family:var(--font-body);font-size:12px; font-weight:var(--w-semi);font-variant-numeric:tabular-nums;paint-order:stroke; stroke:rgba(14,17,19,.85);stroke-width:4px} .win-dims .unit{fill:var(--text-3);font-size:10px;stroke-width:3px} body.no-dims .win-dims{opacity:0;transition:opacity var(--dur-base) var(--ease-out)} .win-hint{position:absolute;left:16px;bottom:14px;display:inline-flex;align-items:center;gap:8px; padding:7px 13px;border-radius:var(--radius-pill); background:rgba(14,17,19,.7);border:1px solid var(--line-2); font-size:var(--t-2xs);color:var(--text-2);pointer-events:none; transition:opacity var(--dur-base) var(--ease-out)} .win-stage.touched .win-hint{opacity:0} /* static fallback when WebGL is unavailable */ .win-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:40px} .win-fallback svg{width:100%;height:100%;max-width:320px} .wf-frame{fill:none;stroke:#6E80AA;stroke-width:3} .wf-sash{fill:none;stroke:#46587F;stroke-width:1.6} .wf-glass{fill:#9FB4DC;opacity:.1} .wf-handle{fill:var(--red)} body[data-win3d="on"] .win-fallback{display:none} /* --- controls: a glass panel floating over the stage --------------------- */ /* Frosted-glass approximation of the iOS material. This is a web approximation using backdrop-filter with layered borders and a highlight, not Apple's own material, which exists only on Apple platforms. */ /* inherits the shared .glass material; this only handles placement */ .win-panel{position:absolute;z-index:3;top:50%;transform:translateY(-50%); /* The containing block is .win-grid (the content column), NOT the viewport, so a plain right offset drifts toward the middle of the full-bleed stage as the screen widens; at 2560px it parked the panel on the 3D window. This resolves to: sit at the content edge, but never more than 8vw of real viewport gap. First term = wanted viewport gap (clamped), the rest subtracts the grid's own distance from the viewport edge, going negative on wide screens to push the panel back out toward the edge. The camera reads the panel's real position either way (window3d.js fitCamera). */ right:calc(clamp(var(--gutter), max(0px, (100vw - var(--measure-max))/2) + var(--gutter), 8vw) - max(0px, (100vw - var(--measure-max))/2) - var(--gutter)); width:336px;max-height:82%;overflow-y:auto; display:flex;flex-direction:column;gap:var(--s-5); padding:var(--s-6)} .win-panel::-webkit-scrollbar{width:6px} .win-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;border:none} /* Pinned intro (elevation brief 4.3). The is-introing class exists only when window3d.js arms the intro (fine pointer, >1000px, motion allowed), so none of this can touch the no-JS or reduced-motion page. The transform is written out in full both times: a custom property inside transform does not re-diff. */ @media (min-width:1001px){ .win .win-panel{transition:opacity .55s var(--ease-out),transform .65s var(--ease-out)} .win.is-introing .win-panel{opacity:0;transform:translateY(-50%) translateX(34px);pointer-events:none} .win.is-introing .win-hint{opacity:0} } .ctl h3{font-family:var(--font-body);font-size:var(--t-2xs);font-weight:var(--w-bold); text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--text-3)} .ctl-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px} .ctl-val{font-family:var(--font-display);font-weight:var(--w-black);font-size:1.6rem;line-height:1} .ctl-val span{font-family:var(--font-body);font-weight:var(--w-medium);font-size:.75rem;color:var(--text-3);margin-left:4px} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;margin-top:4px;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-2);border-radius:2px} input[type=range]::-moz-range-track{height:3px;background:var(--line-2);border-radius:2px} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;margin-top:-7px; border-radius:50%;background:var(--red);border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform var(--dur-fast) var(--ease-out)} input[type=range]::-moz-range-thumb{width:17px;height:17px;border:2px solid #fff;border-radius:50%; background:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.5)} input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)} input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(225,16,48,.35)} .sw-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px} .sw{width:40px;height:40px;border-radius:var(--radius-sm);border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} .sw:hover{transform:translateY(-3px)} .sw[aria-pressed=true]{border-color:#fff} .sw-name{margin-top:10px;font-size:var(--t-sm);color:var(--text-2);min-height:1.4em} .seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px} .seg--3{grid-template-columns:repeat(3,1fr)} .seg--3 button{padding:10px 4px;font-size:var(--t-xs)} .seg button{padding:10px;border:1px solid var(--line-2);border-radius:11px; font-size:var(--t-sm);color:var(--text-2); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} .seg button:hover{color:var(--text);border-color:var(--alu)} .seg button[aria-pressed=true]{background:var(--text);color:var(--void);border-color:var(--text);font-weight:var(--w-semi)} /* accessories — the "Dodaci za stolariju" catalogue, as toggles */ .acc-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px} .acc{position:relative;padding:10px 12px 10px 30px;text-align:left; border:1px solid var(--line-2);border-radius:11px; font-size:var(--t-sm);color:var(--text-2); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} .acc::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%); width:13px;height:13px;border:1.5px solid var(--line-2);border-radius:3px; transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} .acc::after{content:"";position:absolute;left:14px;top:calc(50% - 1px); width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0; transform:translateY(-50%) rotate(45deg) scale(0);transform-origin:center; transition:transform var(--dur-fast) var(--ease-out)} .acc:hover{color:var(--text);border-color:var(--alu)} .acc[aria-pressed=true]{color:var(--text);border-color:var(--red)} .acc[aria-pressed=true]::before{background:var(--red);border-color:var(--red)} .acc[aria-pressed=true]::after{transform:translateY(-50%) rotate(45deg) scale(1)} .drop-lab{display:block;margin-top:14px;font-size:var(--t-2xs);text-transform:uppercase; letter-spacing:var(--tr-wider);color:var(--text-3);font-weight:var(--w-bold)} .open-btn{width:100%;justify-content:center} .open-btn[aria-pressed=true]{border-color:var(--text);color:var(--text)} /* which product the controls drive */ .seg--obj{grid-template-columns:1fr 1fr;margin-top:0;gap:4px; padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:14px; background:rgba(255,255,255,.05)} .seg--obj button{border:none;background:none;border-radius:10px;padding:9px} .seg--obj button[aria-pressed=true]{background:var(--text);color:var(--void)} .cfg{display:contents} body[data-cfg="window"] .cfg--door, body[data-cfg="door"] .cfg--window{display:none} .ctl-note{margin-top:9px;font-size:var(--t-xs);color:var(--text-3);line-height:1.45} .win-punch{margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--line)} .win-punch p{font-size:var(--t-sm);color:var(--text-2);line-height:1.55} .win-punch p b{color:var(--text)} .win-punch .btn{margin-top:14px;width:100%;justify-content:center} @media (max-width:1000px){ /* the floating panel stops working once it would cover the window, so below this width it returns to normal flow underneath the stage */ .win-stage{height:min(56vh,480px)} .win-panel{position:static;transform:none;width:auto;max-height:none; margin-top:var(--s-6);backdrop-filter:none;-webkit-backdrop-filter:none; background:linear-gradient(180deg,#191D21,#141719);border-radius:var(--radius-md)} } @media (max-width:600px){ .seg{grid-template-columns:1fr} .win-dims text{font-size:11px} } /* ========================================================================== 8. STOLARIJA — built on real profile cross-sections rather than stock photography. Each drawing traces itself on scroll and bleeds past the grid. ========================================================================== */ .stol{position:relative;padding-block:var(--section-y);background:var(--ground);overflow:hidden} .stol-head{max-width:32ch;margin-bottom:var(--s-9)} .stol-head h2{font-size:var(--t-3xl);line-height:.9} .stol-head p{margin-top:var(--s-5);max-width:58ch;font-size:var(--t-md);color:var(--text-2);line-height:1.55} /* --- one material --- */ .mat{position:relative;display:grid;align-items:center;gap:clamp(24px,4vw,64px); padding-block:clamp(40px,6vw,88px);border-top:var(--border-hair) solid var(--line)} .mat-txt h3{font-size:clamp(2.4rem,5vw,4rem);line-height:.88} .mat-txt h3 i{font-style:normal;display:block;font-size:var(--t-2xs);font-family:var(--font-body); font-weight:var(--w-bold);letter-spacing:var(--tr-wider);color:var(--text-3);margin-bottom:12px} .mat-txt p{margin-top:var(--s-4);max-width:44ch;color:var(--text-2);line-height:1.6} .mat-spec{margin-top:var(--s-5);display:grid;gap:0} .mat-spec li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:baseline; padding:11px 0;border-top:var(--border-hair) solid var(--line)} .mat-spec b{font-family:var(--font-display);font-weight:var(--w-black);font-size:1.15rem; color:var(--text);min-width:3.2em} .mat-spec span{font-size:var(--t-sm);color:var(--text-2)} /* the drawing itself, deliberately oversized and bleeding out of the column */ .mat-draw{position:relative} .mat-draw svg{width:100%;height:auto;overflow:visible} /* Solid fills only. Transparent washes made the earlier drawing unreadable; a cross-section has to work like a diagram in a manual, where every colour means one material and nothing is guessed from context. */ .cs-pvc {fill:#EDEEEA} /* white PVC body */ .cs-alu {fill:#B7BDC3} /* aluminium shell */ .cs-void {fill:#14171A} /* hollow air chamber */ .cs-steel{fill:#8A939B} /* galvanised steel reinforcement */ .cs-seal {fill:#23282C} /* EPDM gasket */ .cs-break{fill:#7A6544} /* polyamide thermal break */ .cs-glass{fill:#9CC3BC} /* glass pane */ .cs-gap {fill:#1D2B29} /* sealed cavity between the panes */ .cs-spacer{fill:#6E767D} /* spacer bar */ .cs-edge {fill:none;stroke:#0B0E10;stroke-width:2;stroke-linejoin:round} .cs-thin {fill:none;stroke:#0B0E10;stroke-width:1.2} .cs-note{font-family:var(--font-body);font-size:13px;font-weight:600;fill:#fff; paint-order:stroke;stroke:rgba(14,17,19,.9);stroke-width:4px} .cs-side{font-family:var(--font-body);font-size:11px;font-weight:700; letter-spacing:.14em;fill:var(--text-3); paint-order:stroke;stroke:rgba(14,17,19,.9);stroke-width:4px} .cs-lead{stroke:#8A939B;stroke-width:1.4;fill:none} .cs-dot{fill:#fff} /* colour key, so nothing depends on remembering what a fill meant */ .cs-key{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-5)} .cs-key li{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--text-2)} .cs-key i{width:15px;height:15px;border-radius:4px;flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)} /* layout family changes per material, so this never reads as three cards */ /* The drawings still break the column, but only as far as the page gutter. Any further and the outermost labels and the colour key clip off screen, which costs more than the bleed gains. The key is pushed back inside. */ .mat--a{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .mat--a .mat-draw{grid-column:1;margin-left:calc(var(--gutter) * -1)} .mat--a .cs-key{padding-left:var(--gutter)} .mat--a .mat-txt{grid-column:2} .mat--b{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} .mat--b .mat-txt{grid-column:1} .mat--b .mat-draw{grid-column:2;margin-right:calc(var(--gutter) * -1)} .mat--b .cs-key{padding-right:var(--gutter)} /* .mat--c is the full-bleed treatment, unused since the wood block came out. Kept so a third material can be added back without redesigning the layout. */ .mat--c{grid-template-columns:1fr} .mat--c .mat-draw{width:min(126%,1180px);margin-left:-13%;opacity:.9} /* the copy floats on glass over its own drawing */ .mat--c .mat-txt{margin-top:calc(var(--s-8) * -1);position:relative;z-index:2; max-width:46ch;padding:var(--s-6); background:var(--glass-sheen), var(--glass-tint); border:1px solid var(--glass-border);border-radius:var(--radius-lg); backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-edge), var(--glass-drop)} @media (prefers-reduced-transparency:reduce){ .mat--c .mat-txt{background:rgba(20,23,26,.97);backdrop-filter:none;-webkit-backdrop-filter:none} } /* --- the service index, grouped rather than one long list --------------- */ .stol-index{margin-top:var(--s-9);padding-top:var(--s-7);border-top:var(--border-solid) solid var(--text)} .idx{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7)} .idx h4{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:var(--tr-wider); color:var(--text-3);font-weight:var(--w-bold);margin-bottom:var(--s-4)} .idx ul{display:grid;gap:2px} /* The row nudges with transform, not padding: animating padding reflows the whole list on every hover. */ /* The row nudges with transform, never padding: animating padding reflows the whole list on every hover. Background sits on the li so the link can move inside it without dragging the fill along. */ .idx li{border-radius:var(--radius-md); transition:background var(--dur-fast) var(--ease-out)} .idx li:hover{background:rgba(255,255,255,.07)} .idx li a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); padding:13px 14px;font-size:var(--t-base);color:var(--text-2); transition:transform var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out)} .idx li a svg{width:15px;height:15px;opacity:0;flex:0 0 auto; transform:translateX(-8px); transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .idx li:hover a{transform:translateX(5px);color:var(--text)} .idx li:hover a svg{opacity:1;transform:translateX(0);color:#C9605C} @media (prefers-reduced-motion:reduce){ .idx li a,.idx li a svg{transition:none} .idx li:hover a{transform:none} .idx li:hover a svg{transform:none} } .stol-note{margin-top:var(--s-8);padding:var(--s-6) var(--s-7);border-radius:18px; background:linear-gradient(140deg,rgba(136,24,22,.22),rgba(136,24,22,.06)); border:1px solid rgba(180,67,63,.38); display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap} .stol-note svg{width:26px;height:26px;flex:0 0 auto;color:#C9605C} .stol-note p{margin:0;flex:1 1 320px;font-size:var(--t-md);color:var(--text-2);line-height:1.5} .stol-note b{color:var(--text)} .stol-note .btn{flex:0 0 auto} @media (max-width:1000px){ .mat--a,.mat--b{grid-template-columns:1fr} .mat--a .mat-draw,.mat--b .mat-draw{grid-column:1;grid-row:1;margin-inline:0} .mat--a .mat-txt,.mat--b .mat-txt{grid-column:1;grid-row:2} .mat--c .mat-draw{width:100%;margin-left:0} .mat--c .mat-txt{margin-top:var(--s-5)} .idx{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .idx{grid-template-columns:1fr} .stol-note{flex-direction:column;align-items:flex-start} .stol-note .btn{width:100%;justify-content:center} } /* ========================================================================== 8b. DODACI — one elevation, six layers The configurator is perspective, 3D and click-driven. This is deliberately the opposite register: a flat orthographic elevation, the drawing rather than the render, driven by scroll. It also carries venecijaneri and trakaste zavese, which the 3D scene has no model for. NOTE: this section must never get `overflow:hidden` the way .win and .stol do. Overflow on an ancestor turns it into a scroll container and silently kills `position:sticky` on .dod-stage. The warm light pool is clipped with `inset:0` on the pseudo-element instead. ========================================================================== */ .dod{position:relative;padding-block:var(--section-y);background:var(--void); border-bottom:var(--border-hair) solid var(--line)} /* the same warm interior light as the hero, pooled behind the drawing */ .dod::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 40% at 27% 34%,rgba(255,196,120,.10),rgba(14,17,19,0) 72%)} .dod-head{position:relative;max-width:34ch;margin-bottom:var(--s-9)} .dod-head h2{font-size:var(--t-3xl);line-height:.9} .dod-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .dod-grid{position:relative;display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(30px,5vw,84px);align-items:start} .dod-stage{position:sticky;top:calc(var(--header-h) + 34px); display:grid;justify-items:center} .dod-win{width:100%;max-width:452px;height:auto;overflow:visible} /* a drawing carries a title block, so this one does too */ .dod-block{margin-top:var(--s-5);display:inline-flex;align-items:baseline;gap:12px; padding:9px 16px;border:var(--border-hair) solid var(--line-2); border-radius:var(--radius-sm);font-size:var(--t-xs)} .dod-block span{text-transform:uppercase;letter-spacing:var(--tr-wider); color:var(--text-3);font-weight:var(--w-bold)} .dod-block b{color:var(--text);font-weight:var(--w-semi)} /* ---- the list. Rows are controls, so the active one takes the same red underline the top nav uses, rather than a coloured left border. ---- */ .dod-list{display:grid} /* the rule and the rhythm belong to the item, not the button, because roletne and komarnici carry a list of kinds underneath and that has to sit inside the same block rather than after its border */ .dod-item{border-top:var(--border-hair) solid var(--line);padding-block:var(--s-6)} .dod-item:first-child{border-top:none;padding-top:0} .dod-row{position:relative;display:block;width:100%;text-align:left} .dod-kinds{margin-top:var(--s-5);display:grid;gap:9px;max-width:48ch} .dod-kinds li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline; font-size:var(--t-sm);color:var(--text-3);line-height:1.5} .dod-kinds b{color:var(--text-2);font-weight:var(--w-semi);white-space:nowrap; font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--tr-wide)} .dod-name{display:inline-block;position:relative; font-family:var(--font-display);font-weight:var(--w-black); font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1; letter-spacing:var(--tr-display);text-transform:uppercase; color:var(--text-2);transition:color var(--dur-base) var(--ease-out)} .dod-name::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px; background:var(--red);transform:scaleX(0);transform-origin:left; transition:transform var(--dur-base) var(--ease-out)} .dod-say{display:block;margin-top:14px;max-width:48ch;font-size:var(--t-base); color:var(--text-3);line-height:1.55;transition:color var(--dur-base) var(--ease-out)} .dod-row:hover .dod-name{color:var(--text)} .dod-row[aria-pressed="true"] .dod-name{color:var(--text)} .dod-row[aria-pressed="true"] .dod-name::after{transform:scaleX(1)} .dod-row[aria-pressed="true"] .dod-say{color:var(--text-2)} /* ---- the elevation ---- */ .dod-win .dw-dim{fill:none;stroke:var(--alu);stroke-width:1;opacity:.5} .dod-win .dw-num{fill:var(--text-3);font-family:var(--font-body);font-size:12px; letter-spacing:.06em} .dod-win .dw-pane{fill:url(#dodPane)} .dod-win .dw-sheen{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8;stroke-linecap:round} .dod-win .dw-frame{fill:rgba(242,242,240,.13);fill-rule:evenodd; stroke:var(--alu);stroke-width:2} .dod-win .dw-sash{fill:rgba(242,242,240,.10);fill-rule:evenodd; stroke:var(--alu);stroke-width:1.4} .dod-win .dw-mull{fill:rgba(242,242,240,.13);stroke:var(--alu);stroke-width:1.2} .dod-win .dw-hand{fill:var(--alu)} .dod-win .dw-sill{fill:rgba(155,161,166,.22);stroke:var(--alu);stroke-width:1} .dod-win .dw-box{fill:rgba(242,242,240,.12);stroke:var(--alu);stroke-width:2} .dod-win .dw-boxline{fill:none;stroke:var(--alu);stroke-width:1;opacity:.45} .dod-win .dw-guide{fill:rgba(155,161,166,.30)} .dod-win .dw-slat{fill:rgba(226,229,229,.88)} .dod-win .dw-cass{fill:rgba(155,161,166,.38)} .dod-win .dw-mesh{fill:url(#dodMesh)} .dod-win .dw-meshfr{fill:none;stroke:var(--alu);stroke-width:2.4} .dod-win .dw-rail{fill:rgba(155,161,166,.42)} .dod-win .dw-cord{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1.2} .dod-win .dw-vslat{fill:rgba(203,208,211,.80)} .dod-win .dw-band{fill:rgba(231,227,219,.62)} .dod-win .dw-zeb{fill:rgba(233,231,227,.55)} .dod-win .dw-drip{fill:rgba(155,161,166,.45);stroke:var(--alu);stroke-width:1.4} .dod-win .dw-driplip{fill:rgba(155,161,166,.62)} .dod-win .dw-rain{fill:none;stroke:rgba(150,190,220,.55);stroke-width:2.4; stroke-linecap:round} /* ---- layer state. Each accessory moves on its own axis, because the axis is how the thing actually works: the roletna drops, the komarnik rolls across, slats and bands rotate shut, the okapnica comes out from under the sill. ---- */ .dod-win .ly{opacity:0;transition:opacity 200ms var(--ease-out)} .dod-stage[data-on="roletna"] .ly--roletna, .dod-stage[data-on="komarnik"] .ly--komarnik, .dod-stage[data-on="venecijaneri"] .ly--venecijaneri, .dod-stage[data-on="trakaste"] .ly--trakaste, .dod-stage[data-on="zebra"] .ly--zebra, .dod-stage[data-on="okapnica"] .ly--okapnica{opacity:1;transition-duration:300ms} /* every moving part turns about its own box, not the SVG origin */ .dod-win .dw-vslat,.dod-win .dw-band,.dod-win .dw-zeb{ transform-box:fill-box;transform-origin:center} .dod-win .ly-sill{transform-box:fill-box;transform-origin:top} .ly--roletna .ly-drop{transform:translateY(0);transition:transform 560ms var(--ease-out)} .dod-stage[data-on="roletna"] .ly--roletna .ly-drop{transform:translateY(276px)} .ly--komarnik .ly-slide{transform:translateX(-376px);transition:transform 520ms var(--ease-out)} .dod-stage[data-on="komarnik"] .ly--komarnik .ly-slide{transform:translateX(0)} .dod-win .dw-vslat{transform:scaleY(.12);transition:transform 340ms var(--ease-out)} .dod-stage[data-on="venecijaneri"] .dw-vslat{transform:scaleY(1); transition-delay:calc(var(--i) * 9ms)} .dod-win .dw-band{transform:scaleX(.14);transition:transform 340ms var(--ease-out)} .dod-stage[data-on="trakaste"] .dw-band{transform:scaleX(1); transition-delay:calc(var(--i) * 11ms)} /* zebra is the one two-beat move: the blind drops, then the bands close up */ .ly--zebra .ly-drop{transform:translateY(-412px);transition:transform 540ms var(--ease-out)} .dod-stage[data-on="zebra"] .ly--zebra .ly-drop{transform:translateY(0)} .dod-win .dw-zeb{transform:scaleY(1);transition:transform 300ms var(--ease-out)} .dod-stage[data-on="zebra"] .dw-zeb{transform:scaleY(2.05); transition-delay:calc(300ms + var(--i) * 8ms)} .ly--okapnica .ly-sill{transform:scaleY(0);transition:transform 380ms var(--ease-out)} .dod-stage[data-on="okapnica"] .ly--okapnica .ly-sill{transform:scaleY(1)} .dod-win .dw-rain{opacity:0;transform:translateY(-10px); transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)} .dod-stage[data-on="okapnica"] .dw-rain{opacity:1;transform:none;transition-delay:260ms} /* ---- the repair argument ---- */ .dod-fix{position:relative;margin-top:var(--s-10); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr); gap:clamp(24px,4vw,60px);align-items:center; padding:clamp(28px,4vw,54px);border-radius:var(--radius-xl); background:linear-gradient(150deg,var(--graphite),rgba(20,23,26,.55)); border:var(--border-hair) solid var(--line-2);box-shadow:var(--shadow-lg)} .dod-fix h3{font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-2xl);line-height:.93;letter-spacing:var(--tr-display); text-transform:uppercase;max-width:15ch} .dod-fix p{margin-top:var(--s-5);max-width:52ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .dod-fix .btn{margin-top:var(--s-6)} /* the sliding-komarnik story: jam, fix, glide. Transform-only. */ .dod-slide{width:100%;max-width:236px;height:auto;justify-self:end} .dod-slide .ds-frame{fill:none;stroke:var(--alu);stroke-width:2.5;opacity:.55} .dod-slide .ds-track{stroke:var(--alu);stroke-width:1.5;opacity:.35;stroke-dasharray:3 4} .dod-slide .ds-rim{fill:none;stroke:#C9CED2;stroke-width:2} .dod-slide .ds-roller{fill:#C9CED2} .dod-slide .ds-handle{fill:#C9CED2} .dod-slide .ds-fix{fill:none;stroke:var(--red);stroke-width:2;opacity:0} .dod-slide .ds-panel{animation:dsRun 7s infinite} .dod-slide .ds-fix{animation:dsSpark 7s infinite} @keyframes dsRun{ 0%{transform:translateX(0);animation-timing-function:ease-out} 6%{transform:translateX(16px);animation-timing-function:ease-in} 9%{transform:translateX(11px);animation-timing-function:ease-out} 14%{transform:translateX(24px);animation-timing-function:ease-in} 17%{transform:translateX(18px);animation-timing-function:ease-out} 22%{transform:translateX(26px)} 34%{transform:translateX(26px);animation-timing-function:ease-in-out} 54%{transform:translateX(100px);animation-timing-function:ease-in-out} 68%{transform:translateX(2px)} 74%{transform:translateX(2px);animation-timing-function:ease-in-out} 88%{transform:translateX(96px);animation-timing-function:ease-in-out} 100%{transform:translateX(0)} } @keyframes dsSpark{ 24%{opacity:0;transform:scale(.6)} 27%{opacity:.9;transform:scale(1)} 32%{opacity:0;transform:scale(1.5)} 100%{opacity:0} } .dod-slide .ds-fix{transform-origin:100px 28px} @media (prefers-reduced-motion:reduce){ .dod-slide .ds-panel,.dod-slide .ds-fix{animation:none} .dod-slide .ds-panel{transform:translateX(40px)} } /* ---- back to the configurator. Anchors first, so they still work with no script; the toggle is an upgrade layered on top in main.js. ---- */ .dod-back{margin-top:var(--s-8);display:flex;flex-wrap:wrap;align-items:center; gap:var(--s-5) var(--s-6);justify-content:space-between} .dod-back p{max-width:44ch;font-size:var(--t-base);color:var(--text-2);line-height:1.55} .dod-jumps{display:flex;flex-wrap:wrap;gap:8px} /* deliberately the same chip language as the configurator's own Dodaci row, so the link back reads visually and not only in words */ .dod-jump{position:relative;padding:10px 16px 10px 34px; border:1px solid var(--line-2);border-radius:var(--radius-pill); font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--text-2); transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)} .dod-jump::before{content:"";position:absolute;left:13px;top:50%; transform:translateY(-50%);width:12px;height:12px; border:1.5px solid var(--line-2);border-radius:3px; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)} .dod-jump:hover{color:var(--text);border-color:var(--alu);transform:translateY(-1px)} .dod-jump:hover::before{border-color:var(--alu);background:rgba(155,161,166,.28)} @media (max-width:1000px){ .dod-grid{grid-template-columns:1fr;gap:var(--s-6)} /* the drawing stays in view above the list it belongs to */ .dod-stage{top:calc(var(--header-h) + 14px);z-index:2; justify-items:start;padding-bottom:12px;background:var(--void)} .dod-stage::after{content:"";position:absolute;left:0;right:0;bottom:-24px; height:24px;pointer-events:none; background:linear-gradient(180deg,var(--void),rgba(14,17,19,0))} .dod-win{width:auto;max-width:none;height:min(44vh,360px)} .dod-block{margin-top:10px} .dod-fix{grid-template-columns:1fr} .dod-slide{justify-self:start;max-width:190px} } @media (max-width:640px){ .dod-row{padding-block:var(--s-5)} .dod-back{flex-direction:column;align-items:flex-start} .dod-fix .btn{width:100%;justify-content:center} } /* The layer swap is state, not decoration, so it survives reduced motion as an instant change rather than being removed. */ @media (prefers-reduced-motion:reduce){ .dod-win *,.dod-name,.dod-name::after,.dod-say,.dod-jump{ transition-duration:1ms !important;transition-delay:0ms !important} } /* ========================================================================== 9. KAKO IDE — the four steps, strung on a dimension line The sequence is the content, so the numerals are earned here. The line is the same measuring language as the configurator, drawn down the page. ========================================================================== */ .hop{position:relative;padding-block:var(--section-y);background:var(--void)} .hop-head{max-width:30ch;margin-bottom:var(--s-9)} .hop-head h2{font-size:var(--t-3xl);line-height:.9} .hop-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md);color:var(--text-2);line-height:1.55} .hop-track{position:relative;display:grid;gap:0} /* the dimension line itself, now graduated like a real tape. The ticks are a repeating gradient, so the whole scale costs one paint and no elements. */ .hop-rail{position:absolute;left:27px;top:14px;bottom:70px;width:2px; background:var(--line-2);border-radius:2px} .hop-rail::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:9px; pointer-events:none; background:repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 9px)} .hop-rail::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:16px; pointer-events:none; background:repeating-linear-gradient(180deg, var(--alu) 0 1px, transparent 1px 45px);opacity:.55} /* the readout rides the fill. translateY driven by a pixel value from JS, so nothing here animates a layout property. */ /* the readout rides ON the rail like a slider thumb, centred over the tape, so it can never wander into the text column beside it */ .hop-read{position:absolute;left:28px;top:8px;z-index:3;pointer-events:none; white-space:nowrap; transform:translate(-50%,var(--hop-px,0px)); padding:4px 11px;border-radius:var(--radius-pill); background:rgba(14,17,19,.82);border:1px solid var(--line-2); font-family:var(--font-body);font-size:var(--t-2xs);letter-spacing:var(--tr-wide); text-transform:uppercase;color:var(--text-3); transition:transform var(--dur-slow) var(--ease-out)} .hop-read b{font-family:var(--font-display);font-weight:var(--w-black); font-size:1rem;color:var(--alu);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .hop-read{transition-duration:1ms} } .hop-rail span{position:absolute;inset:0 0 auto 0;height:100%; background:linear-gradient(180deg,#fff,var(--alu));border-radius:2px; transform:scaleY(var(--hop-fill,0));transform-origin:top center; transition:transform var(--dur-slow) var(--ease-out)} @media (prefers-reduced-motion:reduce){.hop-rail span{transform:scaleY(1);transition:none}} .step2{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr); gap:clamp(20px,3vw,42px);padding-block:clamp(26px,3.4vw,44px)} /* tick + numeral sitting on the rail */ .step2-mark{position:relative;z-index:2;width:56px;height:56px;border-radius:50%; display:grid;place-items:center; background:var(--graphite);border:2px solid var(--line-2); font-family:var(--font-display);font-weight:var(--w-black);font-size:1.5rem; color:var(--text-3); transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow .6s var(--ease-out), transform .5s cubic-bezier(.34,1.65,.64,1)} .step2.is-on .step2-mark{background:#fff;border-color:#fff;color:var(--void); transform:scale(1.06);box-shadow:0 0 0 7px rgba(136,24,22,.18)} @media (prefers-reduced-motion:reduce){.step2.is-on .step2-mark{transform:none;box-shadow:none}} .step2-body{padding-top:6px} .step2-body h3{display:flex;align-items:center;gap:var(--s-4); font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1} .step2-body h3 svg{width:26px;height:26px;flex:0 0 auto;color:var(--text-3); transition:color var(--dur-base) var(--ease-out), opacity .35s var(--ease-out), transform .5s cubic-bezier(.34,1.65,.64,1)} /* Pre-stamp states live under .js only, so a page with dead scripts (or reduced motion, where every step turns on immediately) never hides its content. When the tape reaches a step, the tool stamps down. */ .js .step2:not(.is-on) .step2-body h3 svg{transform:rotate(-12deg) scale(.55);opacity:.35} .step2.is-on .step2-body h3 svg{color:#fff} .step2-body p{margin-top:12px;max-width:52ch;color:var(--text-2);line-height:1.6} .step2-free{display:inline-block;margin-top:14px;padding:5px 13px; border-radius:var(--radius-pill);font-size:var(--t-xs);font-weight:var(--w-semi); color:#E6C6C4;background:rgba(136,24,22,.28);border:1px solid rgba(180,67,63,.45); transform-origin:left center; transition:transform .55s cubic-bezier(.34,1.8,.5,1) .12s} .js .step2:not(.is-on) .step2-free{transform:rotate(-7deg) scale(.82)} .step2.is-on .step2-free{transform:rotate(-1.5deg)} @media (prefers-reduced-motion:reduce){ .js .step2 .step2-body h3 svg,.js .step2 .step2-free{transform:none;opacity:1} } .hop-close{margin-top:var(--s-8);padding:var(--s-7);border-radius:var(--radius-lg); display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap} .hop-close p{flex:1 1 300px;margin:0;font-size:var(--t-lg);line-height:1.4;color:var(--text)} .hop-close .btn{flex:0 0 auto} @media (max-width:640px){ .hop-rail{left:21px;bottom:110px} .hop-read{left:22px} .step2{grid-template-columns:44px minmax(0,1fr);gap:var(--s-5)} .step2-mark{width:44px;height:44px;font-size:1.2rem} .hop-close{flex-direction:column;align-items:flex-start} .hop-close .btn{width:100%;justify-content:center} } /* ========================================================================== 10. KAPIJE I OGRADE — leads on automation, because that is the decision the customer actually makes, and the motors in these photos are his own installs. ========================================================================== */ /* --- shared photo treatment ----------------------------------------------- Every photo is an Instagram screenshot, so each carries carousel arrows at the sides and dot indicators at the bottom. The inner scale pushes that chrome outside the frame. The grade pulls 28 mixed day/night snapshots toward one palette so they read as a set rather than a camera roll. Replace the sources with originals and only the scale needs revisiting. */ /* isolation:isolate makes each card its own stacking context, so the internal layers below (grade 2, sheen 3, caption 4, 3D button 5) stay inside the card instead of competing with the rest of the page. Without it those numbers live in the root stacking context and paint over anything above them. */ /* the slideshow count chip, injected only on figures carrying data-photos */ .gshot-count{position:absolute;top:12px;right:12px;z-index:4; padding:4px 10px;border-radius:var(--radius-pill); background:rgba(14,17,19,.72);border:1px solid rgba(255,255,255,.14); font-size:var(--t-2xs);font-weight:var(--w-semi);color:var(--text-2); pointer-events:none} .gshot{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg); background:var(--graphite);box-shadow:var(--glass-drop)} /* Grade corrected per the elevation audit. The old values (brightness .86 over a 72%-black bottom gradient starting at 42%) turned night shots of anthracite gates into near-black slabs, which spent the one asset a competitor cannot fake in order to buy palette cohesion. Cohesion was the right idea; the amounts were wrong. The scrim now starts lower and only darkens behind the caption that actually needs it. */ /* The scale(1.14) crop that used to live here hid Instagram carousel arrows baked into the old screenshots. The photos are original media now (gate-01-01 and gate-02-04 both inspected: clean frames), so the full picture shows. */ .gshot img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.8) contrast(1.05) brightness(.95); transition:filter 250ms var(--ease-out),transform 600ms var(--ease-out)} /* De-saturation becomes the interaction: the page is graphite, his work is in colour, and the hover is what says so. */ .gshot:hover img,.gshot:focus-within img{filter:none;transform:scale(1.03)} .gshot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(155deg,rgba(58,78,104,.24),rgba(255,184,112,.08) 70%); mix-blend-mode:overlay; transition:opacity 250ms var(--ease-out)} .gshot:hover::before,.gshot:focus-within::before{opacity:0} .gshot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(180deg,rgba(14,17,19,0) 60%,rgba(14,17,19,.55) 100%)} @media (prefers-reduced-motion:reduce){ .gshot img{transition-duration:1ms} .gshot:hover img,.gshot:focus-within img{transform:none} } .gshot figcaption{position:absolute;left:16px;right:16px;bottom:13px;z-index:4; font-size:var(--t-sm);color:var(--text);font-weight:var(--w-semi); text-shadow:0 1px 6px rgba(0,0,0,.7)} .gshot figcaption em{display:block;font-style:normal;font-weight:var(--w-regular); font-size:var(--t-xs);color:var(--text-2);margin-top:2px} .kap{position:relative;padding-block:var(--section-y);background:var(--ground); border-top:var(--border-hair) solid var(--line);overflow:hidden} .kap-head{max-width:32ch;margin-bottom:var(--s-8)} .kap-head h2{font-size:var(--t-3xl);line-height:.9} .kap-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} /* the automation lead: one large photo, copy beside it */ .kap-lead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(24px,4vw,64px);align-items:center} .kap-lead .gshot{aspect-ratio:4/3} .kap-drive{display:grid;gap:0;margin-top:var(--s-6);position:relative} .kd-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5); align-items:baseline;padding:14px 0;border:0;border-top:var(--border-hair) solid var(--line); background:none;font:inherit;text-align:left;color:inherit;cursor:pointer; border-radius:0;transition:transform .2s ease} .kd-row:hover{transform:translateX(5px)} .kd-row:focus-visible{outline:2px solid var(--red);outline-offset:2px} .kap-drive b{font-family:var(--font-display);font-weight:var(--w-black); font-size:1.15rem;min-width:5.4em;transition:color .2s} .kd-row:hover b,.kd-row:focus b{color:var(--red-lift)} .kap-drive span{font-size:var(--t-sm);color:var(--text-2);line-height:1.5} /* hovering a kind floats its photo over the lead image to the left */ .kd-preview{position:absolute;left:-292px;top:0;width:264px;aspect-ratio:4/5; margin:0;border-radius:var(--radius-lg);overflow:hidden; border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 55px rgba(0,0,0,.55); opacity:0;transform:scale(.9) rotate(-2deg);pointer-events:none; transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1);z-index:6} .kd-preview img{width:100%;height:100%;object-fit:cover;display:block} .kap-drive.is-peek .kd-preview{opacity:1;transform:scale(1) rotate(0deg)} @media (max-width:900px){ .kd-preview{display:none} } @media (prefers-reduced-motion:reduce){ .kd-row,.kd-row:hover{transition:none;transform:none} .kd-preview{transition:none} } /* the range: a deliberately uneven mosaic, not a row of equal cards */ .kap-mosaic{margin-top:var(--s-9);display:grid;gap:var(--s-4); grid-template-columns:repeat(6,1fr)} /* eight cards in three ALIGNED rows: two wide, three tall, three tall. (The old 4-span + orphan bottom row read as random; owner asked for everything aligned, 2026-08-31.) */ .kap-mosaic .gshot:nth-child(1){grid-column:span 3;aspect-ratio:3/2} .kap-mosaic .gshot:nth-child(2){grid-column:span 3;aspect-ratio:3/2} .kap-mosaic .gshot:nth-child(n+3){grid-column:span 2;aspect-ratio:4/5} .kap-craft{margin-top:var(--s-8);display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px);align-items:center} .kap-craft .gshot{aspect-ratio:5/4} .kap-craft h3{font-size:var(--t-2xl);line-height:.95} .kap-craft p{margin-top:var(--s-4);max-width:44ch;color:var(--text-2);line-height:1.6} /* --- "view in 3D" affordance on a photo ---------------------------------- */ .gshot .g3d{position:absolute;right:14px;top:14px;z-index:5; display:inline-flex;align-items:center;gap:7px; padding:8px 13px;border-radius:var(--radius-pill); font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--text); background:var(--glass-sheen), rgba(16,19,22,.55); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.4); opacity:0;transform:translateY(-5px); transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out)} .gshot .g3d svg{width:14px;height:14px} .gshot:hover .g3d,.gshot .g3d:focus-visible{opacity:1;transform:translateY(0)} .gshot .g3d:hover{background:var(--glass-sheen), rgba(136,24,22,.7)} @media (hover:none){.gshot .g3d{opacity:1;transform:none}} @media (prefers-reduced-transparency:reduce){ .gshot .g3d{background:rgba(20,23,26,.95);backdrop-filter:none;-webkit-backdrop-filter:none} } /* --- the 3D sub-window ---------------------------------------------------- */ #g3dModal{position:fixed;inset:0;z-index:var(--z-overlay);display:none; align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)} #g3dModal[open],#g3dModal.is-open{display:flex} #g3dModal .g3d-scrim{position:absolute;inset:0;background:rgba(8,10,12,.78); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} #g3dModal .g3d-win{position:relative;z-index:2;width:min(1080px,100%); max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden; padding:0;border-radius:var(--radius-xl)} #g3dModal .g3d-bar{display:flex;align-items:center;gap:var(--s-4); padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)} #g3dModal .g3d-bar h3{font-size:1.35rem;line-height:1;flex:1 1 auto} #g3dModal .g3d-close{width:38px;height:38px;flex:0 0 auto;border-radius:50%; display:grid;place-items:center;color:var(--text-2); border:1px solid rgba(255,255,255,.16); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} #g3dModal .g3d-close:hover{background:rgba(255,255,255,.1);color:#fff} #g3dModal .g3d-close svg{width:16px;height:16px} #g3dModal .g3d-stage{position:relative;flex:1 1 auto;min-height:min(56vh,460px); cursor:grab;touch-action:pan-y; background:radial-gradient(120% 90% at 50% 40%,#1B2129 0%,#12161A 60%,#0E1113 100%)} #g3dModal .g3d-stage:active{cursor:grabbing} #g3dModal .g3d-stage canvas{position:absolute;inset:0;width:100%;height:100%} #g3dModal .g3d-hint{position:absolute;left:14px;bottom:12px;z-index:2; font-size:var(--t-2xs);color:var(--text-3);pointer-events:none} #g3dModal .g3d-foot{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap; padding:14px 18px;border-top:1px solid rgba(255,255,255,.1)} #g3dModal .g3d-foot p{margin:0;flex:1 1 240px;font-size:var(--t-sm);color:var(--text-3)} body.g3d-open{overflow:hidden} @media (max-width:640px){ #g3dModal .g3d-bar h3{font-size:1.1rem} #g3dModal .g3d-foot .btn{width:100%;justify-content:center} } .kap-note{margin-top:var(--s-8);padding:var(--s-6) var(--s-7); display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap} .kap-note svg{width:26px;height:26px;flex:0 0 auto;color:#C9605C} .kap-note p{flex:1 1 320px;margin:0;font-size:var(--t-md);color:var(--text-2);line-height:1.5} .kap-note b{color:var(--text)} .kap-note .btn{flex:0 0 auto} @media (max-width:1000px){ .kap-lead,.kap-craft{grid-template-columns:1fr} .kap-mosaic{grid-template-columns:repeat(4,1fr)} .kap-mosaic .gshot:nth-child(1),.kap-mosaic .gshot:nth-child(2){grid-column:span 4} .kap-mosaic .gshot:nth-child(n+3){grid-column:span 2;aspect-ratio:1/1} } @media (max-width:600px){ .kap-mosaic{grid-template-columns:1fr} .kap-mosaic .gshot{grid-column:span 1 !important;aspect-ratio:4/3 !important} .kap-note{flex-direction:column;align-items:flex-start} .kap-note .btn{width:100%;justify-content:center} } /* -------------------------------------------------------------------------- PHOTO LIGHTBOX — the uncropped original The card crops each shot to hide the Instagram chrome; this is where the whole picture lives, so the image is NOT scaled here. -------------------------------------------------------------------------- */ /* sits under the caption (4) and the 3D control (5) so both still take clicks */ .gshot-zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%; background:none;border:none;cursor:zoom-in} .gshot-zoom-mark{position:absolute;left:14px;top:14px;width:34px;height:34px; display:grid;place-items:center;border-radius:50%; background:var(--glass-sheen), rgba(20,23,26,.6); border:1px solid rgba(255,255,255,.22);color:var(--text); opacity:0;transform:translateY(-6px); transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .gshot-zoom-mark svg{width:15px;height:15px} .gshot:hover .gshot-zoom-mark,.gshot-zoom:focus-visible .gshot-zoom-mark{ opacity:1;transform:translateY(0)} @media (hover:none){ .gshot-zoom-mark{opacity:1;transform:none} } .lb{position:fixed;inset:0;z-index:var(--z-overlay);display:none; align-items:center;justify-content:center;padding:clamp(14px,3vw,44px)} .lb.is-open{display:flex} .lb-scrim{position:absolute;inset:0;background:rgba(6,8,10,.9); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .lb-fig{position:relative;z-index:2;max-width:min(1180px,100%);max-height:100%; display:flex;flex-direction:column;gap:var(--s-4);align-items:center} /* The crop machinery that used to live here (7% trim + the "Cela slika" toggle) hid Instagram carousel arrows baked into the old screenshots. The photos are original media now, so the lightbox always shows the whole frame. */ .lb-shot{display:flex;overflow:hidden;border-radius:var(--radius-md); box-shadow:var(--shadow-lg);max-height:calc(100dvh - 150px)} .lb-fig img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto; object-fit:contain} @media (prefers-reduced-motion:reduce){ .lb-fig img{transition-duration:1ms} } .lb-fig figcaption{font-size:var(--t-sm);color:var(--text-2);text-align:center; max-width:60ch;line-height:1.5} .lb-close{position:absolute;top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);z-index:3; width:44px;height:44px;border-radius:50%;display:grid;place-items:center; color:var(--text-2);background:rgba(20,23,26,.7);border:1px solid rgba(255,255,255,.16); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .lb-close:hover{background:rgba(40,45,50,.9);color:var(--text)} .lb-close svg{width:17px;height:17px} .lb-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%); width:48px;height:48px;border-radius:50%;display:grid;place-items:center; color:var(--text-2);background:rgba(20,23,26,.7);border:1px solid rgba(255,255,255,.16); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .lb-nav:hover{background:rgba(40,45,50,.9);color:var(--text)} .lb-nav svg{width:19px;height:19px} .lb-prev{left:clamp(10px,2.4vw,26px)} .lb-next{right:clamp(10px,2.4vw,26px)} .lb-dots{position:absolute;z-index:3;left:50%;bottom:clamp(14px,3vw,26px); transform:translateX(-50%);display:flex;gap:9px} .lb-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3); border:none;transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)} .lb-dot.is-on{background:var(--text);transform:scale(1.25)} body.lb-open{overflow:hidden} @media (max-width:600px){ .lb-nav{width:42px;height:42px} .lb-fig img{max-height:calc(100dvh - 170px)} } @media (prefers-reduced-motion:reduce){ .gshot-zoom-mark{transition-duration:1ms} } @media (prefers-reduced-transparency:reduce){ .lb-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,8,10,.97)} .gshot-zoom-mark{background:rgba(20,23,26,.95)} } /* -------------------------------------------------------------------------- GELENDERI, the extra railings row -------------------------------------------------------------------------- */ /* two cards since the third (balcony railing seen from below) lost its photo with the old screenshot set; the LED terrace gets the wider half */ .kap-rails{margin-top:var(--s-7);display:grid; grid-template-columns:3fr 2fr;gap:14px} /* one card since the ornament gate moved to the mosaic: the LED gelender gets the full width as the row's closing statement */ .kap-rails .gshot{grid-column:1/-1;aspect-ratio:21/9} @media (max-width:760px){ .kap-rails{grid-template-columns:1fr} .kap-rails .gshot{aspect-ratio:16/10} } /* ========================================================================== 10e. GALERIJA ========================================================================== */ .gal{position:relative;padding-block:var(--section-y);background:var(--ground); border-top:var(--border-hair) solid var(--line)} .gal-head{max-width:34ch;margin-bottom:var(--s-7)} .gal-head h2{font-size:var(--t-3xl);line-height:.9} .gal-head p{margin-top:var(--s-5);max-width:52ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .gal-grid .gshot{aspect-ratio:4/3} .gal-grid .gshot:first-child{aspect-ratio:4/3} .gal-more{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-4); flex-wrap:wrap;font-size:var(--t-sm);color:var(--text-3);line-height:1.55} @media (max-width:820px){ .gal-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .gal-grid{grid-template-columns:1fr} } /* ========================================================================== 10e2. OGRADE ZA STEPENICE — "kroz vrata" The dark ground parts like a doorway into the lit house. The panels are painted with var(--ground), so they ARE the page and stay seamless while the tonal zones animate. They default OPEN here; only GSAP ever closes them, so no-JS and reduced-motion visitors simply see the photo. ========================================================================== */ .stairs{position:relative;padding-block:var(--section-y) 0;background:var(--ground); border-top:var(--border-hair) solid var(--line)} .stairs-head{max-width:44ch;margin-bottom:var(--s-7)} .stairs-head h2{font-size:var(--t-3xl);line-height:.9} .stairs-head p{margin-top:var(--s-5);max-width:54ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} /* The 3D railing stage: a lit interior for the balustrade to live in. The fallback photo fills the same frame when WebGL is unavailable. */ .rail-wrap{max-width:var(--measure-max);margin-inline:auto; padding-inline:var(--gutter);margin-bottom:var(--s-7)} .rail-stage{position:relative;height:min(74vh,780px);overflow:hidden; border-radius:var(--radius-lg);cursor:grab;touch-action:pan-y; background: radial-gradient(90% 70% at 68% 20%,rgba(255,193,130,.24) 0%,rgba(255,180,110,0) 55%), linear-gradient(180deg,#241F19 0%,#2E2820 44%,#1C1816 100%); box-shadow:0 30px 90px rgba(0,0,0,.5)} .rail-stage:active{cursor:grabbing} .rail-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2} .rail-fallback{position:absolute;inset:0;margin:0;border-radius:0} .rail-stage.rail3d-on .rail-fallback{display:none} .rail-hint{z-index:3} .rail-stage.touched .rail-hint{opacity:0} .stairs-body{padding-block:var(--s-8) var(--section-y);display:grid;gap:var(--s-7)} .stairs-copy{max-width:56ch} .stairs-copy h3{font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-xl);line-height:.95;text-transform:uppercase} .stairs-copy p{margin-top:var(--s-4);color:var(--text-2);line-height:1.6} .stairs-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .stairs-details .gshot{aspect-ratio:1/1} @media (max-width:820px){ .rail-stage{height:min(56vh,520px)} .stairs-details{grid-template-columns:1fr 1fr} .stairs-details .gshot:last-child{grid-column:1/-1;aspect-ratio:16/10} } @media (max-width:520px){ .stairs-details{grid-template-columns:1fr} .stairs-details .gshot:last-child{aspect-ratio:1/1} } /* ========================================================================== 10f. PODRUČJE RADA ========================================================================== */ .area{position:relative;padding-block:var(--section-y);background:var(--void); border-top:var(--border-hair) solid var(--line)} .area-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.7fr); gap:clamp(26px,4vw,60px);align-items:center} /* the free-visit radius as a drafting instrument */ .area-map svg{width:100%;height:auto;display:block} .am-ring{fill:none;stroke:var(--alu);stroke-width:1;opacity:.5; transform:rotate(-90deg);transform-origin:center} .am-ring--main{stroke:var(--red);stroke-width:1.8;opacity:.95} .am-axis{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 5} .am-pin{fill:var(--red)} .am-label{fill:var(--text);font-family:var(--font-body);font-size:12px; font-weight:var(--w-semi)} .am-km{fill:var(--text-3);font-family:var(--font-body);font-size:10px; font-variant-numeric:tabular-nums} .am-km--main{fill:var(--text);font-weight:var(--w-bold)} .am-sweep path{fill:rgba(136,24,22,.14)} @media (prefers-reduced-motion:no-preference){ .am-sweep{animation:amsweep 14s linear infinite;transform-origin:180px 180px} } @keyframes amsweep{to{transform:rotate(360deg)}} .area-in h2{font-size:var(--t-2xl);line-height:.95;max-width:14ch} .area-in p{margin-top:var(--s-5);max-width:52ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .area-in .btn{margin-top:var(--s-6)} .area-facts{display:grid;gap:0} .area-facts div{padding:var(--s-5) 0;border-top:var(--border-hair) solid var(--line)} .area-facts div:first-child{border-top:none;padding-top:0} .area-facts dt{display:flex;align-items:center;gap:10px; font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:var(--tr-wider); color:var(--text-3);font-weight:var(--w-bold)} .area-facts dt svg{width:15px;height:15px;color:var(--alu)} .area-facts dd{margin-top:8px;font-family:var(--font-display);font-weight:var(--w-bold); font-size:1.4rem;line-height:1.05;letter-spacing:var(--tr-display);text-transform:uppercase} @media (max-width:820px){ .area-in{grid-template-columns:1fr} .area-map{max-width:340px;margin-inline:auto} } /* ========================================================================== 10b. PLOČICE I KUPATILA — a bill of works Dotted leaders and a running list, because the question this category gets asked is "what is actually included", and a ledger answers that shape of question better than cards do. ========================================================================== */ .led{position:relative;padding-block:var(--section-y);background:var(--void); border-top:var(--border-hair) solid var(--line)} .led-head{max-width:36ch;margin-bottom:var(--s-8)} .led-head h2{font-size:var(--t-3xl);line-height:.9} .led-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .led-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,72px);align-items:start} .led-list{display:grid} .led-list li{display:flex;align-items:baseline;gap:14px;padding-block:var(--s-5); border-bottom:var(--border-hair) solid var(--line)} .led-list li:last-child{border-bottom:none} .led-list span{font-family:var(--font-display);font-weight:var(--w-bold); font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.05;letter-spacing:var(--tr-display); text-transform:uppercase;color:var(--text)} /* the leader rule that makes it read as a ledger line rather than a list item */ .led-list i{flex:1 1 auto;height:1px; background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 8px)} .led-side{display:grid;gap:var(--s-5);justify-items:start} .led-draw{width:100%;max-width:230px;height:auto} .led-draw rect{fill:none;stroke:var(--line-2);stroke-width:1.4} .led-draw .led-accent{fill:rgba(155,161,166,.16);stroke:var(--alu)} /* tiles lay themselves in a diagonal wave, rest, then the wall starts over; each tile drops a hair and seats. Transform and opacity only. */ .led-draw .lt{opacity:0;transform-box:fill-box;transform-origin:center; animation:ltLay 9s infinite} @keyframes ltLay{ 0%{opacity:0;transform:translateY(7px) scale(.94)} 5%{opacity:1;transform:translateY(0) scale(1)} 82%{opacity:1;transform:none} 90%,100%{opacity:0;transform:none} } @media (prefers-reduced-motion:reduce){ .led-draw .lt{animation:none;opacity:1} } .led-side p{font-size:var(--t-base);color:var(--text-2);line-height:1.55;max-width:38ch} .led-side p b{color:var(--text)} @media (max-width:900px){ .led-grid{grid-template-columns:1fr} } /* ========================================================================== 10c. ELEKTRO — the shortest section on the page, on purpose ========================================================================== */ .volt{position:relative;padding-block:var(--section-y);background:var(--ground); border-top:var(--border-hair) solid var(--line)} .volt-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,64px); align-items:center} .volt-in h2{font-size:var(--t-2xl);line-height:.95;max-width:16ch} .volt-in p{margin-top:var(--s-5);max-width:54ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .volt-in .btn{margin-top:var(--s-6)} .volt-draw{width:clamp(88px,10vw,116px);height:auto} /* the room is DARK until the visitor flips the switch, then it lights BRIGHTER than the rest of the page (owner's call 2026-08-31). The veil only drops once JS arms the switch, so a no-script page is never stuck dim, and the switch itself always stays above the darkness. */ .volt::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:#04060A;opacity:0;transition:opacity .7s ease} .volt.is-armed::before{opacity:.55} .volt.is-live::before{opacity:0} /* the light is LED, not a warm bulb (owner's call): cool white wash */ .volt::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:radial-gradient(58% 74% at 74% 26%,rgba(214,232,255,.15),transparent 72%); opacity:0;transition:opacity .9s ease} .volt.is-live::after{opacity:1} .volt-in,.volt-shots{transition:filter .8s ease} .volt.is-live .volt-in,.volt.is-live .volt-shots{filter:brightness(1.15)} /* the switch: press, and the current flows */ .volt-switch{justify-self:end;display:flex;flex-direction:column;align-items:center; gap:6px;background:none;border:0;padding:10px;cursor:pointer;font:inherit; color:var(--text-3);border-radius:18px;transition:color .3s; position:relative;z-index:6} .volt-switch:hover{color:var(--text-2)} .volt-switch:focus-visible{outline:2px solid var(--red);outline-offset:3px} .volt-cue{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .volt.is-live .volt-switch{color:var(--text-2)} @media (max-width:760px){ .volt-in{grid-template-columns:1fr} .volt-switch{justify-self:start} .volt-draw{width:110px} } /* ========================================================================== 10d. CENE — method, not a price list ========================================================================== */ .price{position:relative;padding-block:var(--section-y);background:var(--void); border-top:var(--border-hair) solid var(--line)} .price-head{max-width:34ch;margin-bottom:var(--s-8)} .price-head h2{font-size:var(--t-3xl);line-height:.9} .price-head p{margin-top:var(--s-5);max-width:58ch;font-size:var(--t-md); color:var(--text-2);line-height:1.55} .price-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--line);border:var(--border-hair) solid var(--line); border-radius:var(--radius-lg);overflow:hidden} .price-step{background:var(--ground);padding:var(--s-6)} .price-step b{display:block;font-family:var(--font-display);font-weight:var(--w-black); font-size:1.35rem;line-height:1;letter-spacing:var(--tr-display);text-transform:uppercase} .price-step span{display:block;margin-top:10px;font-size:var(--t-sm); color:var(--text-2);line-height:1.5} @media (max-width:760px){ .price-flow{grid-template-columns:1fr} } /* -------------------------------------------------------------------------- UNCONFIRMED CONTENT MARKER SADRZAJ-PODACI.md specifies that anything not yet confirmed by the owner is marked data-placeholder and rendered with a visible Nepotvrđeno tag. This is that mechanism. Every block wearing it must be filled in or deleted before the site goes live. -------------------------------------------------------------------------- */ [data-placeholder="true"]{position:relative} .price-note{margin-top:var(--s-6);padding:var(--s-6) var(--s-7); display:flex;gap:var(--s-5);align-items:flex-start;flex-wrap:wrap} .price-note p{margin:0;flex:1 1 300px;font-size:var(--t-sm); color:var(--text-2);line-height:1.55} .tag-unconfirmed{flex:0 0 auto;display:inline-flex;align-items:center; padding:5px 11px;border-radius:var(--radius-pill); border:1px solid rgba(255,196,120,.5);color:var(--warm); font-size:var(--t-2xs);font-weight:var(--w-bold); letter-spacing:var(--tr-wider);text-transform:uppercase} /* ========================================================================== 11. KONTAKT — the close. The brief requires the call to repeat at the end of the page, and the visitor who reaches here has already read everything, so this asks plainly rather than selling again. ========================================================================== */ .close{position:relative;padding-block:clamp(72px,9vw,132px);background:var(--ground); overflow:hidden;border-top:var(--border-hair) solid var(--line)} /* the lockup as a watermark, bleeding off the corner like a maker's stamp */ .close-mark{position:absolute;right:8%;bottom:7%;width:min(380px,26vw); opacity:.22;pointer-events:none;user-select:none;transform:rotate(-2deg); filter:drop-shadow(0 0 34px rgba(136,24,22,.3))} /* the same warm window light as the hero, so the page ends where it began */ .close::before{content:"";position:absolute;left:50%;top:-30%; width:min(1100px,130%);aspect-ratio:1;transform:translateX(-50%);pointer-events:none; background:radial-gradient(circle,rgba(255,184,112,.10) 0%,rgba(20,23,26,0) 66%)} .close-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px);align-items:start} .close-say h2{font-size:var(--t-3xl);line-height:.9;max-width:14ch} .close-say p{margin-top:var(--s-5);max-width:46ch;font-size:var(--t-md); color:var(--text-2);line-height:1.6} .close-act{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:12px} /* contact details as a plain readable block, not a card grid */ .close-card{padding:var(--s-7)} .close-list{display:grid;gap:0} .close-list div{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5); align-items:baseline;padding:15px 0;border-top:var(--border-hair) solid rgba(255,255,255,.1)} .close-list div:first-child{border-top:none} .close-list dt{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:var(--tr-wider); color:var(--text-3);font-weight:var(--w-bold);min-width:6.5em} .close-list dd{font-size:var(--t-base);color:var(--text)} .close-list dd a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px; transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .close-list dd a:hover{border-color:#C9605C;color:#fff} /* the only outbound link on the page: icon plus handle, rule under the text only, so the mark does not sit on a stray underline */ .close-list dd a.ig-link{display:inline-flex;align-items:center;gap:9px;border-bottom:none} .ig-link svg{width:18px;height:18px;flex:0 0 auto;color:var(--text-2); transition:color var(--dur-fast) var(--ease-out)} .ig-link span{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px; transition:border-color var(--dur-fast) var(--ease-out)} .ig-link:hover svg{color:#C9605C} .ig-link:hover span{border-color:#C9605C} .close-list .big{font-family:var(--font-display);font-weight:var(--w-black); font-size:1.9rem;line-height:1;letter-spacing:-.01em} .colophon{padding-block:var(--s-6);border-top:var(--border-hair) solid var(--line); display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between; font-size:var(--t-xs);color:var(--text-3);line-height:1.6} @media (max-width:900px){ .close-in{grid-template-columns:1fr} .close-card{padding:var(--s-6)} } @media (max-width:600px){ .close-act .btn{width:100%;justify-content:center} .close-list div{grid-template-columns:1fr;gap:4px} .close-list dt{min-width:0} } /* 11. NEXT-UP STUB -------------------------------------------------------- */ .next{padding-block:var(--section-y);border-top:var(--border-hair) solid var(--line)} .next h2{font-size:var(--t-2xl)} .next p{margin-top:12px;color:var(--text-2);max-width:64ch} .next ol{margin-top:var(--s-6);display:grid;gap:1px;background:var(--line);border:var(--border-hair) solid var(--line)} .next li{background:var(--ground);padding:16px 20px;display:flex;gap:16px;align-items:baseline} .next li span{font-family:var(--font-display);font-weight:var(--w-black);font-size:1.1rem;color:var(--red);min-width:28px} .next li b{font-weight:var(--w-semi)} .next li i{font-style:normal;color:var(--text-3);font-size:var(--t-sm);margin-left:auto} /* 8. REVEAL --------------------------------------------------------------- */ .js [data-reveal]{opacity:0;transform:translateY(18px)} .js.reveal-all [data-reveal],.js [data-reveal].in{opacity:1;transform:none; transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)} @media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}} /* 9. RESPONSIVE ----------------------------------------------------------- */ /* .topnav and the Meni button swap at 1100px, up with the masthead rules */ @media (max-width:900px){ .hero-row{flex-direction:column;align-items:flex-start;gap:var(--s-5)} .maker{gap:var(--s-4)} .maker-face{width:104px;height:104px} } @media (max-width:600px){ .hero-actions .btn{width:100%;justify-content:center} /* the number is already in the sticky header; repeating it here forces the label to wrap onto two lines at 375px */ .hero-actions .btn--action .num{display:none} .spec{display:grid;grid-template-columns:1fr 1fr;gap:0} .spec div{padding:12px 16px 12px 0;margin-right:0;border-right:var(--border-hair) solid var(--line-2);border-bottom:var(--border-hair) solid var(--line-2)} .spec div:nth-child(2n){border-right:none;padding-left:16px} .spec div:nth-last-child(-n+2){border-bottom:none} .spec dd{font-size:1.4rem} } /* ========================================================================== PRE I POSLE — swipe-the-line comparisons (owner's request 2026-08-31). The range input lies invisibly over the whole frame: it drags with mouse and touch and moves with arrow keys. With no script the clip stays at the 50% written here and both halves simply show. ========================================================================== */ .ba{position:relative;padding-block:var(--section-y);background:var(--ground)} .ba-head{max-width:34ch;margin-bottom:var(--s-7)} .ba-head h2{font-size:var(--t-3xl);line-height:.9} .ba-head p{margin-top:var(--s-5);max-width:52ch;font-size:var(--t-md);color:var(--text-2)} .ba-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .ba-frame{margin:0} .ba-stage{position:relative;overflow:hidden;border-radius:var(--radius-lg); aspect-ratio:4/5;isolation:isolate;background:#0F1214} .ba-stage img{width:100%;height:100%;object-fit:cover;display:block} .ba-after{position:absolute;inset:0} .ba-beforewrap{position:absolute;inset:0;clip-path:inset(0 50% 0 0)} .ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px; background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.28);pointer-events:none} .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:40px;height:40px;border-radius:999px;background:var(--red); box-shadow:0 8px 22px rgba(0,0,0,.5)} .ba-knob::before,.ba-knob::after{content:"";position:absolute;top:50%;margin-top:-5px; width:0;height:0;border-block:5px solid transparent} .ba-knob::before{left:9px;border-right:6px solid #fff} .ba-knob::after{right:9px;border-left:6px solid #fff} .ba-tag{position:absolute;top:12px;z-index:2;font-size:.72rem;font-weight:600; letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px; background:rgba(10,12,14,.6);color:var(--text-2)} .ba-tag--pre{left:12px} .ba-tag--posle{right:12px;background:var(--red);color:#fff} /* the range stays for keyboard and assistive tech; POINTER drags are handled on the stage itself in main.js (native range thumbs proved unreliable to grab under an invisible full-bleed input) */ .ba-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0; opacity:0;-webkit-appearance:none;appearance:none; background:transparent;pointer-events:none} .ba-stage{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none} .ba-stage img{-webkit-user-drag:none;user-drag:none} .ba-stage:has(.ba-range:focus-visible){outline:2px solid var(--red);outline-offset:3px} .ba-frame figcaption{padding:10px 4px 0;font-weight:600} .ba-frame figcaption em{display:block;font-style:normal;font-weight:500; font-size:.88em;color:var(--text-3)} @media (max-width:1100px){ .ba-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .ba-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto} } /* photo rails for Kupatila and Elektro: same .gshot component the whole page uses, so hover reveal, tilt, slideshows and the lightbox come free */ .led-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; margin-top:var(--s-8)} .led-shots .gshot{aspect-ratio:4/5} .volt-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; margin-top:var(--s-7)} .volt-shots .gshot{aspect-ratio:4/3} @media (max-width:1000px){ .led-shots{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .led-shots{grid-template-columns:1fr} } @media (max-width:700px){ .volt-shots{grid-template-columns:1fr} } /* ========================================================================== KONTAKT — the ten-second message composer + a quiet ping on the call CTA ========================================================================== */ .compose{margin-top:var(--s-7);padding:26px 26px 22px;border-radius:var(--radius-lg)} .compose-head{display:flex;align-items:baseline;justify-content:space-between; gap:16px;flex-wrap:wrap;margin-bottom:16px} .compose-head h3{font-size:var(--t-xl);line-height:1} .compose-head p{color:var(--text-2);max-width:46ch} .compose-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .chip{appearance:none;-webkit-appearance:none;border:var(--border-hair) solid var(--line-2); background:transparent;color:var(--text-2);padding:8px 15px;border-radius:999px; font:inherit;font-size:.9rem;font-weight:600;cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.3,1),color .18s, border-color .18s,background-color .18s} .chip:hover{transform:translateY(-1px);color:var(--text);border-color:var(--text-3)} .chip:active{transform:translateY(0)} .chip.is-on{background:var(--red);border-color:var(--red);color:#fff} .chip:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* the WhatsApp-staged draft: real name and number up top, the visitor's own message in the bubble, the real clock. The green lives ONLY inside this component; it is the target app's color, quoted like the Instagram glyph, not a second page accent. */ .chat{margin-top:4px;max-width:560px;border-radius:16px;overflow:hidden; border:var(--border-hair) solid var(--line-2);background:#0B141A} .chat-top{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#202C33} .chat-ava{width:38px;height:38px;border-radius:50%;background:#F4F4F1; display:grid;place-items:center;overflow:hidden;flex:0 0 auto} .chat-ava img{width:68%;height:auto} .chat-who b{display:block;color:#E9EDEF;font-size:.95rem;line-height:1.25} .chat-who span{color:#8696A0;font-size:.76rem} .chat-body{display:flex;justify-content:flex-end;min-height:96px; padding:18px 14px 14px;background: radial-gradient(rgba(255,255,255,.022) 1.4px,transparent 1.5px) 0 0/18px 18px, #0B141A} .chat-out{position:relative;max-width:86%;margin-left:auto;align-self:flex-start} .chat-bubble{background:#005C4B;color:#E9EDEF;font-size:.92rem;line-height:1.45; border-radius:10px 2px 10px 10px;padding:9px 52px 11px 12px} .chat-bubble.is-fresh{animation:composePop .35s cubic-bezier(.2,.9,.3,1.2)} @keyframes composePop{from{transform:translateY(5px);opacity:.35}} .chat-time{position:absolute;right:10px;bottom:7px;font-size:.66rem;color:#9FBEB6} .chat-send{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:12px 14px;background:#161F24;border-top:1px solid rgba(255,255,255,.05)} .chat-wa{display:inline-flex;align-items:center;gap:9px;background:#00A884; color:#06100D;font-weight:700;font-size:.92rem;padding:11px 20px; border-radius:999px;text-decoration:none; transition:background .2s,transform .15s} .chat-wa:hover{background:#0ABF98;transform:translateY(-1px)} .chat-wa:focus-visible{outline:2px solid #00A884;outline-offset:3px} .chat-sms{color:var(--text-3);font-size:.85rem;text-decoration:underline; text-underline-offset:3px} .chat-sms:hover{color:var(--text)} .compose-note{margin-top:10px;font-size:.82rem;color:var(--text-3)} @media (prefers-reduced-motion:reduce){ .chat-bubble.is-fresh{animation:none} .chat-wa,.chat-wa:hover{transition:none;transform:none} } .btn--ping{position:relative} .btn--ping::after{content:"";position:absolute;inset:0;border-radius:inherit; border:2px solid var(--red-lift);opacity:0;pointer-events:none; animation:btnPing 4s ease-out infinite} @keyframes btnPing{ 0%,62%{transform:scale(1);opacity:0} 66%{opacity:.5} 100%{transform:scale(1.16,1.55);opacity:0} } @media (prefers-reduced-motion:reduce){ .compose-preview.is-fresh{animation:none} .btn--ping::after{animation:none} .chip,.chip:hover{transition:none;transform:none} } /* ========================================================================== GARAŽNA VRATA — the photo grid lives behind a drawn sectional door that lifts to reveal it (owner's request 2026-08-31). The door defaults OPEN here so no-script and reduced-motion visitors simply see the content; main.js closes it and plays the lift once when the section arrives. ========================================================================== */ /* the whole SECTION is the garage opening: lintel across the top, guide tracks down both edges, and the door covers everything inside */ .gar{position:relative;padding-block:var(--section-y);background:var(--void); overflow:hidden;isolation:isolate} .gar::before{content:"";position:absolute;top:0;left:0;right:0;height:16px; z-index:8;background:linear-gradient(#22262A,#181C1F); border-bottom:1px solid rgba(0,0,0,.5)} .gar::after{content:"";position:absolute;inset:0;z-index:8;opacity:.45; pointer-events:none;background: linear-gradient(90deg,#3A4147,#23272B) 8px 0/5px 100% no-repeat, linear-gradient(90deg,#3A4147,#23272B) calc(100% - 13px) 0/5px 100% no-repeat} .gar-head{max-width:36ch;margin-bottom:var(--s-7)} .gar-head h2{font-size:var(--t-3xl);line-height:.9} .gar-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md);color:var(--text-2)} .gar-bay{position:relative;overflow:hidden;border-radius:var(--radius-lg); isolation:isolate;background:#101315; border:var(--border-hair) solid var(--line-2)} .gar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; padding:26px 26px 22px} .gar-grid .gshot{aspect-ratio:4/5} .gar-door{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column; background:#E9E7DD;transform:translateY(-103%);will-change:transform} .gar-panel{flex:1;position:relative; background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, rgba(0,0,0,0) 2px 25%), linear-gradient(180deg,#F0EEE5 0%,#E6E4DA 78%,#D4D2C7 100%)} .gar-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.16))} .gar-panel--last::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.3))} .gar-handle{position:absolute;left:50%;bottom:16px;transform:translateX(-50%); width:74px;height:14px;border-radius:999px;background:#26292C; box-shadow:0 2px 5px rgba(0,0,0,.4)} /* the wall control on the jamb: lamp, red pusher, label. The whole box is the button. JS un-hides it only when it has closed the door. */ .gar-ctl{position:absolute;right:26px;top:50%;transform:translateY(-50%); z-index:9;display:flex;flex-direction:column;align-items:center;gap:9px; width:74px;padding:13px 8px 11px;border-radius:14px;cursor:pointer; font:inherit;color:var(--text-2); background:linear-gradient(#23272C,#191D21); border:var(--border-hair) solid var(--line-2); box-shadow:0 10px 26px rgba(0,0,0,.5); transition:border-color .18s,color .18s,transform .18s} .gar-ctl:hover{border-color:var(--text-3);color:var(--text); transform:translateY(-50%) scale(1.03)} .gar-ctl:focus-visible{outline:2px solid var(--red);outline-offset:3px} .gar-ctl-lamp{width:10px;height:10px;border-radius:50%;background:#4A3A20; box-shadow:0 0 0 3px #14171A} .gar.is-armed .gar-ctl-lamp{animation:garLamp .5s ease-in-out 5 alternate} @keyframes garLamp{ from{background:#4A3A20;box-shadow:0 0 0 3px #14171A} to{background:#FFA61E;box-shadow:0 0 0 3px #14171A,0 0 16px 4px rgba(255,166,30,.5)} } .gar-ctl-btn{width:28px;height:28px;border-radius:50%; background:radial-gradient(circle at 34% 30%,var(--red-lift),var(--red) 58%,var(--red-deep)); box-shadow:inset 0 -3px 5px rgba(0,0,0,.38),0 3px 8px rgba(0,0,0,.45); transition:transform .1s} .gar-ctl:active .gar-ctl-btn{transform:translateY(1px) scale(.93); box-shadow:inset 0 2px 6px rgba(0,0,0,.5)} .gar-ctl-txt{font-size:.64rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;line-height:1} .gar .kap-note{margin-top:var(--s-6)} @media (max-width:1000px){ .gar-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* on a phone the section is many screens tall, so top:50% would bury the control - pin it inside the FIRST screenful of the closed door instead */ @media (max-width:700px){ .gar-ctl{top:42vh;right:14px} } @media (max-width:520px){ .gar-grid{grid-template-columns:1fr;padding:18px 16px 14px} } @media (prefers-reduced-motion:reduce){ .gar.is-armed .gar-ctl-lamp{animation:none} .gar-ctl,.gar-ctl:hover{transition:none} } /* ========================================================================== MOBILE POLISH (owner's 2026-08-31 round): the red call CTAs repeat down the page and were reading heavy on a phone - slimmer, and the hero CTA drops the inline number (the sticky call bar already carries it). Section intro paragraphs also stop hugging a desktop measure and run the full phone width instead of standing in a narrow, oddly-ragged column. ========================================================================== */ @media (max-width:700px){ .btn--action{padding:12px 20px;font-size:.95rem} .btn--action .num{display:none} .callbar .btn--action{padding:14px 20px} .kap-head p,.gal-head p,.gar-head p,.stairs-head p,.ba-head p, .led-head p,.win-head p,.stol-head p,.dod-head p,.area-head p, .price-head p,.close-say p{max-width:none} } /* ========================================================================== GREJANJE — Elektro's quiet sibling: radiators, towel rails, floor heating. The drawn radiator breathes warmth; static under reduced motion. ========================================================================== */ .heat{position:relative;padding-block:var(--section-y);background:var(--ground)} .heat-in{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,64px);align-items:center} .heat-in h2{font-size:var(--t-2xl);line-height:.95;max-width:18ch} .heat-in p{margin-top:var(--s-5);max-width:54ch;font-size:var(--t-md);color:var(--text-2)} .heat-in .btn{margin-top:var(--s-6)} .heat-draw{width:clamp(120px,17vw,178px);height:auto;justify-self:end} .heat-body rect,.heat-body line{fill:none;stroke:var(--line-2);stroke-width:2.2} .heat-body rect{stroke:#9BA1A6} .hw{fill:none;stroke:rgba(255,196,120,.65);stroke-width:2.4;stroke-linecap:round; opacity:0;animation:hwRise 2.6s ease-out infinite} @keyframes hwRise{ 0%{opacity:0;transform:translateY(9px)} 35%{opacity:.85} 100%{opacity:0;transform:translateY(-9px)} } @media (max-width:700px){ .heat-in{grid-template-columns:1fr} .heat-draw{justify-self:start;width:110px} .heat-in p{max-width:none} } @media (prefers-reduced-motion:reduce){ .hw{animation:none;opacity:.5;transform:none} } /* ========================================================================== KAKO IDE — each step earns its own moment (owner's 2026-08-31 round): step 1 carries the call button, step 2 pops a photo of him on the job when the tape reaches it, step 3 tosses three euro signs off the title, step 4 draws a checkmark. All keyed to the .is-on the rail already sets, so under reduced motion (everything on at load) each lands statically. ========================================================================== */ .step2{position:relative} .step2-call{margin-top:12px} .step2-photo{position:absolute;top:-16px;right:-6px;width:112px;aspect-ratio:4/5; margin:0;border-radius:10px;overflow:hidden;border:2px solid #F2F2F0; box-shadow:0 12px 28px rgba(0,0,0,.45); opacity:0;transform:scale(.5) rotate(-8deg);pointer-events:none} .step2-photo img{width:100%;height:100%;object-fit:cover;display:block} .step2.is-on .step2-photo{opacity:1;transform:scale(1) rotate(4deg); transition:transform .55s cubic-bezier(.34,1.65,.64,1),opacity .3s ease} .step2-eur{position:relative;display:inline-block;width:0;height:0; vertical-align:top} .step2-eur i{position:absolute;left:2px;top:-4px;font-style:normal; font-weight:700;font-size:.85em;color:var(--red-lift);opacity:0} .step2.is-on .step2-eur i{animation:eurPop 1s ease-out forwards} .step2.is-on .step2-eur i:nth-child(1){--ex:-10px;animation-delay:.15s} .step2.is-on .step2-eur i:nth-child(2){--ex:6px;animation-delay:.32s} .step2.is-on .step2-eur i:nth-child(3){--ex:20px;animation-delay:.5s} @keyframes eurPop{ 0%{opacity:0;transform:translate(0,6px) scale(.6)} 22%{opacity:1} 100%{opacity:0;transform:translate(var(--ex,8px),-30px) scale(1.15)} } .step2-check{width:20px;height:20px;margin-left:8px;vertical-align:-3px; fill:none;stroke:var(--red-lift);stroke-width:3;stroke-linecap:round; stroke-linejoin:round} .step2-check path{stroke-dasharray:26;stroke-dashoffset:26} .step2.is-on .step2-check path{transition:stroke-dashoffset .5s ease .45s; stroke-dashoffset:0} @media (max-width:700px){ .step2-photo{width:88px;top:-12px;right:0} } @media (prefers-reduced-motion:reduce){ .step2.is-on .step2-photo{transition:none} .step2.is-on .step2-eur i{animation:none} .step2.is-on .step2-check path{transition:none} } /* compass geography (owner 2026-08-31): named rings, and quiet dots beyond the red 60 km line - farther is still on the table */ .am-place{font-family:var(--font-body);font-size:11px;font-weight:600; fill:var(--text-2);letter-spacing:.02em} .am-place--far{fill:var(--text-3);font-style:italic} .am-dot{fill:var(--text-3)} .am-far{fill:var(--red-lift);opacity:.75} /* the contact card earns its keep (owner 2026-08-31): rows cascade in, the number underlines itself in red, every row answers the pointer */ .close-list>div{transition:transform .25s ease} .close-list>div:hover{transform:translateX(5px)} .close-list dt{transition:color .25s ease} .close-list>div:hover dt{color:var(--red-lift)} .close-list .big a{position:relative;text-decoration:none} .close-list .big a::after{content:"";position:absolute;left:0;right:0;bottom:-3px; height:2px;background:var(--red-lift);transform:scaleX(0);transform-origin:left; transition:transform .55s cubic-bezier(.2,.8,.2,1) .55s} .close-card.is-in .big a::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .close-list>div,.close-list dt,.close-list .big a::after{transition:none} .close-card .big a::after{transform:scaleX(1)} } /* chat round 2 (owner): richer, louder, and in BOTH apps. Small tabs in the header switch the whole window between WhatsApp green and Viber purple; the title above it grows into a real display heading. */ .compose-head h3{font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-2xl);line-height:.95;text-transform:uppercase} .chat{max-width:600px;box-shadow:0 24px 60px rgba(0,0,0,.5); border-color:rgba(255,255,255,.09)} .chat-tabs{margin-left:auto;display:flex;gap:6px} .chat-tab{appearance:none;border:1px solid rgba(255,255,255,.14); background:transparent;color:#8696A0;font:inherit;font-size:.72rem; font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px; cursor:pointer;transition:color .2s,background-color .2s,border-color .2s} .chat-tab:hover{color:#E9EDEF} .chat-tab.is-on{background:#00A884;border-color:#00A884;color:#06100D} .chat--viber .chat-tab.is-on{background:#7360F2;border-color:#7360F2;color:#fff} .chat-tab:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* the Viber costume: purple bubble, purple send, its own dark violet room */ .chat--viber{background:#151221} .chat--viber .chat-top{background:#221D33} .chat--viber .chat-body{background: radial-gradient(rgba(255,255,255,.022) 1.4px,transparent 1.5px) 0 0/18px 18px, #151221} .chat--viber .chat-bubble{background:#7360F2;color:#fff} .chat--viber .chat-time{color:#CFC8F5} .chat--viber .chat-send{background:#1B1729} .chat--viber .chat-wa{background:#7360F2;color:#fff} .chat--viber .chat-wa:hover{background:#8673FF} /* the live map: framed in the page's own chrome, graded toward the dark ground so Google's daylight tiles do not punch a white hole in the page */ .map-card{border-radius:var(--radius-lg);overflow:hidden; border:var(--border-hair) solid var(--line-2);margin-top:var(--s-7)} .map-frame{display:block;width:100%;height:340px;border:0; filter:grayscale(.2) brightness(.92) contrast(1.02)} .map-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:12px 16px;background:rgba(22,26,30,.6)} .map-open{color:var(--text-3);font-size:.85rem;text-decoration:underline; text-underline-offset:3px} .map-open:hover{color:var(--text)} .chat-top{flex-wrap:wrap} @media (max-width:700px){ .map-frame{height:260px} } /* the traditional toggle switch (owner's reference photo): white plate, two screws, a lever that flips up for ON. The flip is one snappy transform; the plate warms with a glow while the room is lit. */ .vsw-plate{fill:#E9E8E3;stroke:#C6C5C0;stroke-width:1.5;transition:filter .5s} .volt.is-live .vsw-plate{filter:drop-shadow(0 0 16px rgba(214,232,255,.5))} .vsw-screw{fill:#D2D1CC;stroke:#B4B3AE;stroke-width:1} .vsw-slot{stroke:#9C9B96;stroke-width:1.2} .vsw-recess{fill:#D9D8D3;stroke:#BCBBB6;stroke-width:1.2} .vsw-txt{font-family:var(--font-body);font-size:10px;font-weight:700; letter-spacing:.08em;fill:#8A8984} .vsw-lever{transform-origin:60px 90px; transition:transform .16s cubic-bezier(.3,.9,.4,1.3)} .volt.is-live .vsw-lever{transform:scaleY(-1)} .vsw-face{fill:#F4F3EF;stroke:#BFBEB9;stroke-width:1.2} .vsw-cap{fill:#D7D6D1;stroke:#BFBEB9;stroke-width:1} @media (prefers-reduced-motion:reduce){ .vsw-lever,.vsw-plate{transition:none} } /* komarnik round 2 (owner): when the panel jams, an arrow draws from the break point toward the Pozovite button; the fixed-price tag waits under the placeholder register until the father confirms the figure */ .ds-call-line{fill:none;stroke:var(--red-lift);stroke-width:2.4; stroke-linecap:round;stroke-dasharray:190;stroke-dashoffset:190} .ds-call-head{fill:none;stroke:var(--red-lift);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;opacity:0} .dod-slide .ds-call-line{animation:dsCallLine 7s infinite} .dod-slide .ds-call-head{animation:dsCallHead 7s infinite} @keyframes dsCallLine{ 0%,26%{stroke-dashoffset:190} 38%{stroke-dashoffset:0} 82%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} } @keyframes dsCallHead{ 0%,34%{opacity:0} 40%{opacity:1} 82%{opacity:1} 90%,100%{opacity:0} } /* the site's first real price wears a confident tag, not a dashed maybe: big WHITE number (red was unreadable on the dark ground - owner), a title line and a quiet condition line, laid out horizontally */ .dod-price{display:flex;align-items:center;gap:16px; padding:12px 18px 12px 16px;border:var(--border-hair) solid var(--line-2); border-radius:14px;color:var(--text-2);min-width:0; background:rgba(255,255,255,.04)} .dod-price b{font-family:var(--font-display);font-weight:var(--w-black); font-size:2rem;line-height:1;color:var(--text);white-space:nowrap; flex:0 0 auto} .dp-txt{display:block;min-width:0} .dp-txt strong{display:block;font-size:.92rem;font-weight:600; color:var(--text);line-height:1.35} .dp-txt em{display:block;font-style:normal;font-size:.82rem; color:var(--text-3);line-height:1.4;margin-top:2px} .dod-fix-types{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px; margin:16px 0;max-width:52ch} .dod-fix-types div{display:flex;align-items:baseline;gap:10px;padding:8px 0; border-top:var(--border-hair) solid var(--line)} .dod-fix-types b{font-family:var(--font-display);font-weight:var(--w-black); font-size:1.05rem;min-width:3.6em} .dod-fix-types span{font-size:var(--t-sm);color:var(--text-2)} @media (max-width:700px){ .dod-price{margin-left:0} .dod-fix-types{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .dod-slide .ds-call-line,.dod-slide .ds-call-head{animation:none;opacity:0} } /* ========================================================================== KOMARNICI — split out of Dodaci (owner's call 2026-08-31): he makes them and he repairs them, and that deserves its own room. The moved .dod-fix block keeps its jam-and-glide drawing; the section adds the head and the whole-house photo strip. ========================================================================== */ .net{position:relative;padding-block:var(--section-y);background:var(--ground)} .net-head{max-width:36ch;margin-bottom:var(--s-6)} .net-head h2{font-size:var(--t-3xl);line-height:.9} .net-head p{margin-top:var(--s-5);max-width:56ch;font-size:var(--t-md);color:var(--text-2)} .net .dod-fix{margin-top:var(--s-4)} .net-shot{margin-top:var(--s-7);aspect-ratio:21/9} @media (max-width:700px){ .net-head p{max-width:none} .net-shot{aspect-ratio:4/3} } /* komarnik round 3 (owner): two scenes side by side on alternating clocks, arrows leading DOWN into the action row - price left, Pozovite right. The tear scene draws a crack across the mesh. */ .dod-fix-show{display:grid;grid-template-columns:1fr 1fr;gap:16px; align-content:start} .dod-fix-show .dod-slide{max-width:none;width:100%;justify-self:stretch} .dod-fix-act{grid-column:1/-1;margin-top:var(--s-6);display:grid; grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:16px;margin-top:4px} .dt2-crack{fill:none;stroke:#7E868D;stroke-width:2.6;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130} .dod-tear2 .dt2-crack{animation:dt2Crack 7s infinite 3.5s} .dod-tear2 .dt2-fix{animation-delay:3.5s} .dod-tear2 .ds-call-line{animation-delay:3.5s} .dod-tear2 .ds-call-head{animation-delay:3.5s} @keyframes dt2Crack{ 0%,8%{stroke-dashoffset:130} 20%{stroke-dashoffset:0} 86%{stroke-dashoffset:0;opacity:1} 93%,100%{stroke-dashoffset:0;opacity:0} } @media (max-width:560px){ .dod-fix-show{grid-template-columns:1fr 1fr;gap:10px} .dod-fix-act{grid-template-columns:1fr} .dod-fix-act .btn{justify-content:center} } @media (prefers-reduced-motion:reduce){ .dod-tear2 .dt2-crack{animation:none;stroke-dashoffset:0} } /* ========================================================================== THE PORTRAIT LANDS (2026-08-31): Saša everywhere the brand speaks. ========================================================================== */ /* the close-up portrait fills every circle with a light zoom to the face */ .maker-face img{object-position:50% 20%;transform:scale(1.22); transform-origin:50% 22%} .chat-ava--photo img{width:100%;height:100%;object-fit:cover; object-position:50% 20%;transform:scale(1.28);transform-origin:50% 22%} .who{display:flex;align-items:center;gap:10px} .who-ava{width:36px;height:36px;border-radius:50%;overflow:hidden; border:2px solid var(--red);flex:0 0 auto} .who-ava img{width:100%;height:100%;object-fit:cover;object-position:50% 20%; transform:scale(1.28);transform-origin:50% 22%;display:block} /* the man behind everything POPS (owner's ask): the hero circle is bigger, carries a red glow, and grows under the pointer so you can properly see who you are calling. Transform and shadow only. */ .maker-face{width:184px;height:184px; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 16px 42px rgba(0,0,0,.6), 0 0 36px rgba(136,24,22,.35)} @media (hover:hover) and (pointer:fine){ .maker-face{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;transform-origin:left center;position:relative;z-index:4} .maker:hover .maker-face{transform:scale(1.7); box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 28px 70px rgba(0,0,0,.7), 0 0 60px rgba(136,24,22,.45)} } @media (max-width:900px){ .maker-face{width:132px;height:132px} } @media (prefers-reduced-motion:reduce){ .maker-face{transition:none} } /* the gallery's wide closer: the shirt shot spans the full row, cropped to the printed name and number on his back */ .gal-wide{grid-column:1/-1;aspect-ratio:21/9 !important} .gal-wide img{object-position:50% 32%} @media (max-width:820px){ .gal-wide{aspect-ratio:16/9 !important} } /* ========================================================================== UTISCI — the feedback loop is live; the quotes grid waits dark for real WhatsApp quotes with sign-off. The oversized quotation marks draw in. ========================================================================== */ .say{position:relative;padding-block:var(--section-y);background:var(--ground)} .say-head{max-width:38ch;margin-bottom:var(--s-6)} .say-head h2{font-size:var(--t-3xl);line-height:.9} .say-head p{margin-top:var(--s-5);max-width:52ch;font-size:var(--t-md);color:var(--text-2)} .say-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; margin-bottom:var(--s-6)} .say-card{margin:0;padding:22px 22px 18px;border-radius:var(--radius-lg); border:var(--border-hair) solid var(--line-2); background:linear-gradient(150deg,rgba(44,49,54,.5),rgba(20,23,26,.3))} .say-card blockquote{font-size:var(--t-md);line-height:1.55;color:var(--text)} .say-card figcaption{margin-top:12px;font-size:var(--t-sm);font-weight:600; color:var(--text-3)} .say-invite{display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding:24px 26px;border-radius:var(--radius-lg)} .say-mark{width:56px;height:auto;flex:0 0 auto;fill:none; stroke:var(--red-lift);stroke-width:2;stroke-linejoin:round} .say-invite p{flex:1;min-width:240px;color:var(--text-2)} .say-invite b{color:var(--text)} .say-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap} @media (max-width:900px){ .say-grid{grid-template-columns:1fr} } @media (max-width:700px){ .say-head p{max-width:none} } /* the legal lines: quiet, honest, at the very end of the page */ .legal{margin-top:18px;padding-top:16px; border-top:var(--border-hair) solid var(--line); display:grid;gap:7px;max-width:78ch; font-size:.78rem;line-height:1.6;color:var(--text-3)} /* -------------------------------------------------------------------------- ČESTA PITANJA — native disclosure rows, type only, no icons, no cards. Works with scripts dead (details/summary is browser-native). -------------------------------------------------------------------------- */ .faq{position:relative;padding-block:var(--section-y);background:var(--ground); border-top:var(--border-hair) solid var(--line)} .faq-head h2{font-size:var(--t-3xl);line-height:.9;max-width:16ch} .faq-list{margin-top:var(--s-8);max-width:74ch; border-top:var(--border-hair) solid var(--line)} .faq-item{border-bottom:var(--border-hair) solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;display:flex; align-items:baseline;justify-content:space-between;gap:var(--s-5); padding:var(--s-5) 0;font-size:var(--t-md);font-weight:600;line-height:1.35} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";flex:0 0 auto; font-family:var(--font-display);font-weight:var(--w-black); font-size:1.7rem;line-height:1;color:var(--red-lift); transition:transform .3s var(--ease-out)} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{margin:0;padding:0 0 var(--s-6);max-width:58ch; font-size:var(--t-base);color:var(--text-2);line-height:1.6} @media (prefers-reduced-motion:reduce){ .faq-item summary::after{transition:none} } /* -------------------------------------------------------------------------- MAPA — drawn district map (replaces the page-load Google iframe). Static SVG with scripts dead; .gm-frame exists only after the visitor clicks "Učitajte interaktivnu mapu". -------------------------------------------------------------------------- */ .gm{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s-7);align-items:center;margin-top:var(--s-7); padding:var(--s-7);border-radius:var(--radius-lg)} .gm-stage{display:flex;align-items:center;justify-content:center;min-height:300px} .gm-svg{width:100%;max-width:430px;height:auto;display:block} .gm-frame{display:block;width:100%;height:440px;border:0; border-radius:var(--radius-md)} .gm-side h3{font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-xl);line-height:1;text-transform:uppercase; letter-spacing:var(--tr-display)} .gm-addr{margin-top:var(--s-4);font-size:var(--t-md);line-height:1.5} .gm-note{margin-top:var(--s-4);max-width:38ch;font-size:var(--t-sm); color:var(--text-2);line-height:1.55} .gm-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-6)} .gm-danube{fill:none;stroke:var(--glass);stroke-width:5;opacity:.75; stroke-linecap:round} .gm-mlava{fill:none;stroke:var(--glass);stroke-width:2;opacity:.65; stroke-linecap:round} .gm-road{fill:none;stroke:var(--line-2);stroke-width:1.3} .gm-ring{fill:none;stroke:var(--line-2);stroke-dasharray:3 6} .gm-dot{fill:var(--alu)} .gm-town{font-family:var(--font-body);font-size:12px;fill:var(--text-2)} .gm-town--base{fill:var(--text);font-weight:600} .gm-river{font-family:var(--font-body);font-style:italic;font-size:11px; fill:var(--glass);opacity:.9} .gm-km{font-family:var(--font-body);font-size:10px;fill:var(--text-3); letter-spacing:.08em} .gm-pin{fill:var(--red-lift)} .gm-pin-ring{fill:none;stroke:var(--red-lift);stroke-width:1.5;opacity:.55} @media (max-width:700px){ .gm{grid-template-columns:1fr;padding:var(--s-6)} .gm-frame{height:320px} } /* .btn sets display, which beats the UA [hidden] rule; restore the contract so the load button truly does not exist until JS reveals it. */ .gm-links [hidden]{display:none !important}