@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(assets/fonts/bsd-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(assets/fonts/bsd-latin-ext-800.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(assets/fonts/bsd-latin-900.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(assets/fonts/bsd-latin-ext-900.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(assets/fonts/is-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(assets/fonts/is-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(assets/fonts/is-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(assets/fonts/is-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(assets/fonts/is-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(assets/fonts/is-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Layout idea: dark navy world, left-aligned. Photo hero with slow camera move; a live canvas "driver's view"
   under the overhead line carries the rail section; stone blue appears once as a full band (calculator);
   red is reserved for actions and the travelling contact point. */
:root{--z:1;
  color-scheme:dark;
  --navy:#03203D; --navy-deep:#021629; --navy-line:#1B3F63;
  --stone:#639CC5; --ice:#E9F1F8; --ice-dim:#A9C3DA; --red:#EB2F33;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1220px; --gut:clamp(16px,calc(4vw / var(--z)),44px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--ice);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance}
h1{font-size:clamp(50px,calc(9vw / var(--z)),132px);font-weight:900}
h2{font-size:clamp(38px,calc(6vw / var(--z)),84px)}
h3{font-size:clamp(26px,calc(3vw / var(--z)),38px);line-height:1}
p{margin:0}
.lead{font-size:clamp(17px,calc(1.5vw / var(--z)),21px);color:var(--ice-dim);max-width:56ch}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:600 16px var(--body);text-decoration:none;border:1.5px solid transparent;border-radius:2px;cursor:pointer;isolation:isolate;transition:color .3s var(--ease),border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .35s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn-red{background:var(--red);color:#fff}
.btn-red::before{background:#fff}
.btn-red:hover{color:var(--navy)}
.btn-line{border-color:var(--ice-dim);color:var(--ice)}
.btn-line::before{background:var(--stone)}
.btn-line:hover{color:var(--navy-deep);border-color:var(--stone)}
.btn-navy{background:var(--navy);color:var(--ice)}
.btn-navy::before{background:var(--red)}

/* scroll reveal (only when JS is running) */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .brk .shot{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease)}
.js .brk.in .shot{clip-path:inset(0)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .3s,border-color .3s,transform .4s var(--ease);border-bottom:1px solid transparent}
.top.solid{background:rgba(2,22,41,.9);backdrop-filter:blur(10px);border-color:var(--navy-line)}
.top.hide{transform:translateY(-100%)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:84px}
.logo{margin-right:auto;display:block}
.logo img{height:62px;width:auto}
.nav{display:flex;gap:28px}
.nav a{position:relative;text-decoration:none;font-weight:500;font-size:15px;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.lang{display:flex;border:1px solid rgba(233,241,248,.35);border-radius:2px}
.lang button{background:none;border:0;color:var(--ice);font:600 13px var(--body);padding:8px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ice);color:var(--navy-deep)}
.top .btn{min-height:42px;padding:0 18px;font-size:15px}
@media (max-width:900px){.nav{display:none}}
@media (max-width:520px){.top .btn{display:none}.logo img{height:38px}}

/* hero: two halves, one per line of business */
.pin{height:calc(210vh / var(--z))}
.hero{position:sticky;top:0;display:flex;padding-top:84px;height:calc(100vh / var(--z));min-height:640px;overflow:hidden;background:var(--navy-deep);--px:0;--py:0}
.h-left,.h-right{flex:1 1 50%;min-width:0;z-index:1;will-change:transform;transition:flex-grow .7s var(--ease)}
@media (hover:hover) and (min-width:861px){.h-left:hover,.h-right:hover{flex-grow:1.28}}
.h-back{position:absolute;inset:84px 0 0 0;display:grid;align-content:center;gap:26px;padding:0 max(var(--gut),calc((calc(100vw / var(--z)) - var(--wrap))/2 + var(--gut)));will-change:transform,opacity}
.h-back h2{font-size:clamp(44px,calc(6.4vw / var(--z)),88px);font-weight:900}
@media (min-width:861px){.h-back h2>.flip-text-wrapper{white-space:nowrap}}
.h-back h2>.flip-text-wrapper{display:block}
.h-back .rule{height:3px;width:120px;background:var(--red)}
.h-left::before{content:"";position:absolute;left:-40%;right:-40%;bottom:0;height:62%;pointer-events:none;
  background-image:linear-gradient(rgba(99,156,197,.5) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(99,156,197,.5) 1.5px,transparent 1.5px);background-size:70px 110px;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 92%);mask:linear-gradient(to top,#000 10%,transparent 92%);animation:floor 5s linear infinite}
.h-left::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(99,156,197,.16) 50%,transparent 70%);background-size:300% 100%;animation:sweep 7s ease-in-out infinite}
@keyframes floor{to{background-position:0 110px,0 0}}
@keyframes sweep{from{background-position:120% 0}to{background-position:-60% 0}}
.h-left>*{position:relative;z-index:1}
.h-right{background-image:linear-gradient(rgba(2,22,41,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(2,22,41,.07) 1px,transparent 1px);background-size:44px 44px;animation:bp 30s linear infinite}
@keyframes bp{to{background-position:-440px 0,-440px 0}}
.h-right .tech{translate:calc(var(--px)*14px) calc(var(--py)*10px)}
.split-cue{position:absolute;z-index:2;left:50%;bottom:0;width:2px;height:90px;background:rgba(233,241,248,.25);overflow:hidden;transform:translateX(-1px)}
.split-cue::after{content:"";position:absolute;inset:0 0 60% 0;background:var(--red);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{from{transform:translateY(-110%)}to{transform:translateY(260%)}}
.h-left{position:relative;overflow:hidden;background:var(--navy);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:24px clamp(16px,calc(2.5vw / var(--z)),40px);padding:clamp(24px,calc(3.4vw / var(--z)),52px) clamp(20px,calc(3vw / var(--z)),48px) clamp(24px,calc(3.4vw / var(--z)),52px) max(var(--gut),calc((calc(100vw / var(--z)) - var(--wrap))/2 + var(--gut)))}
.h-copy{font-size:clamp(15px,calc(1.15vw / var(--z)),18px);max-width:34ch;line-height:1.5;animation:fade 1s .3s both}
.vert{grid-column:2;grid-row:1/4;align-self:stretch;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--red);font-weight:900;font-size:clamp(84px,calc(15.2vh / var(--z)),150px);line-height:.86;display:flex;flex-direction:column;justify-content:center;text-align:left}
.vert .ln{overflow:hidden;padding:0 .2em 0 .02em;margin:0 -.16em 0 0}
.vert .ln>span{animation:riseV 1.1s var(--ease) both}
.vert .ln:nth-child(2)>span{animation-delay:.15s}
@keyframes riseV{from{transform:translateY(-104%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sun{translate:calc(var(--px)*-26px) calc(var(--py)*-18px);align-self:end;position:relative;width:clamp(110px,calc(12vw / var(--z)),190px);aspect-ratio:1;border-radius:50%;background:var(--red);margin:14% 0 0 14%;animation:pop 1.2s .4s var(--ease) both}
.sun::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:repeating-conic-gradient(var(--red) 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent 70%,#000 71% 92%,transparent 93%);mask:radial-gradient(closest-side,transparent 70%,#000 71% 92%,transparent 93%);animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
.btn-redline{border-color:var(--red);color:var(--ice);justify-self:start;align-self:end}
.btn-redline::before{background:var(--red)}
.h-right{background:var(--stone);color:var(--navy-deep);display:flex;flex-direction:column;gap:18px;padding:clamp(24px,calc(3.4vw / var(--z)),52px) max(var(--gut),calc((calc(100vw / var(--z)) - var(--wrap))/2 + var(--gut))) clamp(24px,calc(3.4vw / var(--z)),52px) clamp(20px,calc(3vw / var(--z)),48px)}
.h-right .tech{flex:1;min-height:0;width:100%}
.h-title{font-size:clamp(44px,calc(5.6vw / var(--z)),92px);font-weight:900}
.h-foot{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.h-right .btn-navy::before{background:var(--red)}
@media (max-width:860px){
  .pin{height:auto}
  .hero{position:static;flex-direction:column;height:auto;min-height:0}
  .h-back{position:relative;inset:auto;order:-1;min-height:calc(78vh / var(--z));padding-top:64px;padding-bottom:64px;opacity:1!important;transform:none!important}
  .h-left,.h-right{transform:none!important}
  .split-cue{display:none}
  .h-left{grid-template-columns:1fr;grid-template-rows:auto}
  .vert{grid-column:1;grid-row:auto;writing-mode:horizontal-tb;transform:none;font-size:clamp(56px,calc(17vw / var(--z)),110px);order:-1}
  .vert .ln>span{animation-name:rise}
  .sun{margin:10px 0 10px 10%}
  .h-right .tech{flex:none}
}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}

.sec{padding:clamp(72px,calc(10vw / var(--z)),140px) 0}

/* solar */
.solar{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,calc(6vw / var(--z)),88px);align-items:center}
.shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy-deep)}
.shot img{width:100%;height:118%;object-fit:cover;will-change:transform}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,32,61,.55),rgba(3,32,61,0) 50%);pointer-events:none}
.shot figcaption{position:absolute;left:22px;bottom:20px;z-index:1;font:800 clamp(26px,calc(3vw / var(--z)),40px)/1 var(--display);text-transform:uppercase}
.col{display:grid;gap:26px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--navy-line);font-weight:500;transition:padding .3s var(--ease),color .3s}
.list li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--stone);flex:none;transition:background .3s,transform .3s}
.list li:hover{padding-left:14px;color:#fff}
.list li:hover::after{background:var(--red);transform:scale(1.5)}
.col .btn{justify-self:start}
@media (max-width:860px){.solar{grid-template-columns:1fr}.shot{aspect-ratio:4/3}}

/* rail */
.rail{position:relative;overflow:hidden;background:var(--navy-deep);border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.rail canvas{position:absolute;inset:0;width:100%;height:100%}
.rail::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,22,41,.92) 0%,rgba(2,22,41,.6) 38%,rgba(2,22,41,0) 68%);pointer-events:none}
.rail .wrap{position:relative;z-index:1;padding-top:clamp(72px,calc(10vw / var(--z)),140px);padding-bottom:clamp(72px,calc(10vw / var(--z)),140px)}
.rail .col{max-width:540px}
.rail .list li{border-color:rgba(99,156,197,.35)}
@media (max-width:860px){.rail::after{background:rgba(2,22,41,.78)}}
.tech{width:100%;height:auto;overflow:visible}
.tech .w{fill:none;stroke:var(--stone);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tech .thin{stroke-width:1.2}
.tech .grid{stroke:var(--navy-line);stroke-width:1}
.tech .lead-l{stroke:var(--ice-dim);stroke-width:1;stroke-dasharray:3 4;fill:none}
.tech text{font:500 15px var(--body);fill:var(--ice)}
.tech .dim{font-size:13px;fill:var(--ice-dim)}
.tech .fill{fill:var(--stone)}
.tech .spark{fill:var(--red)}
.js .tech .w{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease);transition-delay:var(--d,0s)}
.js .tech.in .w{stroke-dashoffset:0}
.js .tech .lb{opacity:0;transition:opacity .7s 1.5s}
.js .tech.in .lb{opacity:1}
.on-stone .w{stroke:var(--navy-deep)}
.on-stone .grid{stroke:rgba(2,22,41,.35)}
.on-stone .lead-l{stroke:var(--navy)}
.on-stone text{fill:var(--navy-deep);font-weight:600}

/* process */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,calc(6vw / var(--z)),88px)}
.proc-side{position:sticky;top:120px;align-self:start;display:grid;gap:28px}
.pnum{font:900 clamp(140px,calc(20vw / var(--z)),280px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--stone);font-variant-numeric:tabular-nums}
.pbar{height:3px;background:var(--navy-line)}
.pbar i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(.25);transition:transform .6s var(--ease)}
.psteps{list-style:none;margin:0;padding:0}
.psteps li{min-height:calc(44vh / var(--z));display:grid;gap:14px;align-content:center;padding:24px 0;border-top:1px solid var(--navy-line);opacity:.28;transition:opacity .5s}
.psteps li.on{opacity:1}
.psteps p{color:var(--ice-dim);max-width:44ch;font-size:18px}
@media (max-width:860px){.proc{grid-template-columns:1fr}.proc-side{position:static}.pnum,.pbar{display:none}.psteps li{min-height:0;opacity:1}}

/* calculator */
.calc{background:var(--stone);color:var(--navy-deep)}
.calc .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,calc(6vw / var(--z)),88px);align-items:start}
.calc .lead{color:var(--navy);margin-top:18px}
.calc label{display:grid;gap:14px;margin-top:36px;font-weight:600}
.bill{font:900 clamp(56px,calc(7vw / var(--z)),96px)/1 var(--display);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--navy);border-radius:2px;outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--red);border:4px solid var(--navy-deep);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:4px solid var(--navy-deep);cursor:grab}
.out{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--navy-deep)}
.out div{padding:20px 0;border-bottom:1px solid rgba(2,22,41,.3)}
.out b{display:block;font:800 clamp(38px,calc(4.4vw / var(--z)),60px)/1 var(--display);font-variant-numeric:tabular-nums}
.out div>span{font-size:15px;font-weight:500}
.cells{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;margin-top:24px}
.cells i{aspect-ratio:3/4;background:rgba(2,22,41,.16);transition:background .35s}
.cells i.on{background:var(--navy-deep)}
.note{font-size:14px;margin-top:18px;max-width:60ch}
.calc .btn{margin-top:26px}
@media (max-width:860px){.calc .grid{grid-template-columns:1fr}}

/* news */
.news-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,calc(4vw / var(--z)),48px)}
.news-list{list-style:none;margin:0;padding:0}
.news-list a{display:grid;grid-template-columns:100px 1fr 40px;gap:20px;align-items:center;padding:26px 0;border-top:1px solid var(--navy-line);text-decoration:none;transition:padding .35s var(--ease),background .35s}
.news-list li:last-child a{border-bottom:1px solid var(--navy-line)}
.news-list .tag{font-size:14px;font-weight:600;color:var(--stone)}
.news-list .t{font-size:clamp(19px,calc(2.2vw / var(--z)),28px);font-weight:500;line-height:1.25}
.news-list svg{width:28px;height:28px;stroke:var(--red);fill:none;stroke-width:2;transform:translateX(-14px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.news-list a:hover{padding-left:18px;background:var(--navy-deep)}
.news-list a:hover svg{transform:none;opacity:1}
@media (max-width:620px){.news-list a{grid-template-columns:1fr;gap:4px}.news-list svg{display:none}}

/* contact */
.contact{background:var(--navy-deep);border-top:1px solid var(--navy-line)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,calc(6vw / var(--z)),88px);align-items:start}
.contact .lead{margin-top:22px}
form{display:grid;gap:16px}
form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ice-dim)}
form input,select,textarea{font:400 16px var(--body);color:var(--ice);background:var(--navy);border:1px solid var(--navy-line);border-radius:2px;padding:13px 14px;width:100%;transition:border-color .2s}
form input:focus,select:focus,textarea:focus{outline:0;border-color:var(--stone)}
textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.status{min-height:1.5em;font-size:15px;color:var(--stone)}
@media (max-width:860px){.contact .grid{grid-template-columns:1fr}}
@media (max-width:480px){.row2{grid-template-columns:1fr}}

footer{background:var(--navy-deep);border-top:1px solid var(--navy-line);padding:36px 0;font-size:14px;color:var(--ice-dim)}
footer .wrap{display:flex;gap:16px 32px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer img{height:56px;width:auto}
footer nav{display:flex;gap:24px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sun,.sun::before,.ln>span,.h-copy,.h-left::before,.h-left::after,.h-right,.split-cue::after{animation:none}
  .js .brk .shot{opacity:1;transform:none;clip-path:none;transition:none}
  .js .rv{transform:none;transition:opacity .9s var(--ease);transition-delay:var(--d,0s)}
}

/* ===== industrial details ===== */
.btn-red,.btn-navy{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:0}
.btn-line,.btn-redline{border-radius:0}
.ticks{position:relative}
.ticks{border-top:1px solid var(--hl)}
.brk{position:relative}
.brk::before{content:"";position:absolute;inset:-12px;z-index:2;pointer-events:none;background:
  linear-gradient(var(--red),var(--red)) 0 0/34px 3px no-repeat,linear-gradient(var(--red),var(--red)) 0 0/3px 34px no-repeat,
  linear-gradient(var(--stone),var(--stone)) 100% 100%/34px 3px no-repeat,linear-gradient(var(--stone),var(--stone)) 100% 100%/3px 34px no-repeat}
#pitanja button,#pitanja .font-sans{font-family:inherit}
#pitanja button{background-color:transparent;color:inherit}
/* calculator read-out as an equipment nameplate */
.plate{position:relative;border:2px solid var(--navy-deep);padding:26px clamp(18px,calc(2.4vw / var(--z)),34px) 8px;background:
  radial-gradient(circle at 12px 12px,var(--navy-deep) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 12px) 12px,var(--navy-deep) 3.5px,transparent 4px),
  radial-gradient(circle at 12px calc(100% - 12px),var(--navy-deep) 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),var(--navy-deep) 3.5px,transparent 4px),rgba(233,241,248,.16)}
.plate .out{border-top:0}
.plate .out div:nth-last-child(-n+2){border-bottom:0}
.out b{display:flex;align-items:baseline}
/* faq + contact */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,calc(6vw / var(--z)),88px);align-items:start}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.formbox{position:relative;padding:clamp(20px,calc(3vw / var(--z)),36px);border:1px solid var(--navy-line);background:var(--navy)}
.formbox form{position:relative;z-index:1}
@keyframes border-beam{100%{offset-distance:100%}}
/* statement (Vengeance FlipText) */
.h-back h2 .flip-text-wrapper{display:block}
.flip-char{color:inherit;-webkit-text-fill-color:transparent;height:1.05em;line-height:1.05em;vertical-align:middle;animation:flip var(--flip-duration,2.2s) var(--flip-delay,0s) var(--flip-iteration,infinite) ease}
.flip-char::before,.flip-char::after{color:inherit;-webkit-text-fill-color:currentColor;content:attr(data-char);position:absolute;top:50%;left:50%;height:100%;width:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;animation:flipfade var(--flip-duration,2.2s) var(--flip-delay,0s) var(--flip-iteration,infinite) ease}
.flip-char::after{transform:translate(-50%,-50%) translateZ(.52em)}
.flip-char::before{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(.52em);opacity:0;--opacity:1}
@keyframes flip{0%{transform:rotateX(0)}12%,100%{transform:rotateX(90deg)}}
@keyframes flipfade{0%{opacity:1}14%,100%{opacity:var(--opacity,0)}}
@media (prefers-reduced-motion:reduce){.flip-char,.flip-char::before,.flip-char::after{animation:none}.flip-char{-webkit-text-fill-color:currentColor}.flip-char::before,.flip-char::after{display:none}}

/* ===== hairlines + growing images (measured-drawing motif) ===== */
:root{--hl:rgba(99,156,197,.38)}
.grow{position:relative;aspect-ratio:var(--ar,4/3);--s:1}
.grow::before{content:"";position:absolute;left:-60px;right:-60px;top:0;height:1px;background:var(--hl)}
.grow::after{content:"";position:absolute;top:-60px;bottom:-60px;left:0;width:1px;background:var(--hl)}
.grow-img{position:absolute;left:0;top:0;width:calc(var(--s)*100%);height:calc(var(--s)*100%);overflow:hidden;background:var(--navy-deep)}
.grow-img img{width:100%;height:100%;object-fit:cover}
.gx{position:absolute;top:-60px;bottom:-60px;left:calc(var(--s)*100%);width:1px;background:var(--hl)}
.gy{position:absolute;left:-60px;right:-60px;top:calc(var(--s)*100%);height:1px;background:var(--hl)}
.gd{position:absolute;left:calc(var(--s)*100% - 3px);top:calc(var(--s)*100% - 3px);width:7px;height:7px;background:var(--red)}
.cx,.cy{position:absolute;font-size:15px;font-weight:500;color:var(--ice-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx{left:calc(var(--s)*100% + 14px);top:calc(var(--s)*100% - 32px)}
.cy{left:calc(var(--s)*100% - 74px);top:calc(var(--s)*100% + 10px)}
.frow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,calc(8vw / var(--z)),130px);align-items:center;padding:clamp(56px,calc(7vw / var(--z)),100px) 0}
.frow+.frow{border-top:1px solid var(--hl)}
.frow::after,.solar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hl)}
.solar{position:relative}
.solar::after{top:calc(-1*clamp(72px,calc(10vw / var(--z)),140px));bottom:calc(-1*clamp(72px,calc(10vw / var(--z)),140px))}
.field{padding-top:0;padding-bottom:0;border-bottom:1px solid var(--hl)}
.field h3{font-size:clamp(30px,calc(3.6vw / var(--z)),52px)}
@media (max-width:860px){.frow{grid-template-columns:1fr}.frow::after,.solar::after{display:none}.cx,.cy{display:none}.grow::before,.gy{left:0;right:0}}
/* hero video behind the statement */
.h-back{isolation:isolate;overflow:hidden}
.h-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.h-back::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,22,41,.9) 0%,rgba(3,32,61,.62) 55%,rgba(3,32,61,.3) 100%),linear-gradient(0deg,rgba(2,22,41,.7),rgba(2,22,41,0) 40%)}
.h-back .lead{color:var(--ice)}

/* video statement first; the two halves close in over it on scroll */
@media (min-width:861px){.js .h-left{transform:translateY(calc(-100% - 100px))}.js .h-right{transform:translateY(101%)}}

/* multi-page */
main.sub{padding-top:84px}
.pin{position:relative}
#podrucja{position:absolute;top:calc(112vh / var(--z))}
@media (max-width:860px){#podrucja{top:calc(80vh / var(--z))}}

/* ===== hero halves: hovered side opens to 75% ===== */
.h-left,.h-right{flex:1 1 0;cursor:pointer;transition:flex-grow .8s var(--ease)}
@media (hover:hover) and (min-width:861px){.h-left:hover,.h-right:hover{flex-grow:1}
  .hero[data-open="l"] .h-left,.hero[data-open="r"] .h-right{flex-grow:3}}
.h-left{display:flex;align-items:stretch;gap:clamp(16px,calc(2.4vw / var(--z)),40px)}
.h-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;transition:opacity .3s .25s}
.h-body .sun{align-self:flex-start}
.h-body .btn{align-self:flex-start;white-space:nowrap}
.vert{flex:none;margin-left:auto;transition:margin .8s var(--ease)}
.h-more{list-style:none;margin:0;padding:0;align-self:center;flex:none;width:0;opacity:0;overflow:hidden;transition:width .8s var(--ease),opacity .25s}
.h-more li{padding:15px 0;border-top:1px solid var(--hl);font-weight:500;font-size:16px}
.h-more li:last-child{border-bottom:1px solid var(--hl)}
.h-right .h-more li{border-color:rgba(2,22,41,.35)}
.hero[data-open="l"] .h-left .h-more,.hero[data-open="r"] .h-right .h-more{width:clamp(230px,calc(20vw / var(--z)),310px);opacity:1;transition:width .8s var(--ease),opacity .4s .45s}
.h-right{position:relative;display:block}
.h-main{height:100%;display:flex;flex-direction:column;gap:18px;transition:opacity .3s .25s}
.h-mid{flex:1;min-height:0;display:flex;align-items:center;gap:clamp(16px,calc(2.4vw / var(--z)),40px)}
.h-mid .tech{flex:1;min-width:0;height:100%}
.h-vtitle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font:900 clamp(84px,calc(15.2vh / var(--z)),150px)/.86 var(--display);text-transform:uppercase;color:var(--navy-deep);opacity:0;pointer-events:none;transition:opacity .25s}
/* the side that is not hovered folds down to its title */
.hero[data-open="r"] .h-body{opacity:0;flex-grow:0;width:0;overflow:hidden;transition:opacity .15s}
.hero[data-open="r"] .vert{margin-right:auto}
.hero[data-open="l"] .h-main{opacity:0;pointer-events:none;transition:opacity .15s}
.hero[data-open="l"] .h-vtitle{opacity:1;transition:opacity .4s .4s}
@media (max-width:860px){.h-left{flex-direction:column}.h-more,.h-vtitle{display:none}.h-body{gap:18px}}
@media (prefers-reduced-motion:reduce){.h-left,.h-right,.h-more,.vert{transition:none}}

.h-body{min-width:clamp(210px,calc(18vw / var(--z)),270px)}
.h-body .sun{margin:0 0 0 8%}
.hero[data-open="r"] .h-body{min-width:0}
.h-vtitle{gap:.06em}

/* ===== hero halves: calm duotone photos instead of the sun and the line drawing ===== */
.h-left::before,.h-left::after{display:none}
.h-right{background-image:none;animation:none;overflow:hidden}
.h-photo{position:absolute!important;inset:0;z-index:0!important;overflow:hidden;pointer-events:none}
.h-photo img{position:absolute;top:0;height:100%;width:calc(76vw / var(--z));max-width:none;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:opacity .9s,transform 2s var(--ease)}
.h-left .h-photo img{left:0;opacity:.3;mix-blend-mode:luminosity;object-position:50% 80%}
.h-right .h-photo img{right:0;opacity:.36;mix-blend-mode:multiply;object-position:50% 60%}
.h-left .h-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,32,61,.85),rgba(3,32,61,.25) 55%,rgba(3,32,61,.55))}
.h-right .h-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(99,156,197,.92),rgba(99,156,197,.15) 60%)}
.hero[data-open="l"] .h-left .h-photo img{opacity:.5;transform:scale(1.05)}
.hero[data-open="r"] .h-right .h-photo img{opacity:.55;transform:scale(1.05)}
.h-main,.h-vtitle{z-index:1}
.h-main{position:relative}
.h-body{justify-content:flex-end;min-width:0}
.h-mid{justify-content:flex-end}
@media (max-width:860px){.h-photo img{width:100%}.h-left,.h-right{min-height:calc(62vh / var(--z))}}
.h-right .h-more{background:rgba(99,156,197,.86);font-weight:600}
.h-left .h-more{background:rgba(3,32,61,.62)}
.h-more li{padding-left:18px;padding-right:18px}

/* news with dates and call status */
.news-list a{grid-template-columns:118px 1fr 40px;align-items:start}
.news-list .tag{font-size:16px;font-variant-numeric:tabular-nums;padding-top:.3em}
.news-list .t{font-size:clamp(18px,calc(1.9vw / var(--z)),24px);display:grid;gap:10px}
.news-list svg{margin-top:.2em}
.st{font-style:normal;font-size:13px;font-weight:600;justify-self:start;padding:3px 10px;border:1px solid var(--navy-line);color:var(--ice-dim)}
.st-open{border-color:var(--stone);color:var(--navy-deep);background:var(--stone)}
.st-paused{border-color:var(--stone);color:var(--stone)}
.news-note{margin-top:22px;font-size:14px;color:var(--ice-dim);max-width:80ch}
@media (max-width:620px){.news-list a{grid-template-columns:1fr}}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.st-kind-call{border-color:var(--red);color:var(--ice)}

/* ===== hero halves v3: horizontal titles, both sides built the same, list items animate in ===== */
.h-left{display:block;position:relative}
.h-left .h-title{color:var(--red)}
.h-title{font-size:clamp(40px,calc(4.7vw / var(--z)),80px);font-weight:900;line-height:.92;transition:font-size .8s var(--ease)}
.h-title span{display:block}
.h-foot{align-items:flex-end;transition:gap .4s}
.h-foot .btn{transition:opacity .3s .3s,color .3s var(--ease),border-color .3s;white-space:nowrap}
.h-mid{justify-content:flex-start;align-items:flex-end;padding-bottom:6px}
.h-more{width:auto!important;max-width:420px;opacity:1!important;overflow:visible;background:none!important;align-self:flex-end;pointer-events:none}
.h-more li{opacity:0;transform:translateY(22px);padding:13px 18px;transition:opacity .25s,transform .25s;background:rgba(3,32,61,.62)}
.h-right .h-more li{background:rgba(99,156,197,.86)}
.hero[data-open="l"] .h-left .h-more li,.hero[data-open="r"] .h-right .h-more li{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.hero[data-open] .h-more li:nth-child(1){transition-delay:.30s}
.hero[data-open] .h-more li:nth-child(2){transition-delay:.38s}
.hero[data-open] .h-more li:nth-child(3){transition-delay:.46s}
.hero[data-open] .h-more li:nth-child(4){transition-delay:.54s}
.hero[data-open] .h-more li:nth-child(5){transition-delay:.62s}
/* open side: title on one line */
.hero[data-open="l"] .h-left .h-title span,.hero[data-open="r"] .h-right .h-title span{display:inline}
/* folded side: smaller horizontal title, nothing else */
.hero[data-open="l"] .h-main,.hero[data-open="r"] .h-main{opacity:1;pointer-events:auto}
.hero[data-open="l"] .h-right .h-title,.hero[data-open="r"] .h-left .h-title{font-size:clamp(26px,calc(2.9vw / var(--z)),50px)}
.hero[data-open="l"] .h-right .btn,.hero[data-open="r"] .h-left .btn{opacity:0;pointer-events:none;transition:opacity .15s}
.hero[data-open="r"] .h-left,.hero[data-open="l"] .h-right{padding-left:clamp(16px,calc(2vw / var(--z)),32px);padding-right:clamp(16px,calc(2vw / var(--z)),32px)}
.h-left,.h-right{transition:flex-grow .8s var(--ease),padding .8s var(--ease)}
.h-back h2{font-size:clamp(40px,calc(5.3vw / var(--z)),76px)}
@media (max-width:860px){.h-more{display:none}.h-title span{display:inline}}
@media (prefers-reduced-motion:reduce){.h-more li,.h-title{transition:none}}
.h-foot{flex-direction:column;align-items:flex-start;gap:18px}

/* area name + always-visible line naming what it covers */
.h-sub{font-size:clamp(16px,calc(1.35vw / var(--z)),21px);font-weight:500;line-height:1.35;color:var(--ice);max-width:30ch;margin-top:-6px}
.h-foot .btn{align-self:flex-start}
/* statement typed out with a block cursor */
.h-back h2 .tw-line{display:block}
.h-back h2 .tw-alt{color:var(--stone)}
@media (min-width:861px){.h-back h2 .tw-line{white-space:nowrap}}
.tw-cur{display:inline-block;width:.46em;height:.74em;margin-left:.05em;background:currentColor;vertical-align:baseline}
.tw-blink{animation:twblink 1s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-blink{animation:none}}

/* statement: short white headline, smaller blue line under it */
.h-back h2{font-size:clamp(60px,calc(10vw / var(--z)),150px)}
.h-back h2 .tw-alt{font-size:.27em;line-height:1.08;max-width:30ch;margin-top:.5em;white-space:normal}
@media (max-width:860px){.h-back h2 .tw-alt{font-size:.36em}}
/* statement sizes: white line as before, blue line smaller and on two rows */
.h-back h2{font-size:clamp(40px,calc(5.3vw / var(--z)),76px)}
.h-back h2 .tw-alt{font-size:.5em;line-height:1.1;max-width:23em;margin-top:.45em;text-wrap:balance}
@media (max-width:860px){.h-back h2 .tw-alt{font-size:.5em;max-width:none}}

/* contact page */
.cinfo{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,calc(6vw / var(--z)),88px);align-items:stretch}
.cinfo h1{font-size:clamp(38px,calc(6vw / var(--z)),84px);font-weight:800}
.cinfo .col{align-content:start}
.cdata{margin:0;display:grid}
.cdata>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--navy-line)}
.cdata>div:last-child{border-bottom:1px solid var(--navy-line)}
.cdata dt{font-size:14px;font-weight:600;color:var(--stone);padding-top:.25em}
.cdata dd{margin:0;font-size:clamp(18px,calc(1.6vw / var(--z)),22px);font-weight:500}
.cdata a{text-decoration:none}
.cdata a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.cmap{position:relative;min-height:440px;border:1px solid var(--hl);background:var(--navy-deep)}
.cmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.05)}
.cmap-fallback{position:absolute;inset:0;margin:0;display:grid;place-content:center;gap:14px;text-align:center;padding:24px;color:var(--ice-dim)}
.cmap-fallback a{color:var(--ice)}
@media (max-width:860px){.cinfo{grid-template-columns:1fr}.cmap{min-height:340px}}
.cinfo{grid-template-columns:1fr 1fr}
.cdata>div{grid-template-columns:90px 1fr}

.cmap-fallback strong{color:var(--ice);font-size:18px;font-weight:600}
.cmap-fallback span{max-width:36ch;margin:0 auto;font-size:15px}
.cmap iframe[hidden]{display:none}

/* ===== header without a bar: logo left, Menu + Contact buttons right, slide-in menu panel ===== */
.top,.top.solid{background:none;backdrop-filter:none;border-color:transparent;pointer-events:none}
.top .wrap{min-height:0;padding-top:22px;align-items:flex-start;max-width:none;padding-left:clamp(16px,calc(2.4vw / var(--z)),40px);padding-right:clamp(16px,calc(2.4vw / var(--z)),40px)}
.top .logo,.hbtns{pointer-events:auto}
.logo img{height:64px}
.hbtns{display:flex;gap:14px;margin-left:auto}
.hbtn{display:flex;align-items:stretch;height:54px;padding:0;font:600 17px var(--body);color:var(--ice);border:1px solid var(--ice);background:rgba(2,22,41,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.hbtn span{display:flex;align-items:center;padding:0 18px;min-width:clamp(96px,calc(11vw / var(--z)),190px)}
.hbtn i{display:flex;align-items:center;justify-content:center;width:66px}
.hbtn-menu i{border-left:1px solid currentColor}
.hbtn-menu:hover{background:var(--ice);color:var(--navy-deep)}
.hbtn-contact{background:var(--red);border-color:var(--red);color:#fff}
.hbtn-contact span{min-width:clamp(96px,calc(13vw / var(--z)),210px)}
.hbtn-contact i svg{transition:transform .3s var(--ease)}
.hbtn-contact:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}
.hbtn-contact:hover i svg{transform:translateX(6px)}
@media (max-width:560px){.hbtn-contact{display:none}.hbtn span{min-width:0}.hbtn i{width:54px}.logo img{height:46px}}
.hero{padding-top:0}
.h-back{inset:0}
main.sub{padding-top:104px}

.menu{position:fixed;inset:0;z-index:60;visibility:hidden;transition:visibility 0s .5s}
.menu.open{visibility:visible;transition:none}
.menu-scrim{position:absolute;inset:0;background:rgba(2,22,41,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .45s}
.menu.open .menu-scrim{opacity:1}
.menu-panel{position:absolute;top:16px;right:16px;bottom:16px;width:min(620px,calc(calc(100vw / var(--z)) - 32px));background:var(--ice);color:var(--navy-deep);display:flex;flex-direction:column;overflow:auto;transform:translateX(calc(100% + 24px));transition:transform .55s var(--ease)}
.menu.open .menu-panel{transform:none}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding:18px 26px 34px}
.menu-top img{height:58px;width:auto}
.menu-x{background:none;border:0;color:inherit;cursor:pointer;padding:8px;transition:transform .3s var(--ease),color .2s}
.menu-x:hover{transform:rotate(90deg);color:var(--red)}
.menu-main{display:grid}
.menu-link{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px 26px;border:0;border-top:1px solid rgba(2,22,41,.28);background:none;color:inherit;text-decoration:none;text-align:left;cursor:pointer;font:800 clamp(34px,calc(4.2vw / var(--z)),54px)/1 var(--display);text-transform:uppercase;transition:padding .35s var(--ease),color .25s}
.menu-item:first-child .menu-link{border-top:0}
.menu-link:hover,.menu-link:focus-visible{color:var(--red);padding-left:40px}
.menu-link .pv{transition:transform .35s var(--ease);transform-origin:50% 50%}
.menu-link[aria-expanded="true"] .pv{transform:scaleY(0)}
.menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.menu-sub>div{overflow:hidden;display:grid}
.menu-link[aria-expanded="true"]+.menu-sub{grid-template-rows:1fr}
.menu-sub a{padding:10px 26px 10px 40px;font-size:19px;font-weight:500;text-decoration:none}
.menu-sub a:last-child{padding-bottom:22px}
.menu-sub a:hover{color:var(--red)}
.menu-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--navy-deep)}
.menu-foot>div{padding:22px 26px;display:grid;gap:8px;align-content:start;font-size:16px}
.menu-foot>div+div{border-left:1px solid rgba(2,22,41,.28)}
.menu-foot a{text-decoration:none}
.menu-foot a:hover{color:var(--red)}
.menu .lang{border:0;display:flex;align-items:center;gap:8px;align-content:end;align-self:end}
.menu .lang button{color:var(--navy-deep);padding:4px 0;font-size:16px;font-weight:500;background:none}
.menu .lang button[aria-pressed="true"]{background:none;color:var(--navy-deep);font-weight:800}
.menu :focus-visible{outline:2px solid var(--navy-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.menu-panel,.menu-scrim,.menu-sub{transition:none}}

/* ===== lighter overall: brighter video, raised (not recessed) dark panels, light bands for news and FAQ ===== */
:root{--panel:#07305A;--ink-soft:#3B5670;--blue-ink:#2A6798}
.contact,footer{background:var(--panel)}
.formbox{background:#0A3A6B;border-color:rgba(99,156,197,.45)}
form input,select,textarea{background:var(--navy);border-color:rgba(99,156,197,.4)}
.h-back::before{background:linear-gradient(90deg,rgba(2,22,41,.74) 0%,rgba(3,32,61,.42) 55%,rgba(3,32,61,.12) 100%),linear-gradient(0deg,rgba(2,22,41,.5),rgba(2,22,41,0) 40%)}
.h-left .h-photo img{opacity:.44}
.h-left .h-photo::after{background:linear-gradient(0deg,rgba(3,32,61,.8),rgba(3,32,61,.12) 55%,rgba(3,32,61,.35))}
.hero[data-open="l"] .h-left .h-photo img{opacity:.62}
.light{background:var(--ice);color:var(--navy-deep)}
.light h2{color:var(--navy)}
.light .lead,.light .news-note{color:var(--ink-soft)}
.light .news-list a,.light .news-list li:last-child a{border-color:rgba(2,22,41,.18)}
.light .news-list .tag{color:var(--blue-ink)}
.light .news-list a:hover{background:#fff}
.light .st{border-color:rgba(2,22,41,.3);color:var(--ink-soft)}
.light .st-open{background:var(--navy);border-color:var(--navy);color:#fff}
.light .st-paused{border-color:var(--blue-ink);color:var(--blue-ink)}
.light .st-kind-call{border-color:var(--red);color:var(--navy-deep)}
.light .btn-line{border-color:var(--navy);color:var(--navy)}
.light :focus-visible{outline-color:var(--navy)}
/* FAQ accordion (library component with fixed colours) on a light band */
.light [class*="bg-[#021629]"]{background-color:#fff!important}
.light [class*="text-[#A9C3DA]"],.light [class*="text-[#E9F1F8]"]{color:var(--navy-deep)!important}
.light [class*="border-[#1B3F63]"]{border-color:rgba(2,22,41,.16)!important}
.light [class*="border-l-[#1B3F63]"]{border-left-color:rgba(2,22,41,.25)!important}
.light [class*="border-l-[#EB2F33]"]{border-left-color:var(--red)!important}
.light [class*="border-[#E9F1F8]"]{border-color:var(--navy-deep)!important}
.light [class*="text-[#639CC5]"]{color:var(--blue-ink)!important}
.light [class*="text-[#EB2F33]"]{color:var(--red)!important}
.h-back h2,.h-back .lead{text-shadow:0 2px 22px rgba(2,22,41,.85),0 0 2px rgba(2,22,41,.5)}
.h-left .h-photo img{object-position:50% 38%}
.field .list{margin-top:26px}.field .col h2{margin-bottom:.35em}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,calc(2.4vw / var(--z)),36px);align-items:start}.duo .grow+.grow{margin-top:clamp(40px,calc(6vw / var(--z)),90px)}.duo .cx{left:0;top:calc(var(--s)*100% + 10px)}
@media (max-width:860px){.duo .cx{display:none}}
/* rail animation v2: lighter blueprint sheet */
.rail.v2{background:#0A3763}
.rail.v2::after{background:linear-gradient(90deg,rgba(7,48,90,.94) 0%,rgba(7,48,90,.7) 36%,rgba(7,48,90,0) 62%)}
@media (max-width:860px){.rail.v2::after{background:rgba(7,48,90,.8)}}

/* ===== mobile: app-like layout (top bar, bottom tab bar, cards, swipe rows) ===== */
@view-transition{navigation:auto}
.menu{overflow:hidden}
.tabs,.call{display:none}
@media (max-width:860px){
:root{--gut:18px;--tab:62px;--bar:58px}
html{scroll-padding-top:calc(var(--bar) + 8px)}
body{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
main{overflow-x:clip}
a,button{-webkit-tap-highlight-color:transparent}
/* top bar */
.top,.top.solid{height:var(--bar);background:rgba(2,22,41,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--navy-line);pointer-events:auto}
.top.hide{transform:none}
.top .wrap{height:100%;min-height:0;padding:0 8px 0 var(--gut);align-items:center}
.logo img{height:36px;width:auto}
.hbtn-contact{display:none}
.hbtn-menu{height:44px;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hbtn-menu span{display:none}
.hbtn-menu i{width:48px;border:0}
main.sub{padding-top:var(--bar)}
/* bottom tab bar */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(2,22,41,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--navy-line)}
.tabs a{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;font-size:11px;font-weight:600;color:var(--ice-dim);text-decoration:none;transition:color .2s,transform .15s}
.tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs a[aria-current]{color:#fff}
.tabs a[aria-current]::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--red)}
.tabs a:active,.btn:active{transform:scale(.96)}
/* menu as a full-screen sheet */
.menu-panel{top:0;right:0;bottom:0;width:calc(100vw / var(--z))}
.menu-top{padding:10px 10px 14px var(--gut)}
.menu-top img{height:38px}
.menu-link{font-size:34px;padding:17px var(--gut)}
.menu-sub a{padding:9px var(--gut) 9px 30px;font-size:17px}
.menu-foot>div{padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom))}
/* home: video screen, then two area cards */
.pin{height:auto}
.hero{display:block;position:static;height:auto;min-height:0;padding:var(--bar) 0 30px;overflow:visible}
.h-back{position:relative;inset:auto;min-height:calc(calc(100svh / var(--z)) - var(--bar) - var(--tab));padding:40px var(--gut) 34px;align-content:end;gap:18px;opacity:1!important;transform:none!important}
.h-back h2{font-size:clamp(40px,calc(12.5vw / var(--z)),58px)}
.h-back .btn{width:100%}
#podrucja{top:calc(calc(100svh / var(--z)) - var(--tab) - 6px)}
.split-cue{display:none}
.h-left,.h-right{display:block;min-height:0;padding:0;margin:16px var(--gut) 0;border:1px solid var(--navy-line);border-radius:4px;overflow:hidden;transform:none!important}
.h-photo{position:relative!important;inset:auto;height:200px}
.h-photo img{position:absolute;inset:0;left:0;width:100%;height:100%}
.h-main{height:auto;padding:20px 18px 20px;display:flex;flex-direction:column;gap:12px;opacity:1!important;pointer-events:auto!important}
.h-mid,.h-foot{display:contents}
.h-title{order:1;font-size:40px}
.h-title span{display:inline}
.h-sub{order:2;margin:0;max-width:none;font-size:16px}
.h-more{order:3;display:block!important;width:100%!important;max-width:none;align-self:stretch;margin:4px 0 0;padding:0;list-style:none;pointer-events:auto}
.h-more li{opacity:1;transform:none;background:none!important;padding:11px 0;border-top:1px solid rgba(233,241,248,.18);font-size:15px;font-weight:500}
.h-right .h-more li{border-color:rgba(2,22,41,.22)}
.h-foot .btn{order:4;width:100%;align-self:stretch;margin-top:8px}
/* sections */
.sec{padding:52px 0}
.btn{min-height:54px}
.col .btn,.calc .btn,.contact .btn,.rail .btn{width:100%;justify-self:stretch}
.lead{font-size:17px}
.list li{padding:14px 0}
.list li:hover{padding-left:0}
/* photos on phones: same measured-drawing growth as on desktop (frame lines, corner mark, X/Y read-out) */
.grow{aspect-ratio:4/5!important;width:78%;margin:0}
.grow::before,.gy{left:calc(-1*var(--gut));right:calc(-28.3% - var(--gut))}
.grow::after,.gx{top:-28px;bottom:-52px}
.cx,.cy{display:block!important;font-size:13px}
.cx{left:calc(var(--s)*100% + 12px);top:calc(var(--s)*100% - 26px)}
.cy{left:max(0px,calc(var(--s)*100% - 62px));top:calc(var(--s)*100% + 9px)}
.solar{gap:64px;padding-top:28px}
.frow{padding:56px 0 44px;gap:64px}
.frow .grow,.frow .duo{order:-1}
.duo{gap:12px}
.duo .grow{width:auto}
.duo .grow::before,.duo .gy{left:calc(-1*var(--gut));right:-6px}
.duo .grow+.grow::before,.duo .grow+.grow .gy{left:-6px;right:calc(-1*var(--gut))}
.duo .grow::after,.duo .gx{top:-22px;bottom:-40px}
.duo .cx,.duo .cy{font-size:12px;top:calc(var(--s)*100% + 7px)}
.duo .cx{left:0}
.duo .cy{left:62px}
.duo .grow+.grow{margin-top:28px}
.field h3{font-size:30px}
/* process: swipeable step cards */
.proc{gap:22px}
.psteps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 14px;scrollbar-width:none;counter-reset:st}
.psteps::-webkit-scrollbar,.news-list.swipe::-webkit-scrollbar{display:none}
.psteps li{flex:0 0 80%;scroll-snap-align:center;min-height:0;opacity:1;display:grid;align-content:start;gap:10px;padding:20px;border:1px solid var(--navy-line);border-radius:4px;background:var(--panel);counter-increment:st}
.psteps li::before{content:"0" counter(st);font:800 34px/1 var(--display);color:var(--stone)}
.psteps p{font-size:16px}
/* news */
.news-head{margin-bottom:18px;align-items:center;flex-wrap:nowrap}
.news-head .btn{width:auto;min-height:40px;padding:0 14px;font-size:14px}
.news-list a{grid-template-columns:1fr;gap:6px;padding:18px 0}
.news-list a:hover{padding-left:0;background:none}
.news-list .t{font-size:17px}
.news-list .tag{font-size:14px;padding:0}
.news-list.swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 14px;scrollbar-width:none}
.news-list.swipe li{flex:0 0 82%;scroll-snap-align:center;opacity:1;transform:none}
.news-list.swipe a{height:100%;align-content:start;padding:18px;background:#fff;border:1px solid rgba(2,22,41,.14)!important;border-radius:4px}
/* rail drawing as a block above the text */
.rail canvas{position:relative;inset:auto;height:290px}
.rail::after,.rail.v2::after{display:none}
.rail .wrap{padding-top:28px;padding-bottom:44px}
/* contact */
.cinfo{grid-template-columns:1fr!important;gap:24px}
.cdata>div{grid-template-columns:84px 1fr;padding:15px 0}
.call{display:inline-flex;width:100%;margin-top:20px}
.cmap{min-height:260px}
input,textarea,select{font-size:16px!important}
footer{padding:28px 0}
footer .wrap{flex-direction:column;align-items:flex-start}
footer img{height:44px}
}

/* ===== very large screens: scale the whole layout up instead of leaving a small island of content ===== */
@media (min-width:2100px){:root{zoom:1.15;--z:1.15}}
@media (min-width:2400px){:root{zoom:1.3;--z:1.3}}
@media (min-width:2800px){:root{zoom:1.5;--z:1.5}}
@media (min-width:3200px){:root{zoom:1.75;--z:1.75}}
@media (min-width:3700px){:root{zoom:2;--z:2}}
/* light band used for a photo section */
.field.light{--hl:rgba(2,22,41,.16);border-bottom:0}
.light h3{color:var(--navy)}
.light .cx,.light .cy{color:var(--ink-soft)}

/* ===== text animation: headings rise word by word, list rows come in one after another ===== */
.js .rv.sw{opacity:1;transform:none}
.sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .08em;margin:-.14em 0 -.08em}
.sw .w>span{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0)*.07s)}
.sw.in .w>span{transform:none}
.js .list.rv{opacity:1;transform:none}
.js .list.rv li{opacity:0;transform:translateX(-22px);transition:opacity .6s var(--ease) calc(var(--d,0s) + var(--i,0)*.09s),transform .6s var(--ease) calc(var(--d,0s) + var(--i,0)*.09s),padding .3s var(--ease),color .3s}
.js .list.rv.in li{opacity:1;transform:none}
.list li:nth-child(2){--i:1}.list li:nth-child(3){--i:2}.list li:nth-child(4){--i:3}.list li:nth-child(5){--i:4}.list li:nth-child(6){--i:5}
@media (prefers-reduced-motion:reduce){
  .sw .w>span{transform:none;opacity:0;transition:opacity .8s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0)*.09s)}
  .sw.in .w>span{opacity:1}
  .js .list.rv li{transform:none}
}

/* phones: area cards on the home page build up their text when they come into view */
@media (max-width:860px){
.hcard .h-foot .btn{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) 1.25s,transform .6s var(--ease) 1.25s}
.hcard.in .h-foot .btn{opacity:1;transform:none}
.hcard .tw-cur{height:.7em}
.hcard .h-photo img{transform:scale(1.2);transition:transform 1.8s var(--ease)}
.hcard.in .h-photo img{transform:none}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
.hcard .h-foot .btn,.hcard .h-photo img{transform:none}
}

/* contact form extras + legal page */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.fnote{font-size:13px;color:var(--ice-dim);margin:2px 0 0}
.fnote a{color:inherit}
.status.ok{color:#8fe3b0}.status.err{color:#ff9d9f}
.legal .wrap{max-width:860px}
.legal h1{font-size:clamp(38px,calc(6vw / var(--z)),84px);font-weight:800;margin-bottom:.5em}
.legal h2{font-size:clamp(24px,calc(2.4vw / var(--z)),32px);margin:1.6em 0 .4em}
.legal p{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:70ch}
.legal .upd{margin-top:2.2em;font-size:15px}