/* INRI d.o.o. — početna stranica prema odobrenom mockupu */

:root{
  --navy:#031421;
  --navy2:#061a2a;
  --navy3:#001221;
  --blue:#0a66d8;
  --blue2:#1682ff;
  --ink:#071629;
  --muted:#5f6c79;
  --line:#d8dee6;
  --white:#ffffff;
  --off:#f6f8fb;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",Arial,sans-serif;color:var(--ink);background:white}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.content{width:min(1180px,92%);margin:0 auto}

.topbar{
  height:72px;
  background:var(--navy);
  color:white;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:1000;
}
.topbar__inner{
  width:min(1180px,96%);
  margin:0 auto;
  display:flex;
  align-items:center;
  height:100%;
}
.brand{
  width:165px;
  align-self:stretch;
  padding:8px 0 7px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent;
}
.brand__top{
  display:flex;
  align-items:flex-end;
  gap:7px;
  line-height:1;
}
.brand__top img{
  width:118px;
  height:34px;
  object-fit:contain;
  object-position:left center;
}
.brand__doo{
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1;
  margin-bottom:2px;
}
.brand__subtitle{
  margin-top:3px;
  color:#fff;
  font-size:7.7px;
  font-weight:600;
  letter-spacing:.3px;
  white-space:nowrap;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:82px;
  white-space:nowrap;
}
.main-nav a{
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.main-nav a:hover{opacity:.7}
.topbar__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
  white-space:nowrap;
}
.lang{display:flex;gap:7px;font-size:11px;font-weight:700}
.lang a{opacity:.72}
.lang .active{opacity:1}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  font-size:11px;
  font-weight:800;
  min-height:36px;
  padding:0 20px;
  white-space:nowrap;
}
.btn--small{min-height:34px;padding:0 18px}
.btn--blue{background:var(--blue);color:white}
.btn--blue:hover{background:var(--blue2)}
.btn--outline{border:1px solid rgba(255,255,255,.75);color:white;background:rgba(0,0,0,.12)}
.btn--ghost{border:1px solid #4c7fbe;color:#1656a5;background:white}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:white;font-size:24px}

/* HERO */
.hero{
  height:394px;
  position:relative;
  background:#061522;
  overflow:hidden;
}
.hero__ship{position:relative;overflow:hidden}
.hero__ship>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
}
.hero__ship>img{object-position:54% 52%}
.hero__switchboard>img{display:none}
.hero__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(2,12,22,.80) 0%,
    rgba(2,12,22,.58) 34%,
    rgba(2,12,22,.20) 62%,
    rgba(2,12,22,.05) 100%);
}
.hero__content{
  position:absolute;
  left:4.8%;
  top:50%;
  transform:translateY(-42%);
  width:92%;
  max-width:620px;
  color:white;
}
.hero__content h1{
  font-size:36px;
  line-height:1.07;
  letter-spacing:-1.2px;
  font-weight:800;
  margin-bottom:15px;
}
.hero__content p{
  font-size:13px;
  line-height:1.55;
  margin-top:10px;
  color:rgba(255,255,255,.95);
}
.hero__buttons{display:flex;gap:15px;margin-top:21px}

/* ABOUT */
.about{background:linear-gradient(110deg,#fff 0%,#f5f7fa 100%);padding:28px 0 20px}
.about .content{display:grid;grid-template-columns:38% 62%;align-items:stretch}
.section-tag{
  color:#0864ca;
  font-weight:800;
  font-size:10px;
  display:block;
  margin-bottom:8px;
}
.about__intro{padding-right:40px}
.about__intro h2{
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.2px;
  margin-bottom:13px;
}
.about__intro p{
  font-size:10.2px;
  line-height:1.55;
  margin-bottom:3px;
  color:#1a2632;
}
.about__intro .btn{margin-top:12px}
.about__features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
}
.feature{
  min-height:135px;
  border-left:1px solid #d8dde4;
  text-align:center;
  padding:1px 18px;
}
.feature__icon{
  width:50px;height:50px;margin:0 auto 10px;
}
.feature__icon svg{
  width:100%;height:100%;
  fill:none;stroke:#0c67d4;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.feature h3{font-size:10px;margin-bottom:8px}
.feature p{font-size:9px;line-height:1.55;color:#22313f}

/* SERVICES */
.services{background:linear-gradient(90deg,#001425 0%,#00233a 50%,#001829 100%);padding:20px 0 22px;color:white}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-head h2{font-size:19px;line-height:1.08}
.section-head--dark .section-tag{color:#1e8cff}
.services__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.service-card{border:1px solid rgba(255,255,255,.45);background:#06192a}
.service-card img{width:100%;height:107px;object-fit:cover}
.service-card__body{padding:8px 10px 11px}
.service-card__body>span{display:block;color:#1687ff;font-size:13px;margin-bottom:3px}
.service-card h3{font-size:11px;line-height:1.22;min-height:28px;margin-bottom:8px}
.service-card p{font-size:8.9px;line-height:1.55;color:#eef4f9}


/* PROJECTS */
.projects{
  background:linear-gradient(110deg,#ffffff 0%,#f5f7fa 100%);
  padding:18px 0 12px;
}
.projects__head{
  margin-bottom:10px;
}
.projects__head h2{
  font-size:18px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.3px;
}
.projects__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.project-card{
  background:#fff;
  border:1px solid #d5dce5;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 1px 1px rgba(0,0,0,.02);
}
.project-card img{
  width:100%;
  height:96px;
  object-fit:cover;
}
.project-card__body{
  padding:10px 12px 11px;
}
.project-card h3{
  font-size:10.5px;
  line-height:1.25;
  margin-bottom:5px;
  font-weight:800;
}
.project-card p{
  font-size:8.9px;
  line-height:1.5;
  color:#182635;
}
.project-card p + p{
  margin-top:1px;
}
.project-card a{
  display:inline-block;
  margin-top:7px;
  color:#0c61c3;
  font-size:9px;
  font-weight:800;
}
.project-card a span{
  margin-left:4px;
  font-size:12px;
}
.projects .btn--ghost{
  height:33px;
  padding:0 19px;
  border-color:#2f70bd;
  font-size:9px;
}

/* CTA */
.cta{
  height:108px;
  display:grid;
  grid-template-columns:190px 1fr 190px;
  align-items:center;
  background:linear-gradient(90deg,#08243a 0%,#0b2f4c 48%,#082540 100%);
  color:#fff;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.05);
}
.cta__ship{
  grid-column:1;
  height:108px;
  position:relative;
  overflow:hidden;
}
.cta__ship::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,21,35,.15),rgba(3,21,35,.5));
}
.cta__ship img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.72) saturate(.82);
}
.cta__copy{display:none}
.cta__copy h2{
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:4px;
}
.cta__copy p{
  font-size:10.5px;
  line-height:1.25;
  color:rgba(255,255,255,.92);
}
.cta__button{
  min-width:120px;
  min-height:26px;
  padding:0 13px;
  font-size:7.8px;
  border-radius:2px;
}

/* FOOTER */
.footer{
  background:#00111f;
  color:#fff;
  padding:14px 0 13px;
  border-top:1px solid rgba(255,255,255,.035);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.35fr 1.1fr .75fr 1.15fr .6fr;
  gap:28px;
  align-items:start;
}
.footer__logo-line{
  display:flex;
  align-items:flex-end;
  gap:5px;
}
.footer__logo-line img{
  width:92px;
  height:27px;
  object-fit:contain;
  object-position:left center;
}
.footer__doo{
  font-size:7.5px!important;
  margin:0 0 1px 0!important;
  color:#fff;
}
.footer__subtitle{
  display:block;
  margin-top:2px;
  font-size:6px;
  color:#fff;
  letter-spacing:.15px;
}
.footer__brand p{
  max-width:175px;
  margin:6px 0 8px;
  font-size:6.8px;
  line-height:1.45;
  color:rgba(255,255,255,.92);
}
.footer small{
  font-size:6.4px;
  color:rgba(255,255,255,.78);
}
.footer h4{
  font-size:7px;
  font-weight:800;
  margin-bottom:6px;
}
.footer__col p,
.footer__col a{
  display:block;
  font-size:6.7px;
  line-height:1.5;
  color:rgba(255,255,255,.92);
}
.footer__col a:hover{
  color:#4a9cff;
}
.socials{
  display:flex;
  gap:12px;
  margin-top:2px;
}
.socials a{
  font-size:14px!important;
  font-weight:800;
  line-height:1;
  color:#fff!important;
}

/* Responsive lower section */
@media(max-width:1000px){
  .projects__grid{gap:14px}
  .cta{grid-template-columns:180px 1fr 190px}
  .footer__grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .projects__head .btn{display:none}
  .projects__grid{grid-template-columns:1fr}
  .project-card img{height:180px}

  .cta{
    grid-template-columns:1fr;
    min-height:auto;
    padding-bottom:18px;
  }
  .cta__ship{height:130px}
  .cta__copy{padding:18px}
  .cta__button{margin:0 auto}

  .footer__grid{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  .footer__grid{grid-template-columns:1fr}
}

.cta__center{
  grid-column:2;
  text-align:center;
  padding:10px 20px 6px;
  align-self:center;
}
.cta__center h2{
  font-size:13px;
  line-height:1.12;
  font-weight:800;
  margin-bottom:3px;
}
.cta__center p{
  font-size:9.5px;
  line-height:1.2;
  color:rgba(255,255,255,.94);
  margin-bottom:7px;
}
.cta__center .cta__button{
  min-height:27px;
  padding:0 18px;
  font-size:8.7px;
}

@media (max-width:1100px){
  .brand{width:165px}
  .main-nav{margin-left:45px;gap:24px}
  .main-nav a{font-size:11px}
}

/* v7 finishing overrides */
.topbar__inner{min-width:0}
.main-nav a{white-space:nowrap}
@media (min-width:1001px){
  .main-nav{flex-wrap:nowrap}
}
@media (max-width:760px){
  .hero{height:620px}
  .hero__ship{height:100%}
  .hero__content{left:6%;width:88%;transform:translateY(-30%)}
  .cta{height:auto;grid-template-columns:1fr}
  .cta__ship{grid-column:1;height:115px}
  .cta__center{grid-column:1;padding:15px 18px 18px}
}


/* ======================================================
   V8 FINAL OVERRIDES — hero + CTA + footer per reference
   ====================================================== */

/* HEADER */
.topbar{
  height:76px;
  background:#031421;
}
.topbar__inner{
  width:min(1180px,94%);
  margin:0 auto;
}
.brand{
  width:175px;
  padding:8px 0 6px;
}
.brand__top img{
  width:120px;
  height:34px;
}
.brand__doo{
  font-size:11px;
  margin-bottom:2px;
}
.brand__subtitle{
  font-size:7.8px;
  margin-top:3px;
}
.main-nav{
  margin-left:96px;
  gap:42px;
}
.main-nav a{
  font-size:11px;
  white-space:nowrap;
}
.topbar__actions{
  gap:20px;
}
.lang{
  font-size:10px;
}
.header-cta,.topbar .btn--small{
  min-height:34px;
  padding:0 18px;
  font-size:9px;
}

/* HERO */
.hero{
  position:relative;
  height:560px;
  overflow:hidden;
  background:#061522;
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(3,14,26,.78) 0%,
      rgba(3,14,26,.62) 26%,
      rgba(3,14,26,.32) 52%,
      rgba(3,14,26,.08) 100%);
}
.hero__content{
  position:absolute;
  left:max(5.5%,calc((100% - 1180px)/2));
  top:50%;
  transform:translateY(-47%);
  width:540px;
  color:#fff;
}
.hero__content h1{
  font-size:51px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1.6px;
  margin:0;
}
.hero__content h1 span{
  color:#2f7de6;
}
.hero__line{
  width:56px;
  height:3px;
  background:#167cff;
  margin:24px 0 22px;
}
.hero__content p{
  font-size:16px;
  line-height:1.5;
  color:rgba(255,255,255,.95);
}
.hero__buttons{
  display:flex;
  gap:14px;
  margin-top:28px;
}
.hero__buttons .btn{
  min-height:49px;
  padding:0 28px;
  font-size:11px;
}
.hero__buttons .btn--outline{
  border:1px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.14);
}

/* CTA EXACTLY COMPACT LIKE REFERENCE */
.cta{
  height:105px;
  display:grid;
  grid-template-columns:205px 1fr 205px;
  align-items:center;
  background:
    linear-gradient(90deg,#0a2944 0%,#0d3557 52%,#082840 100%);
  color:#fff;
  overflow:hidden;
}
.cta__ship{
  grid-column:1;
  height:105px;
  overflow:hidden;
}
.cta__ship img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.76) saturate(.85);
}
.cta__center{
  grid-column:2;
  text-align:center;
  align-self:center;
  padding:0 20px;
}
.cta__center h2{
  font-size:13px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:4px;
}
.cta__center p{
  font-size:9.3px;
  line-height:1.18;
  color:rgba(255,255,255,.94);
  margin-bottom:7px;
}
.cta__center .cta__button{
  min-width:118px;
  min-height:27px;
  padding:0 13px;
  border-radius:2px;
  font-size:7.7px;
}

/* FOOTER EXACTLY COMPACT */
.footer{
  background:#00111f;
  color:#fff;
  padding:14px 0 12px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.25fr 1.15fr .75fr 1.25fr .75fr;
  gap:30px;
  align-items:start;
}
.footer__logo-line{
  display:flex;
  align-items:flex-end;
  gap:4px;
}
.footer__logo-line img{
  width:94px;
  height:27px;
  object-fit:contain;
  object-position:left center;
}
.footer__doo{
  font-size:7.5px!important;
  margin:0 0 1px 0!important;
}
.footer__subtitle{
  display:block;
  margin-top:2px;
  font-size:6.2px;
  letter-spacing:.15px;
}
.footer__brand p{
  margin:6px 0 8px;
  font-size:6.7px;
  line-height:1.45;
  color:rgba(255,255,255,.92);
}
.footer small{
  font-size:6.2px;
  color:rgba(255,255,255,.8);
}
.footer h4{
  font-size:6.8px;
  margin-bottom:6px;
}
.footer__col p,
.footer__col a{
  display:block;
  font-size:6.6px;
  line-height:1.45;
  color:rgba(255,255,255,.94);
}
.socials{
  display:flex;
  gap:12px;
  margin-top:1px;
}
.socials a{
  font-size:14px!important;
  font-weight:800;
  line-height:1;
  color:#fff!important;
}
.footer__social{
  position:relative;
  min-height:74px;
}
.footer__credit{
  position:absolute;
  left:0;
  bottom:0;
  white-space:nowrap;
  font-size:5.8px;
  color:rgba(255,255,255,.62);
}

/* RESPONSIVE */
@media (max-width:1000px){
  .main-nav{margin-left:45px;gap:24px}
  .hero__content{left:6%;width:500px}
  .hero__content h1{font-size:44px}
  .cta{grid-template-columns:175px 1fr 175px}
  .footer__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .hero{height:620px}
  .hero__bg{object-position:64% center}
  .hero__content{
    left:6%;
    right:6%;
    width:auto;
    top:auto;
    bottom:58px;
    transform:none;
  }
  .hero__content h1{font-size:36px}
  .hero__content p{font-size:14px}
  .hero__buttons{flex-direction:column;align-items:flex-start}

  .cta{
    height:auto;
    display:block;
  }
  .cta__ship{height:125px}
  .cta__center{padding:16px 20px 18px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__credit{position:static;margin-top:14px}
}
@media (max-width:480px){
  .hero__content h1{font-size:31px}
  .footer__grid{grid-template-columns:1fr}
}


/* ======================================================
   V9 FOOTER FINAL — single desktop row per reference
   ====================================================== */

.footer{
  background:#00111f;
  color:#fff;
  padding:15px 0 13px;
  border-top:1px solid rgba(255,255,255,.035);
}

.footer .content{
  width:min(1180px,92%);
  margin:0 auto;
}

.footer__grid{
  display:grid !important;
  grid-template-columns:1.18fr 1.05fr .58fr 1.18fr .55fr !important;
  gap:24px !important;
  align-items:start;
}

.footer__brand,
.footer__col{
  min-width:0;
}

.footer__logo-line{
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.footer__logo-line img{
  width:92px;
  height:27px;
  object-fit:contain;
  object-position:left center;
}

.footer__doo{
  font-size:7px !important;
  margin:0 0 1px 0 !important;
  line-height:1;
  white-space:nowrap;
}

.footer__subtitle{
  display:block;
  margin-top:2px;
  font-size:5.9px;
  line-height:1.2;
  letter-spacing:.13px;
  white-space:nowrap;
}

.footer__brand p{
  margin:7px 0 9px;
  font-size:6.4px;
  line-height:1.42;
  color:rgba(255,255,255,.92);
}

.footer small{
  font-size:5.9px;
  line-height:1.2;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
}

.footer h4{
  font-size:6.7px;
  line-height:1.2;
  font-weight:800;
  margin-bottom:6px;
  white-space:nowrap;
}

.footer__col p,
.footer__col a{
  display:block;
  font-size:6.35px;
  line-height:1.48;
  color:rgba(255,255,255,.94);
}

.footer__contact p{
  margin-bottom:1px;
}

.footer__services a{
  white-space:nowrap;
}

.socials{
  display:flex;
  gap:12px;
  margin-top:2px;
}

.socials a{
  font-size:13px !important;
  font-weight:800;
  line-height:1;
  color:#fff !important;
}

.footer__social{
  position:relative;
  min-height:74px;
}

.footer__credit{
  position:absolute;
  right:0;
  bottom:0;
  font-size:5.4px;
  line-height:1.2;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}

/* Keep five columns on normal desktop/laptop widths.
   Only stack when the viewport is genuinely tablet-size. */
@media (max-width: 760px){
  .footer__grid{
    grid-template-columns:1fr 1fr !important;
    gap:22px !important;
  }
  .footer__services a{white-space:normal}
  .footer__credit{
    position:static;
    margin-top:14px;
  }
}

@media (max-width: 480px){
  .footer__grid{
    grid-template-columns:1fr !important;
  }
}


/* ======================================================
   V10 FINAL — footer typography + location icon + CTA fade
   ====================================================== */

/* Footer: increase heading/body font sizes */
.footer h4{
  font-size:8.2px !important;
  line-height:1.2;
  font-weight:800;
  margin-bottom:7px;
  white-space:nowrap;
}

.footer__col p,
.footer__col a{
  display:block;
  font-size:7.4px !important;
  line-height:1.52;
  color:rgba(255,255,255,.95);
}

.footer__brand p{
  font-size:7.1px !important;
  line-height:1.48;
}

.footer small{
  font-size:6.6px !important;
}

.footer__subtitle{
  font-size:6.5px !important;
}

.location-icon{
  font-size:8.5px;
  line-height:1;
  vertical-align:-1px;
}

/* CTA: natural ship-to-blue transition */
.cta{
  height:108px;
  display:grid;
  grid-template-columns:265px 1fr 190px;
  align-items:center;
  background:
    linear-gradient(90deg,
      #061d30 0%,
      #082944 48%,
      #0a3353 72%,
      #092d49 100%);
  color:#fff;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.04);
}

.cta__ship{
  grid-column:1;
  height:108px;
  position:relative;
  overflow:hidden;
  background:#061d30;
}

.cta__ship img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 44%;
  filter:brightness(.84) saturate(.88);
  transform:scale(1.03);
}

.cta__ship-fade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(6,29,48,0.02) 0%,
      rgba(6,29,48,0.08) 52%,
      rgba(7,33,54,0.36) 74%,
      rgba(8,41,68,0.95) 100%);
  pointer-events:none;
}

.cta__center{
  grid-column:2;
  text-align:center;
  align-self:center;
  padding:0 16px;
}

.cta__center h2{
  font-size:13.2px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:4px;
}

.cta__center p{
  font-size:9.6px;
  line-height:1.2;
  color:rgba(255,255,255,.94);
  margin-bottom:7px;
}

@media (max-width:760px){
  .cta{
    height:auto;
    display:block;
  }
  .cta__ship{
    height:130px;
  }
  .cta__ship-fade{
    background:
      linear-gradient(180deg,
        rgba(6,29,48,0.00) 0%,
        rgba(6,29,48,0.12) 58%,
        rgba(8,41,68,0.88) 100%);
  }
  .cta__center{
    padding:16px 20px 18px;
  }
}

/* FINAL CONTENT — approved images and unified page background */
:root{--page-bg:#f5f7fa;}
.about,.projects{background:var(--page-bg)!important;}
.projects{padding-top:38px;padding-bottom:34px;}
.projects__lead{margin-top:6px;font-size:13px;color:#27384d;}
.projects__grid--four{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;}
.project-card--simple{overflow:hidden;border:1px solid rgba(10,45,75,.14);background:#fff;box-shadow:none;}
.project-card--simple img{display:block;width:100%;height:150px;object-fit:cover;}
.project-card--simple .project-card__body{padding:11px 12px 12px;}
.project-card--simple h3{margin:0;font-size:13px;line-height:1.2;text-transform:none;}
.service-card img{object-fit:cover;}
.service-card:nth-child(1) img{object-position:center center;}
.service-card:nth-child(2) img{object-position:center 36%;}
.service-card:nth-child(3) img{object-position:center 35%;}
.service-card:nth-child(4) img{object-position:center center;}
.service-card:nth-child(5) img{object-position:center center;background:#fff;}
.service-card:nth-child(6) img{object-position:center center;}
@media(max-width:900px){.projects__grid--four{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:520px){.projects__grid--four{grid-template-columns:1fr!important;}.project-card--simple img{height:210px;}}

/* =========================================================
   FINAL — unified blue theme + continuous ship CTA + footer
   ========================================================= */

:root{
  --inri-bg:#061a2b;
  --inri-bg2:#08233a;
  --inri-bg3:#0a2f4d;
  --inri-accent:#1682ff;
  --inri-text:#ffffff;
  --inri-muted:rgba(255,255,255,.84);
  --inri-line:rgba(255,255,255,.10);
}

html,body{
  background:#061a2b !important;
  color:#fff !important;
}

/* Entire content stays in a blue family */
.about,
.services,
.projects{
  background:linear-gradient(180deg,#08233a 0%,#071d31 100%) !important;
  color:#fff !important;
  border-top:1px solid var(--inri-line) !important;
}

.about h2,.about p,
.services h2,.services p,
.projects h2,.projects p,
.project-card h3,.project-card p{
  color:#fff !important;
}

.section-tag{color:#2d91ff !important}
.about__intro p{color:rgba(255,255,255,.84) !important}

.service-card,
.project-card,
.project-card__body{
  background:#06192a !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

.service-card p,
.project-card p{
  color:rgba(255,255,255,.88) !important;
}

.projects .btn--ghost{
  background:transparent !important;
  color:#fff !important;
  border-color:#4f9fff !important;
}

/* CTA full-width photographic background, no abrupt transition */
.cta{
  position:relative !important;
  height:118px !important;
  min-height:118px !important;
  overflow:hidden !important;
  background:#082842 !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}

.cta__bg{
  position:absolute;
  inset:0;
  background-image:url("../images/cta/cta-ship.jpg");
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
  filter:brightness(.74) saturate(.84);
  transform:scale(1.02);
}

.cta__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(3,20,34,.10) 0%,
      rgba(3,20,34,.20) 20%,
      rgba(5,29,48,.42) 46%,
      rgba(6,37,61,.62) 66%,
      rgba(6,37,61,.72) 100%);
}

.cta__center{
  position:relative !important;
  z-index:2 !important;
  width:min(760px,72%) !important;
  margin:0 auto !important;
  padding:18px 20px 12px !important;
  text-align:center !important;
}

.cta__center h2{
  color:#fff !important;
  font-size:13px !important;
  line-height:1.15 !important;
  margin-bottom:4px !important;
  font-weight:800 !important;
}

.cta__center p{
  color:rgba(255,255,255,.94) !important;
  font-size:9.6px !important;
  line-height:1.2 !important;
  margin-bottom:7px !important;
}

.cta__button{
  min-height:28px !important;
  padding:0 14px !important;
  font-size:8px !important;
}

/* Footer */
.footer{
  background:linear-gradient(180deg,#051724 0%,#03121d 100%) !important;
  color:#fff !important;
  padding:16px 0 14px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}

.footer .content{
  width:min(1180px,92%) !important;
}

.footer__grid{
  display:grid !important;
  grid-template-columns:1.22fr 1.12fr .70fr 1.25fr .62fr !important;
  gap:30px !important;
  align-items:start !important;
}

.footer__logo-line{
  display:flex !important;
  align-items:flex-end !important;
  gap:4px !important;
}
.footer__logo-line img{
  width:104px !important;
  height:30px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.footer__doo{
  font-size:8px !important;
  line-height:1 !important;
  margin-bottom:1px !important;
}
.footer__subtitle{
  display:block !important;
  margin-top:2px !important;
  font-size:6.5px !important;
}
.footer__brand p{
  margin:8px 0 10px !important;
  font-size:7.2px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.92) !important;
}
.footer small{
  font-size:6.4px !important;
  color:rgba(255,255,255,.80) !important;
}

.footer h4{
  font-size:8px !important;
  line-height:1.2 !important;
  margin-bottom:7px !important;
  font-weight:800 !important;
}

.footer__col a,
.footer__col p{
  color:rgba(255,255,255,.95) !important;
  font-size:7.2px !important;
  line-height:1.5 !important;
}

.footer__contact p{
  display:grid !important;
  grid-template-columns:16px 1fr !important;
  column-gap:7px !important;
  align-items:start !important;
  margin-bottom:3px !important;
}

.footer-icon{
  display:inline-block !important;
  width:16px !important;
  text-align:center !important;
  font-size:9px !important;
  line-height:1.4 !important;
}

.socials{
  display:flex !important;
  gap:14px !important;
  margin-top:2px !important;
}
.socials a{
  font-size:16px !important;
  font-weight:800 !important;
  color:#fff !important;
}

.footer__social{
  position:relative !important;
  min-height:82px !important;
}

.footer__credit{
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  white-space:nowrap !important;
  font-size:5.8px !important;
  color:rgba(255,255,255,.62) !important;
}

/* Mobile */
@media(max-width:760px){
  .cta{
    height:190px !important;
    min-height:190px !important;
  }
  .cta__bg{
    background-position:35% center !important;
  }
  .cta__overlay{
    background:
      linear-gradient(180deg,
        rgba(3,20,34,.22) 0%,
        rgba(3,20,34,.48) 52%,
        rgba(3,20,34,.78) 100%) !important;
  }
  .cta__center{
    width:100% !important;
    padding:34px 18px 22px !important;
  }

  .footer__grid{
    grid-template-columns:1fr 1fr !important;
    gap:22px !important;
  }
  .footer__credit{
    position:static !important;
    margin-top:14px !important;
  }
}

@media(max-width:480px){
  .footer__grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   FOOTER — exact reference layout
   ========================================================= */

.cta{
  height:96px !important;
  min-height:96px !important;
  display:grid !important;
  grid-template-columns:190px 1fr 190px !important;
  align-items:center !important;
  overflow:hidden !important;
  position:relative !important;
  background:linear-gradient(90deg,#08243a 0%,#0a2d49 55%,#08243a 100%) !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.04) !important;
}

.cta__ship{
  height:96px !important;
  width:100% !important;
  overflow:hidden !important;
  position:relative !important;
}

.cta__ship img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 45% !important;
  filter:brightness(.78) saturate(.82) !important;
}

/* Very soft transition like the reference */
.cta__ship::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,
    rgba(8,36,58,0) 0%,
    rgba(8,36,58,.02) 48%,
    rgba(8,36,58,.16) 68%,
    rgba(8,36,58,.48) 86%,
    rgba(8,36,58,.96) 100%) !important;
  pointer-events:none !important;
}

.cta__copy{
  grid-column:2 !important;
  text-align:center !important;
  padding:0 20px !important;
}

.cta__copy h2{
  font-size:11px !important;
  line-height:1.15 !important;
  margin:0 0 4px !important;
  font-weight:800 !important;
  color:#fff !important;
}

.cta__copy p{
  font-size:8px !important;
  line-height:1.2 !important;
  margin:0 0 7px !important;
  color:rgba(255,255,255,.93) !important;
}

.cta__button{
  min-height:25px !important;
  padding:0 14px !important;
  font-size:7px !important;
  border-radius:2px !important;
}

.footer{
  background:#00111f !important;
  color:#fff !important;
  padding:12px 0 11px !important;
  border-top:1px solid rgba(255,255,255,.035) !important;
}

.footer .content{
  width:min(1180px,92%) !important;
  margin:0 auto !important;
}

.footer__grid{
  display:grid !important;
  grid-template-columns:1.22fr 1.08fr .72fr 1.20fr .60fr !important;
  gap:24px !important;
  align-items:start !important;
}

.footer__brand,
.footer__col{
  min-width:0 !important;
}

.footer__logo-line{
  display:flex !important;
  align-items:flex-end !important;
  gap:4px !important;
}

.footer__logo-line img{
  width:88px !important;
  height:25px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.footer__doo{
  font-size:6.4px !important;
  line-height:1 !important;
  margin:0 0 1px 0 !important;
  color:#fff !important;
}

.footer__subtitle{
  display:block !important;
  margin-top:2px !important;
  font-size:5.4px !important;
  line-height:1.15 !important;
  color:#fff !important;
  letter-spacing:.1px !important;
}

.footer__brand p{
  margin:6px 0 7px !important;
  font-size:5.8px !important;
  line-height:1.42 !important;
  color:rgba(255,255,255,.88) !important;
}

.footer small{
  font-size:5.2px !important;
  color:rgba(255,255,255,.75) !important;
  white-space:nowrap !important;
}

.footer h4{
  font-size:6.2px !important;
  line-height:1.15 !important;
  margin-bottom:5px !important;
  font-weight:800 !important;
  color:#fff !important;
}

.footer__col a,
.footer__col p{
  font-size:5.8px !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.93) !important;
}

.footer__contact p{
  display:grid !important;
  grid-template-columns:13px 1fr !important;
  column-gap:5px !important;
  align-items:start !important;
  margin:0 0 2px !important;
}

.contact-icon{
  width:13px !important;
  text-align:center !important;
  font-size:7px !important;
  line-height:1.35 !important;
  color:#fff !important;
}

.location-icon{
  font-size:6.5px !important;
}

.footer__links a,
.footer__services a{
  display:block !important;
  margin:0 !important;
}

.footer__services a{
  white-space:nowrap !important;
}

.socials{
  display:flex !important;
  gap:11px !important;
  margin-top:1px !important;
}

.socials a{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#fff !important;
}

.footer__social{
  position:relative !important;
  min-height:66px !important;
}

.footer__credit{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  white-space:nowrap !important;
  font-size:4.8px !important;
  color:rgba(255,255,255,.55) !important;
}

@media(max-width:760px){
  .cta{
    height:auto !important;
    min-height:170px !important;
    display:block !important;
  }
  .cta__ship{
    height:100px !important;
  }
  .cta__ship::after{
    background:linear-gradient(180deg,
      rgba(8,36,58,0) 0%,
      rgba(8,36,58,.18) 58%,
      rgba(8,36,58,.95) 100%) !important;
  }
  .cta__copy{
    padding:12px 18px 16px !important;
  }

  .footer__grid{
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;
  }
  .footer__services a{
    white-space:normal !important;
  }
  .footer__credit{
    position:static !important;
    margin-top:10px !important;
  }
}

@media(max-width:480px){
  .footer__grid{
    grid-template-columns:1fr !important;
  }
}



/* =========================================================
   FINAL FOOTER LAYOUT — prema odabranoj referenci
   ========================================================= */

.site-ending{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:#041727;
}

/*
  Jedna kontinuirana morska pozadina prolazi kroz CTA i footer.
  Slika je pozicionirana ulijevo, a desno se prirodno nastavlja
  tamnoplava morska nijansa bez naglog prijelaza.
*/
.site-ending::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      90deg,
      rgba(3,22,37,.04) 0%,
      rgba(3,22,37,.10) 22%,
      rgba(3,22,37,.30) 42%,
      rgba(3,22,37,.62) 62%,
      rgba(3,22,37,.84) 80%,
      rgba(3,22,37,.94) 100%
    ),
    url("../images/cta/cta-ship.jpg") left top / 43% 150px no-repeat,
    linear-gradient(180deg,#082e4d 0%,#06233a 42%,#041725 100%);
}

.site-ending::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 25%,rgba(38,91,130,.18),transparent 42%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12));
}

/* CTA */
.ending-cta{
  min-height:148px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 34px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ending-cta__content{
  width:min(930px,74%);
  margin-left:15%;
  text-align:center;
}

.ending-cta__content h2{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(15px,1.45vw,24px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.01em;
}

.ending-cta__content p{
  max-width:900px;
  margin:0 auto 14px;
  color:rgba(255,255,255,.92);
  font-size:clamp(12px,1.15vw,20px);
  line-height:1.4;
}

.ending-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:205px;
  height:46px;
  padding:0 25px;
  border-radius:2px;
  background:#1682ff;
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}

.ending-cta__button:hover{
  background:#2b91ff;
  transform:translateY(-1px);
}

/* FOOTER */
.footer{
  background:rgba(2,17,29,.70) !important;
  border-top:0 !important;
  padding:38px 0 34px !important;
  color:#fff !important;
}

.footer__inner{
  width:min(1880px,88%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.28fr 1.20fr .72fr 1.35fr .72fr;
  gap:clamp(34px,4vw,88px);
  align-items:start;
}

.footer__brand,
.footer__column{
  min-width:0;
}

.footer__logo-wrap{
  display:flex;
  align-items:flex-end;
  gap:7px;
}

.footer__logo-wrap img{
  width:clamp(150px,12vw,225px);
  height:auto;
  object-fit:contain;
  object-position:left center;
}

.footer__doo{
  margin-bottom:5px;
  font-size:clamp(12px,.9vw,17px);
  font-weight:500;
  line-height:1;
  color:#fff;
}

.footer__subtitle{
  margin-top:6px;
  color:#fff;
  font-size:clamp(10px,.75vw,15px);
  font-weight:600;
  letter-spacing:.02em;
}

.footer__brand-copy{
  margin:34px 0 32px;
  color:rgba(255,255,255,.90);
  font-size:clamp(13px,1vw,20px);
  line-height:1.65;
}

.footer__copyright{
  margin:0;
  color:rgba(255,255,255,.90);
  font-size:clamp(11px,.82vw,16px);
  line-height:1.4;
}

.footer__column h3{
  margin:5px 0 26px;
  color:#fff;
  font-size:clamp(13px,1vw,20px);
  line-height:1.15;
  font-weight:800;
}

.footer__contact-row{
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:14px;
  align-items:center;
  margin-bottom:18px;
  color:rgba(255,255,255,.94);
  font-size:clamp(13px,1vw,20px);
  line-height:1.35;
}

.footer__contact-row svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.footer__contact-row a,
.footer__contact-row span{
  color:inherit;
  text-decoration:none;
}

.footer__contact-row--address{
  align-items:start;
}

.footer__nav{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer__nav a{
  color:rgba(255,255,255,.94);
  font-size:clamp(13px,1vw,20px);
  line-height:1.32;
  text-decoration:none;
  transition:color .2s ease;
}

.footer__nav a:hover{
  color:#66adff;
}

.footer__services .footer__nav{
  gap:8px;
}

.footer__socials{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:2px;
}

.footer__socials a{
  color:#fff;
  font-size:clamp(30px,2.4vw,46px);
  line-height:1;
  font-weight:800;
  text-decoration:none;
}

.footer__social-separator{
  width:1px;
  height:42px;
  background:rgba(255,255,255,.52);
}

.footer__follow{
  position:relative;
  min-height:245px;
}

.footer__credit{
  position:absolute;
  right:0;
  bottom:0;
  margin:0;
  white-space:nowrap;
  color:rgba(255,255,255,.74);
  font-size:clamp(9px,.7vw,14px);
}

/* Desktop održava svih 5 stupaca u jednom redu */
@media (min-width:1101px){
  .footer__inner{
    grid-template-columns:1.28fr 1.20fr .72fr 1.35fr .72fr;
  }
}

/* Tablet */
@media (max-width:1100px){
  .site-ending::before{
    background:
      linear-gradient(90deg,rgba(3,22,37,.16),rgba(3,22,37,.74)),
      url("../images/cta/cta-ship.jpg") left top / 55% 150px no-repeat,
      linear-gradient(180deg,#082e4d,#041725);
  }

  .ending-cta__content{
    width:min(720px,78%);
    margin-left:18%;
  }

  .footer__inner{
    width:min(920px,90%);
    grid-template-columns:1.25fr 1.15fr .85fr;
    gap:42px 54px;
  }

  .footer__follow{
    min-height:unset;
  }

  .footer__credit{
    position:static;
    margin-top:40px;
  }
}

/* Mobitel */
@media (max-width:720px){
  .site-ending::before{
    background:
      linear-gradient(180deg,
        rgba(3,22,37,.08) 0%,
        rgba(3,22,37,.44) 145px,
        rgba(3,22,37,.90) 250px,
        rgba(3,22,37,.97) 100%),
      url("../images/cta/cta-ship.jpg") center top / cover no-repeat,
      #041725;
  }

  .ending-cta{
    min-height:245px;
    padding:34px 20px 24px;
    align-items:flex-end;
  }

  .ending-cta__content{
    width:100%;
    margin-left:0;
  }

  .ending-cta__button{
    min-width:180px;
  }

  .footer{
    padding:34px 0 28px !important;
  }

  .footer__inner{
    width:88%;
    grid-template-columns:1fr;
    gap:36px;
  }

  .footer__brand-copy{
    margin:22px 0;
  }

  .footer__column h3{
    margin-bottom:18px;
  }

  .footer__follow{
    min-height:unset;
  }

  .footer__credit{
    margin-top:28px;
  }
}



/* =========================================================
   INRI — KONAČNI CTA + FOOTER
   Desktop: 5 stupaca u jednom redu, prema završnoj referenci
   ========================================================= */

.site-ending{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:#031a2c;
}

/* CTA slika broda + prirodni prijelaz prema desnoj strani */
.site-ending::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:300px;
  z-index:-2;
  background:
    linear-gradient(90deg,
      rgba(3,24,41,.03) 0%,
      rgba(3,24,41,.04) 24%,
      rgba(3,24,41,.12) 38%,
      rgba(3,24,41,.30) 52%,
      rgba(3,24,41,.56) 70%,
      rgba(3,24,41,.76) 100%
    ),
    url("../images/cta/cta-ship.jpg") left center / cover no-repeat;
}

.site-ending::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(ellipse at 25% 20%,rgba(16,67,105,.40),transparent 48%),
    linear-gradient(180deg,#07385d 0,#052a47 270px,#031a2c 440px,#031725 100%);
}

.ending-cta{
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 5%;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.ending-cta__content{
  width:min(1050px,68%);
  margin-left:22%;
  text-align:center;
}

.ending-cta__content h2{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(19px,1.55vw,30px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
}

.ending-cta__content p{
  max-width:930px;
  margin:0 auto 22px;
  color:rgba(255,255,255,.94);
  font-size:clamp(16px,1.2vw,23px);
  line-height:1.48;
}

.ending-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:320px;
  height:64px;
  padding:0 32px;
  border-radius:2px;
  background:#087fff;
  color:#fff;
  text-decoration:none;
  font-size:clamp(14px,1vw,20px);
  font-weight:800;
}

/* Donji footer */
.footer{
  position:relative;
  background:
    radial-gradient(ellipse at 18% 45%,rgba(12,57,88,.32),transparent 38%),
    radial-gradient(ellipse at 84% 42%,rgba(8,48,76,.24),transparent 35%),
    linear-gradient(180deg,rgba(3,28,47,.97),rgba(2,20,34,.99)) !important;
  padding:54px 0 58px !important;
  border-top:0 !important;
}

.footer__inner{
  width:min(1880px,88%);
  margin:0 auto;
  display:grid !important;
  grid-template-columns:
    minmax(270px,1.35fr)
    minmax(310px,1.25fr)
    minmax(180px,.72fr)
    minmax(360px,1.55fr)
    minmax(190px,.72fr) !important;
  column-gap:clamp(38px,4.4vw,95px) !important;
  row-gap:0 !important;
  align-items:start;
}

.footer__brand,
.footer__column{
  min-width:0;
  width:auto !important;
  max-width:none !important;
}

.footer__logo-wrap{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.footer__logo-wrap img{
  display:block;
  width:205px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:left center;
}

.footer__doo{
  margin:0 0 7px;
  color:#fff;
  font-size:17px;
  line-height:1;
}

.footer__subtitle{
  margin-top:7px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.025em;
}

.footer__brand-copy{
  margin:38px 0 34px;
  color:rgba(255,255,255,.91);
  font-size:17px;
  line-height:1.65;
}

.footer__copyright{
  margin:0;
  color:rgba(255,255,255,.90);
  font-size:14px;
  line-height:1.45;
}

.footer__column h3{
  margin:7px 0 29px;
  color:#fff;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
}

.footer__contact-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin:0 0 18px;
  color:rgba(255,255,255,.94);
  font-size:17px;
  line-height:1.4;
}

.footer__contact-row svg{
  display:block;
  width:25px;
  height:25px;
  fill:none;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.footer__contact-row a,
.footer__contact-row span{
  color:inherit;
  text-decoration:none;
  white-space:normal;
}

.footer__contact-row--address{
  align-items:start;
}

.footer__nav{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer__nav a{
  color:rgba(255,255,255,.94);
  text-decoration:none;
  font-size:17px;
  line-height:1.34;
}

.footer__services .footer__nav{
  gap:8px;
}

.footer__follow{
  min-height:255px;
  position:relative;
}

.footer__socials{
  display:flex;
  align-items:center;
  gap:22px;
}

.footer__socials a{
  color:#fff;
  text-decoration:none;
  font-size:44px;
  line-height:1;
  font-weight:800;
}

.footer__social-separator{
  width:1px;
  height:43px;
  background:rgba(255,255,255,.55);
}

.footer__credit{
  position:absolute;
  left:0;
  bottom:0;
  margin:0;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
  font-size:12px;
}

/* Pet stupaca ostaju jedan do drugoga na standardnom desktopu */
@media (min-width:1181px) and (max-width:1600px){
  .footer__inner{
    width:92%;
    grid-template-columns:1.2fr 1.25fr .72fr 1.4fr .65fr !important;
    column-gap:34px !important;
  }
  .footer__brand-copy,
  .footer__contact-row,
  .footer__nav a{font-size:14px}
  .footer__column h3{font-size:15px}
  .footer__logo-wrap img{width:170px}
}

/* Tablet */
@media (max-width:1180px){
  .ending-cta__content{
    width:min(780px,76%);
    margin-left:17%;
  }
  .footer__inner{
    width:90%;
    grid-template-columns:1.2fr 1.2fr 1fr !important;
    gap:42px 52px !important;
  }
  .footer__follow{min-height:auto}
  .footer__credit{position:static;margin-top:35px}
}

/* Mobile */
@media (max-width:720px){
  .site-ending::before{
    height:280px;
    background:
      linear-gradient(180deg,rgba(3,24,41,.08),rgba(3,24,41,.70)),
      url("../images/cta/cta-ship.jpg") center / cover no-repeat;
  }
  .ending-cta{
    min-height:280px;
    align-items:flex-end;
    padding:32px 22px 26px;
  }
  .ending-cta__content{
    width:100%;
    margin-left:0;
  }
  .ending-cta__button{
    min-width:205px;
    height:50px;
  }
  .footer{
    padding:38px 0 !important;
  }
  .footer__inner{
    width:88%;
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .footer__brand-copy{margin:24px 0}
}



/* =========================================================
   FOOTER FIX — 5 STUPACA NA DESKTOPU I LAPTOPU
   Logo | Kontakt | Brzi linkovi | Servisi | Pratite nas
   ========================================================= */

@media (min-width: 900px) {
  .footer {
    padding: 42px 0 38px !important;
  }

  .footer__inner {
    width: min(1760px, 92%) !important;
    max-width: 1760px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns:
      minmax(210px, 1.12fr)
      minmax(275px, 1.20fr)
      minmax(135px, .68fr)
      minmax(275px, 1.35fr)
      minmax(135px, .65fr) !important;

    column-gap: clamp(22px, 3vw, 64px) !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  .footer__brand,
  .footer__column,
  .footer__contact,
  .footer__services,
  .footer__follow {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
  }

  .footer__logo-wrap img {
    width: clamp(145px, 12vw, 205px) !important;
    max-width: 100% !important;
  }

  .footer__doo {
    font-size: 12px !important;
  }

  .footer__subtitle {
    font-size: clamp(8px, .7vw, 12px) !important;
  }

  .footer__brand-copy {
    margin: 24px 0 24px !important;
    font-size: clamp(11px, .92vw, 16px) !important;
    line-height: 1.55 !important;
  }

  .footer__copyright {
    font-size: clamp(9px, .76vw, 13px) !important;
  }

  .footer__column h3 {
    margin: 5px 0 22px !important;
    font-size: clamp(13px, 1vw, 18px) !important;
    white-space: nowrap !important;
  }

  .footer__contact-row {
    grid-template-columns: 26px minmax(0,1fr) !important;
    column-gap: 11px !important;
    margin-bottom: 14px !important;
    font-size: clamp(11px, .96vw, 16px) !important;
    line-height: 1.35 !important;
  }

  .footer__contact-row svg {
    width: 21px !important;
    height: 21px !important;
  }

  .footer__contact-row a {
    white-space: nowrap !important;
  }

  .footer__nav {
    gap: 8px !important;
  }

  .footer__nav a {
    font-size: clamp(11px, .92vw, 16px) !important;
    line-height: 1.3 !important;
  }

  .footer__services .footer__nav {
    gap: 6px !important;
  }

  .footer__follow {
    position: relative !important;
    min-height: 205px !important;
  }

  .footer__socials {
    gap: 16px !important;
  }

  .footer__socials a {
    font-size: clamp(28px, 2.5vw, 42px) !important;
  }

  .footer__social-separator {
    height: 36px !important;
  }

  .footer__credit {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    font-size: clamp(7px, .6vw, 10px) !important;
    white-space: nowrap !important;
  }
}

/* Malo uži laptopi i preglednici: i dalje ostaje 5 stupaca */
@media (min-width: 900px) and (max-width: 1250px) {
  .footer__inner {
    width: 94% !important;
    grid-template-columns:
      minmax(165px, 1.05fr)
      minmax(235px, 1.20fr)
      minmax(120px, .68fr)
      minmax(240px, 1.35fr)
      minmax(110px, .62fr) !important;
    column-gap: 18px !important;
  }

  .footer__logo-wrap img {
    width: 150px !important;
  }

  .footer__column h3 {
    font-size: 13px !important;
  }

  .footer__contact-row,
  .footer__nav a {
    font-size: 11px !important;
  }

  .footer__brand-copy {
    font-size: 10px !important;
  }
}

/* Tek ispod 900px prelazimo na responzivni raspored */
@media (max-width: 899px) and (min-width: 621px) {
  .footer__inner {
    width: 90% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 38px 50px !important;
  }

  .footer__brand,
  .footer__column {
    grid-column: auto !important;
    width: auto !important;
  }

  .footer__follow {
    min-height: auto !important;
  }

  .footer__credit {
    position: static !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 620px) {
  .footer__inner {
    width: 88% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
}



/* =========================================================
   CTA BANNER — brod kao na referenci:
   mali brod lijevo + prirodni prijelaz u tamnoplavu pozadinu
   ========================================================= */

.site-ending::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:190px !important;
  z-index:-2 !important;

  background:
    linear-gradient(
      90deg,
      rgba(4,28,47,0.00) 0%,
      rgba(4,28,47,0.03) 24%,
      rgba(4,28,47,0.10) 38%,
      rgba(4,28,47,0.28) 52%,
      rgba(4,28,47,0.55) 68%,
      rgba(4,28,47,0.82) 84%,
      rgba(4,28,47,0.98) 100%
    ),
    url("../images/cta/cta-ship.jpg") left center / 34% 100% no-repeat,
    linear-gradient(
      90deg,
      #0b3454 0%,
      #0a3150 38%,
      #082a45 70%,
      #062238 100%
    ) !important;
}

.site-ending::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-3 !important;
  pointer-events:none !important;
  background:
    radial-gradient(
      ellipse at 18% 18%,
      rgba(42,88,125,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.06) 190px,
      rgba(0,0,0,.12) 100%
    ) !important;
}

.ending-cta{
  min-height:190px !important;
  height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px 5% !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}

.ending-cta__content{
  width:min(780px,64%) !important;
  margin-left:24% !important;
  text-align:center !important;
}

.ending-cta__content h2{
  margin:0 0 6px !important;
  font-size:clamp(14px,1.15vw,21px) !important;
  line-height:1.16 !important;
  color:#fff !important;
  font-weight:800 !important;
}

.ending-cta__content p{
  max-width:760px !important;
  margin:0 auto 10px !important;
  font-size:clamp(11px,.9vw,16px) !important;
  line-height:1.35 !important;
  color:rgba(255,255,255,.92) !important;
}

.ending-cta__button{
  min-width:185px !important;
  height:36px !important;
  padding:0 18px !important;
  border-radius:2px !important;
  background:#087fff !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
}

/* Laptop widths: i dalje mali brod lijevo */
@media (min-width:900px) and (max-width:1250px){
  .site-ending::before{
    height:175px !important;
    background:
      linear-gradient(
        90deg,
        rgba(4,28,47,0.00) 0%,
        rgba(4,28,47,0.05) 28%,
        rgba(4,28,47,0.18) 46%,
        rgba(4,28,47,0.48) 66%,
        rgba(4,28,47,0.86) 86%,
        rgba(4,28,47,0.98) 100%
      ),
      url("../images/cta/cta-ship.jpg") left center / 38% 100% no-repeat,
      linear-gradient(90deg,#0b3454,#082a45 70%,#062238) !important;
  }

  .ending-cta{
    min-height:175px !important;
    height:175px !important;
  }

  .ending-cta__content{
    width:62% !important;
    margin-left:26% !important;
  }
}

/* Mobile: slika gore, tekst ispod bez zumiranja broda */
@media (max-width:899px){
  .site-ending::before{
    height:230px !important;
    background:
      linear-gradient(
        180deg,
        rgba(4,28,47,0.00) 0%,
        rgba(4,28,47,0.12) 45%,
        rgba(4,28,47,0.68) 74%,
        rgba(4,28,47,0.96) 100%
      ),
      url("../images/cta/cta-ship.jpg") center top / cover no-repeat,
      #062238 !important;
  }

  .ending-cta{
    min-height:230px !important;
    height:230px !important;
    align-items:flex-end !important;
    padding:18px 20px 20px !important;
  }

  .ending-cta__content{
    width:100% !important;
    margin-left:0 !important;
  }
}



/* =========================================================
   FOOTER FINAL — 5 stupaca kao na odobrenoj slici
   ========================================================= */

.footer{
  background:
    radial-gradient(ellipse at 12% 30%, rgba(10,55,88,.32), transparent 38%),
    radial-gradient(ellipse at 90% 38%, rgba(8,45,72,.24), transparent 36%),
    linear-gradient(180deg,#06243a 0%,#031725 100%) !important;
  color:#fff !important;
  padding:36px 0 34px !important;
  border-top:1px solid rgba(255,255,255,.04) !important;
}

.footer__inner{
  width:min(1760px,92%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:
    minmax(0,1.03fr)
    minmax(0,1.18fr)
    minmax(0,.70fr)
    minmax(0,1.35fr)
    minmax(0,.66fr) !important;
  column-gap:clamp(18px,3vw,64px) !important;
  row-gap:0 !important;
  align-items:start !important;
}

.footer__brand,
.footer__column,
.footer__contact,
.footer__quick,
.footer__services,
.footer__follow{
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  grid-column:auto !important;
  grid-row:auto !important;
  margin:0 !important;
}

.footer__logo-wrap{
  display:flex !important;
  align-items:flex-end !important;
  gap:6px !important;
}

.footer__logo-wrap img{
  display:block !important;
  width:clamp(145px,12vw,210px) !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.footer__doo{
  margin:0 0 4px !important;
  color:#fff !important;
  font-size:clamp(9px,.8vw,15px) !important;
  line-height:1 !important;
}

.footer__subtitle{
  margin-top:5px !important;
  color:#fff !important;
  font-size:clamp(8px,.65vw,12px) !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}

.footer__brand-copy{
  margin:28px 0 26px !important;
  color:rgba(255,255,255,.94) !important;
  font-size:clamp(11px,1vw,18px) !important;
  line-height:1.58 !important;
}

.footer__copyright{
  margin:0 !important;
  color:rgba(255,255,255,.92) !important;
  font-size:clamp(10px,.82vw,15px) !important;
  line-height:1.4 !important;
}

.footer__column h3{
  margin:5px 0 24px !important;
  color:#fff !important;
  font-size:clamp(13px,1.05vw,19px) !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.footer__contact-row{
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  column-gap:12px !important;
  align-items:center !important;
  margin:0 0 15px !important;
  color:rgba(255,255,255,.95) !important;
  font-size:clamp(11px,.98vw,17px) !important;
  line-height:1.35 !important;
}

.footer__contact-row svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2.1 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.footer__contact-row a,
.footer__contact-row span{
  color:inherit !important;
  text-decoration:none !important;
}

.footer__contact-row a{
  white-space:nowrap !important;
}

.footer__contact-row--address{
  align-items:start !important;
}

.footer__nav{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}

.footer__nav a{
  color:rgba(255,255,255,.95) !important;
  text-decoration:none !important;
  font-size:clamp(11px,.96vw,17px) !important;
  line-height:1.30 !important;
}

.footer__services .footer__nav{
  gap:7px !important;
}

.footer__follow{
  position:relative !important;
  min-height:210px !important;
}

.footer__socials{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  margin-top:1px !important;
}

.footer__socials a{
  color:#fff !important;
  text-decoration:none !important;
  font-size:clamp(28px,2.5vw,44px) !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.footer__social-separator{
  width:1px !important;
  height:38px !important;
  background:rgba(255,255,255,.55) !important;
}

.footer__credit{
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  margin:0 !important;
  color:rgba(255,255,255,.68) !important;
  font-size:clamp(7px,.62vw,11px) !important;
  white-space:nowrap !important;
}

/* Na desktopu i laptopu footer ostaje u PET stupaca.
   Tek na tabletima prelazi u dva stupca. */
@media (min-width:900px) and (max-width:1250px){
  .footer{
    padding:30px 0 28px !important;
  }

  .footer__inner{
    width:95% !important;
    grid-template-columns:
      minmax(0,1.00fr)
      minmax(0,1.20fr)
      minmax(0,.68fr)
      minmax(0,1.38fr)
      minmax(0,.62fr) !important;
    column-gap:16px !important;
  }

  .footer__logo-wrap img{
    width:140px !important;
  }

  .footer__doo{
    font-size:9px !important;
  }

  .footer__subtitle{
    font-size:7px !important;
  }

  .footer__brand-copy{
    margin:20px 0 !important;
    font-size:10px !important;
  }

  .footer__copyright{
    font-size:8px !important;
  }

  .footer__column h3{
    margin-bottom:16px !important;
    font-size:12px !important;
  }

  .footer__contact-row{
    grid-template-columns:20px minmax(0,1fr) !important;
    column-gap:8px !important;
    margin-bottom:10px !important;
    font-size:10px !important;
  }

  .footer__contact-row svg{
    width:17px !important;
    height:17px !important;
  }

  .footer__nav{
    gap:6px !important;
  }

  .footer__nav a{
    font-size:10px !important;
  }

  .footer__follow{
    min-height:155px !important;
  }

  .footer__socials a{
    font-size:28px !important;
  }

  .footer__social-separator{
    height:27px !important;
  }

  .footer__credit{
    font-size:6px !important;
  }
}

@media (max-width:899px) and (min-width:621px){
  .footer__inner{
    width:90% !important;
    grid-template-columns:1fr 1fr !important;
    gap:36px 48px !important;
  }

  .footer__follow{
    min-height:auto !important;
  }

  .footer__credit{
    position:static !important;
    margin-top:28px !important;
  }
}

@media (max-width:620px){
  .footer__inner{
    width:88% !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .footer__follow{
    min-height:auto !important;
  }

  .footer__credit{
    position:static !important;
    margin-top:24px !important;
  }
}

/* =========================================================
   CTA FINAL HD — čisti brod, more i oblaci kao na referenci
   ========================================================= */
.site-ending::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:330px !important;
  z-index:-2 !important;
  background-image:url("../images/cta/cta-ship-hd.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.site-ending::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-3 !important;
  background:linear-gradient(180deg,#06243a 0%,#031725 100%) !important;
  pointer-events:none !important;
}
.ending-cta{
  height:330px !important;
  min-height:330px !important;
  padding:30px 5% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
}
.ending-cta__content{
  width:min(900px,52%) !important;
  margin:0 4% 0 auto !important;
  text-align:center !important;
}
.ending-cta__content h2{
  margin:0 0 14px !important;
  font-size:clamp(18px,1.45vw,30px) !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  color:#fff !important;
}
.ending-cta__content p{
  max-width:900px !important;
  margin:0 auto 22px !important;
  font-size:clamp(14px,1.2vw,24px) !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.94) !important;
}
.ending-cta__button{
  min-width:280px !important;
  height:58px !important;
  padding:0 34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#087fff !important;
  color:#fff !important;
  font-size:clamp(13px,1vw,19px) !important;
  font-weight:800 !important;
  border-radius:2px !important;
}
@media (max-width:899px){
  .site-ending::before{
    height:300px !important;
    background-position:30% center !important;
  }
  .ending-cta{
    height:300px !important;
    min-height:300px !important;
    padding:28px 20px !important;
    align-items:flex-end !important;
  }
  .ending-cta__content{
    width:100% !important;
    margin:0 !important;
    padding:18px !important;
    background:rgba(2,25,42,.48) !important;
    backdrop-filter:blur(1px) !important;
  }
  .ending-cta__button{
    min-width:210px !important;
    height:48px !important;
  }
}



/* =========================================================
   FINAL CTA CLEAN IMAGE + FOOTER TEXT SIZE
   ========================================================= */

/* CTA koristi čistu fotografiju broda bez teksta.
   Tekst i gumb ostaju isključivo HTML elementi. */
.site-ending::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:190px !important;
  z-index:-2 !important;

  background:
    linear-gradient(
      90deg,
      rgba(4,28,47,0.00) 0%,
      rgba(4,28,47,0.02) 26%,
      rgba(4,28,47,0.10) 42%,
      rgba(4,28,47,0.30) 58%,
      rgba(4,28,47,0.58) 74%,
      rgba(4,28,47,0.86) 90%,
      rgba(4,28,47,0.98) 100%
    ),
    url("../images/cta/cta-ship-clean.jpg") left center / 44% 100% no-repeat,
    linear-gradient(90deg,#0b3454 0%,#0a3150 42%,#082a45 72%,#062238 100%) !important;
}

.site-ending::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-3 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(42,88,125,.12),transparent 40%),
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.06) 190px,rgba(0,0,0,.12) 100%) !important;
}

.ending-cta{
  min-height:190px !important;
  height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px 5% !important;
}

.ending-cta__content{
  width:min(780px,64%) !important;
  margin-left:24% !important;
  text-align:center !important;
}

.ending-cta__content h2{
  margin:0 0 6px !important;
  font-size:clamp(14px,1.15vw,21px) !important;
  line-height:1.16 !important;
  color:#fff !important;
  font-weight:800 !important;
}

.ending-cta__content p{
  max-width:760px !important;
  margin:0 auto 10px !important;
  font-size:clamp(11px,.9vw,16px) !important;
  line-height:1.35 !important;
  color:rgba(255,255,255,.92) !important;
}

.ending-cta__button{
  min-width:185px !important;
  height:36px !important;
  padding:0 18px !important;
  font-size:11px !important;
  font-weight:800 !important;
}

/* Povećani tekst ispod loga u footeru */
.footer__brand-copy{
  margin:28px 0 24px !important;
  color:rgba(255,255,255,.96) !important;
  font-size:clamp(14px,1.08vw,19px) !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}

.footer__copyright{
  margin:0 !important;
  color:rgba(255,255,255,.93) !important;
  font-size:clamp(12px,.92vw,16px) !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}

@media (min-width:900px) and (max-width:1250px){
  .site-ending::before{
    height:175px !important;
    background:
      linear-gradient(
        90deg,
        rgba(4,28,47,0.00) 0%,
        rgba(4,28,47,0.04) 28%,
        rgba(4,28,47,0.16) 48%,
        rgba(4,28,47,0.48) 68%,
        rgba(4,28,47,0.86) 88%,
        rgba(4,28,47,0.98) 100%
      ),
      url("../images/cta/cta-ship-clean.jpg") left center / 48% 100% no-repeat,
      linear-gradient(90deg,#0b3454,#082a45 70%,#062238) !important;
  }

  .ending-cta{
    min-height:175px !important;
    height:175px !important;
  }

  .ending-cta__content{
    width:62% !important;
    margin-left:26% !important;
  }

  .footer__brand-copy{
    font-size:13px !important;
  }

  .footer__copyright{
    font-size:11px !important;
  }
}

@media (max-width:899px){
  .site-ending::before{
    height:230px !important;
    background:
      linear-gradient(
        180deg,
        rgba(4,28,47,0.00) 0%,
        rgba(4,28,47,0.14) 45%,
        rgba(4,28,47,0.68) 74%,
        rgba(4,28,47,0.96) 100%
      ),
      url("../images/cta/cta-ship-clean.jpg") center top / cover no-repeat,
      #062238 !important;
  }

  .ending-cta{
    min-height:230px !important;
    height:230px !important;
    align-items:flex-end !important;
    padding:18px 20px 20px !important;
  }

  .ending-cta__content{
    width:100% !important;
    margin-left:0 !important;
  }
}



/* =========================================================
   KONAČNO POVEĆANJE TEKSTA ISPOD LOGA U FOOTERU
   ========================================================= */

footer.footer .footer__brand .footer__brand-copy{
  margin:30px 0 26px !important;
  color:rgba(255,255,255,.98) !important;
  font-size:18px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

footer.footer .footer__brand .footer__copyright{
  margin:0 !important;
  color:rgba(255,255,255,.96) !important;
  font-size:15px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}

/* Laptop */
@media (min-width:900px) and (max-width:1250px){
  footer.footer .footer__brand .footer__brand-copy{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  footer.footer .footer__brand .footer__copyright{
    font-size:13px !important;
  }
}

/* Tablet i mobitel */
@media (max-width:899px){
  footer.footer .footer__brand .footer__brand-copy{
    font-size:16px !important;
  }

  footer.footer .footer__brand .footer__copyright{
    font-size:13px !important;
  }
}



/* =========================================================
   CTA FINAL — referentni izgled, bez dupliciranog teksta
   ========================================================= */

.site-ending::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  width:100% !important;
  height:190px !important;
  z-index:-2 !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(3,20,34,.02) 0%,
      rgba(3,20,34,.04) 35%,
      rgba(3,20,34,.16) 52%,
      rgba(3,20,34,.35) 68%,
      rgba(3,20,34,.58) 84%,
      rgba(3,20,34,.70) 100%
    ),
    url("../images/cta/cta-reference-clean.jpg") !important;

  background-size:100% 100%, cover !important;
  background-position:center, center center !important;
  background-repeat:no-repeat !important;
}

.ending-cta{
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px 5% !important;
  background:transparent !important;
}

.ending-cta__content{
  width:min(760px,56%) !important;
  margin-left:auto !important;
  margin-right:6% !important;
  text-align:center !important;
}

.ending-cta__content h2{
  margin:0 0 6px !important;
  font-size:clamp(14px,1.15vw,21px) !important;
  line-height:1.16 !important;
  color:#fff !important;
  font-weight:800 !important;
}

.ending-cta__content p{
  max-width:760px !important;
  margin:0 auto 10px !important;
  font-size:clamp(11px,.92vw,16px) !important;
  line-height:1.35 !important;
  color:rgba(255,255,255,.93) !important;
}

.ending-cta__button{
  min-width:185px !important;
  height:36px !important;
  padding:0 18px !important;
  font-size:11px !important;
  font-weight:800 !important;
}

/* Tekst ispod loga: isti font, težina i osjećaj kao ostali tekst u footeru */
footer.footer .footer__brand .footer__brand-copy{
  margin:26px 0 22px !important;
  color:rgba(255,255,255,.95) !important;
  font-family:inherit !important;
  font-size:clamp(11px,.96vw,17px) !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

footer.footer .footer__brand .footer__copyright{
  margin:0 !important;
  color:rgba(255,255,255,.92) !important;
  font-family:inherit !important;
  font-size:clamp(10px,.82vw,15px) !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

@media (min-width:900px) and (max-width:1250px){
  .site-ending::before{
    height:175px !important;
    background-size:100% 100%, cover !important;
  }

  .ending-cta{
    height:175px !important;
    min-height:175px !important;
  }

  .ending-cta__content{
    width:58% !important;
    margin-right:4% !important;
  }

  footer.footer .footer__brand .footer__brand-copy{
    font-size:11px !important;
  }

  footer.footer .footer__brand .footer__copyright{
    font-size:9px !important;
  }
}

@media (max-width:899px){
  .site-ending::before{
    height:230px !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(3,20,34,.02) 0%,
        rgba(3,20,34,.14) 48%,
        rgba(3,20,34,.66) 100%
      ),
      url("../images/cta/cta-reference-clean.jpg") !important;
    background-size:100% 100%, cover !important;
  }

  .ending-cta{
    height:230px !important;
    min-height:230px !important;
    align-items:flex-end !important;
    padding:18px 20px 20px !important;
  }

  .ending-cta__content{
    width:100% !important;
    margin:0 !important;
  }
}



/* ===== INRI CTA / FOOTER FINAL ===== */
.site-ending{
    position:relative !important;
    overflow:hidden !important;
    background:#06243b !important;
}

.site-ending::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:190px !important;
    z-index:0 !important;

    background:
      linear-gradient(90deg,
        rgba(4,25,42,0.00) 0%,
        rgba(4,25,42,0.02) 30%,
        rgba(4,25,42,0.12) 48%,
        rgba(4,25,42,0.34) 65%,
        rgba(4,25,42,0.57) 82%,
        rgba(4,25,42,0.68) 100%
      ),
      url("../images/cta/cta-reference-clean.jpg") center center / cover no-repeat !important;
}

.site-ending::after{
    display:none !important;
}

.ending-cta{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    min-height:190px !important;
    height:190px !important;
    display:flex !important;
    align-items:center !important;
    padding:18px 5% !important;
    margin:0 !important;
    background:transparent !important;
}

.ending-cta__content{
    width:56% !important;
    max-width:780px !important;
    margin-left:auto !important;
    margin-right:6% !important;
    text-align:center !important;
}

.ending-cta__content h2,
.ending-cta__content p,
.ending-cta__button{
    position:relative !important;
    z-index:2 !important;
}

/* Footer je zaseban sloj ispod CTA fotografije. */
.footer{
    position:relative !important;
    z-index:2 !important;
    background:#06243b !important;
}

/* Tekst ispod loga koristi isti font kao ostatak footera. */
footer.footer .footer__brand .footer__brand-copy{
    font-family:inherit !important;
    font-size:15px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    color:rgba(255,255,255,.95) !important;
}

footer.footer .footer__brand .footer__copyright{
    font-family:inherit !important;
    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
    color:rgba(255,255,255,.93) !important;
}

/* Desktop: 5 stupaca u jednom redu */
@media (min-width:1100px){
    .footer__grid{
        display:grid !important;
        grid-template-columns:1.35fr 1.35fr .85fr 1.35fr .85fr !important;
        gap:42px !important;
        align-items:start !important;
    }
}

@media (max-width:899px){
    .site-ending::before{
        height:230px !important;
        background-position:left center !important;
    }

    .ending-cta{
        min-height:230px !important;
        height:230px !important;
        align-items:flex-end !important;
    }

    .ending-cta__content{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }
}



/* Footer brand tekst — smanjeno točno za 1 px */
footer.footer .footer__brand .footer__brand-copy{
    font-size:14px !important;
}

footer.footer .footer__brand .footer__copyright{
    font-size:12px !important;
}



/* =========================================================
   CTA — JEDNA ČISTA FOTOGRAFIJA, BEZ DUPLIRANJA I BEZ SLOVA T
   ========================================================= */

.site-ending::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:190px !important;
    z-index:0 !important;

    /* Samo jedna fotografija preko cijele širine.
       Nema ponavljanja, spajanja niti druge slike. */
    background-image:
      linear-gradient(
        90deg,
        rgba(3,20,34,.02) 0%,
        rgba(3,20,34,.03) 30%,
        rgba(3,20,34,.12) 50%,
        rgba(3,20,34,.34) 68%,
        rgba(3,20,34,.58) 84%,
        rgba(3,20,34,.68) 100%
      ),
      url("../images/cta/cta-ship-single-clean.jpg") !important;

    background-size:100% 100%, cover !important;
    background-position:center center, left center !important;
    background-repeat:no-repeat, no-repeat !important;
}

.site-ending::after{
    display:none !important;
}

.ending-cta{
    position:relative !important;
    z-index:1 !important;
    background:transparent !important;
}

/* CTA naslov/opis/gumb su samo HTML elementi.
   Ni jedan tekst nije ugrađen u pozadinsku sliku. */
.ending-cta__content{
    position:relative !important;
    z-index:2 !important;
}

@media (max-width:899px){
    .site-ending::before{
        height:230px !important;
        background-size:100% 100%, cover !important;
        background-position:center center, left center !important;
        background-repeat:no-repeat, no-repeat !important;
    }
}


/* Footer tekst ispod loga — dodatno smanjen za 1 px */
footer.footer .footer__brand .footer__brand-copy{
    font-size:13px !important;
}

footer.footer .footer__brand .footer__copyright{
    font-size:11px !important;
}


/* =========================================================
   O NAMA / NAŠI SERVISI / NAŠI PROJEKTI
   Jednaka širina, lijevi i desni rub te vertikalni razmaci
   ========================================================= */

.about .content,
.services .content,
.projects .content{
    width:min(1180px,92%) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Jednaki gornji i donji razmaci za tri glavne sekcije */
.about,
.services,
.projects{
    padding-top:72px !important;
    padding-bottom:72px !important;
}

/* Naslovi kreću s iste lijeve linije */
.about .section-tag,
.about h2,
.services .section-tag,
.services h2,
.projects .section-tag,
.projects h2{
    margin-left:0 !important;
}

/* Gridovi koriste punu širinu zajedničkog kontejnera */
.services__grid,
.projects__grid,
.service-grid,
.project-grid{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Ako O nama ima uži unutarnji blok, rastegni ga na istu širinu */
.about__inner,
.about__intro,
.about__content{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

@media(max-width:760px){
    .about .content,
    .services .content,
    .projects .content{
        width:90% !important;
    }

    .about,
    .services,
    .projects{
        padding-top:48px !important;
        padding-bottom:48px !important;
    }
}

body.modal-open{overflow:hidden!important}
.offer-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
.offer-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.offer-modal__backdrop{position:absolute;inset:0;background:rgba(0,12,23,.82);backdrop-filter:blur(5px)}
.offer-modal__dialog{position:relative;z-index:1;width:min(640px,100%);padding:38px;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:linear-gradient(180deg,#0a3150,#061f34);box-shadow:0 28px 80px rgba(0,0,0,.5);color:#fff}
.offer-modal__dialog h2{margin:0 0 28px;font-size:25px;color:#fff}
.offer-modal__close{position:absolute;right:16px;top:12px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer}
.offer-form{display:flex;flex-direction:column}
.offer-form label{margin:0 0 7px;font-size:13px;font-weight:700}
.offer-form input,.offer-form textarea{box-sizing:border-box;width:100%;margin:0 0 20px;padding:13px 14px;border:1px solid rgba(255,255,255,.2);border-radius:3px;background:rgba(255,255,255,.07);color:#fff;font:inherit;outline:none}
.offer-form input:focus,.offer-form textarea:focus{border-color:#1682ff}
.offer-form textarea{resize:vertical;min-height:170px}
.offer-form button{align-self:flex-start;min-width:145px;height:44px;border:0;border-radius:2px;background:#1682ff;color:#fff;font-size:12px;font-weight:800;cursor:pointer}
@media(max-width:620px){.offer-modal__dialog{padding:30px 22px}.offer-form button{width:100%}}


/* =========================================================
   KONTAKT — MODAL
   ========================================================= */

.contact-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

.contact-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.contact-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,12,23,.82);
  backdrop-filter:blur(5px);
}

.contact-modal__dialog{
  position:relative;
  z-index:1;
  width:min(680px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  padding:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  background:linear-gradient(180deg,#0a3150,#061f34);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
  color:#fff;
}

.contact-modal__close{
  position:absolute;
  right:16px;
  top:12px;
  border:0;
  background:none;
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

.contact-modal__heading{
  margin-bottom:24px;
}

.contact-modal__heading .section-tag{
  display:block;
  margin-bottom:8px;
  color:#238cff;
  font-size:12px;
  font-weight:800;
}

.contact-modal__heading h2{
  margin:0;
  color:#fff;
  font-size:26px;
  line-height:1.15;
}

.contact-modal__details{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.contact-modal__item{
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  background:rgba(255,255,255,.05);
}

.contact-modal__item strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:12px;
}

.contact-modal__item a,
.contact-modal__item span{
  color:rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.45;
  text-decoration:none;
}

.contact-modal__separator{
  height:1px;
  margin:28px 0 24px;
  background:rgba(255,255,255,.12);
}

.contact-modal__form-heading h3{
  margin:0 0 18px;
  color:#fff;
  font-size:19px;
}

@media(max-width:700px){
  .contact-modal{
    padding:14px;
  }

  .contact-modal__dialog{
    padding:30px 22px 26px;
  }

  .contact-modal__details{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   O NAMA — MODAL
   ========================================================= */
.about-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

.about-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.about-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,12,23,.84);
  backdrop-filter:blur(6px);
}

.about-modal__dialog{
  position:relative;
  z-index:1;
  width:min(1000px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  padding:42px 44px 40px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  background:linear-gradient(180deg,#0a3150 0%,#061f34 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.52);
  color:#fff;
}

.about-modal__close{
  position:absolute;
  top:14px;
  right:17px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:30px;
  line-height:30px;
  cursor:pointer;
}

.about-modal__eyebrow{
  display:block;
  margin-bottom:8px;
  color:#238cff;
  font-size:12px;
  font-weight:800;
}

.about-modal__dialog h2{
  margin:0 0 24px;
  color:#fff;
  font-size:28px;
  line-height:1.15;
}

.about-modal__text{
  display:grid;
  gap:16px;
}

.about-modal__text p{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:14px;
  line-height:1.65;
}

.about-modal__logos-title{
  margin:30px 0 16px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

/* Pet jednakih stupaca. Svaki logo dobiva isti vizualni okvir. */
.about-modal__logos{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.about-logo-card{
  min-width:0;
  min-height:150px;
  padding:14px 10px 11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  background:rgba(255,255,255,.96);
  text-align:center;
}

/* Ovo je ključ: svi logotipi imaju ISTU površinu za prikaz.
   Bez obzira jesu li kvadratni, uski ili široki, ne izgledaju jedan ogromno a drugi premalo. */
.about-logo-card__image{
  width:100%;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.about-logo-card__image img{
  display:block;
  width:100%;
  height:100%;
  max-width:155px;
  max-height:78px;
  object-fit:contain;
  object-position:center;
}

/* Široki Viktor Lenac i Jadrolinija mogu koristiti malo više širine,
   ali istu visinu, pa ostaju proporcionalni ostalima. */
.about-logo-card:nth-child(3) .about-logo-card__image img,
.about-logo-card:nth-child(5) .about-logo-card__image img{
  max-width:170px;
}

/* Kvadratni Rapska plovidba ne smije vizualno dominirati. */
.about-logo-card:nth-child(4) .about-logo-card__image img{
  max-width:82px;
  max-height:82px;
}

.about-logo-card span{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0a2944;
  font-size:10px;
  line-height:1.25;
  font-weight:700;
}

@media(max-width:900px){
  .about-modal__logos{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .about-modal{
    padding:12px;
  }

  .about-modal__dialog{
    padding:34px 20px 28px;
  }

  .about-modal__dialog h2{
    font-size:24px;
  }

  .about-modal__text p{
    font-size:13px;
  }

  .about-modal__logos{
    grid-template-columns:1fr 1fr;
  }
}


/* O NAMA — naslov iznad logotipa */
.about-modal__logos-title{
  margin:32px 0 20px !important;
  padding-top:26px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-align:center !important;
}

.about-modal__logos-title::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin:10px auto 0;
  border-radius:3px;
  background:#238cff;
}

@media(max-width:620px){
  .about-modal__logos-title{
    font-size:21px !important;
  }
}


/* O NAMA — završne korekcije */
.about-modal__dialog h2{
  font-size:26px !important; /* bilo 28px */
}

.about-modal__logos-title{
  font-size:22px !important; /* bilo 24px */
}

/* Plavkasta pozadina usklađena s ostatkom INRI stranice */
.about-modal__dialog{
  background:
    linear-gradient(180deg, rgba(10,49,80,.98) 0%, rgba(6,31,52,.99) 100%) !important;
  border:1px solid rgba(35,140,255,.20) !important;
}

.about-logo-card{
  background:rgba(236,246,255,.96) !important;
}

@media(max-width:620px){
  .about-modal__dialog h2{
    font-size:22px !important;
  }
  .about-modal__logos-title{
    font-size:19px !important;
  }
}


/* O NAMA — O NAMA, INRI d.o.o. i NAŠI KLIJENTI = 20 px */
.about-modal__eyebrow,
.about-modal__dialog h2,
.about-modal__logos-title{
  font-size:20px !important;
}

@media(max-width:620px){
  .about-modal__eyebrow,
  .about-modal__dialog h2,
  .about-modal__logos-title{
    font-size:20px !important;
  }
}

/* Footer INRI logo — ista veličina kao INRI logo u zaglavlju */
footer.footer .footer__logo-wrap img{
  width:118px !important;
  height:34px !important;
  max-width:118px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

footer.footer .footer__doo{
  font-size:11px !important;
  margin-bottom:2px !important;
}

@media (max-width:1180px){
  footer.footer .footer__logo-wrap img{
    width:118px !important;
    height:34px !important;
    max-width:118px !important;
  }
}
\n\n/* CTA bez gumba POTRAŽITE NAS — tekst proporcionalno centriran */\n.ending-cta__content{\n  display:flex !important;\n  flex-direction:column !important;\n  justify-content:center !important;\n  align-items:center !important;\n  text-align:center !important;\n}\n.ending-cta__content h2{\n  margin-left:auto !important;\n  margin-right:auto !important;\n  margin-bottom:10px !important;\n}\n.ending-cta__content p{\n  margin-left:auto !important;\n  margin-right:auto !important;\n  margin-bottom:0 !important;\n  max-width:720px !important;\n}\n

/* =========================================================
   NASLOVNA — traženi tekstovi veličine kao e-mail u footeru
   Footer kontakt/e-mail: clamp(11px, .98vw, 17px)
   ========================================================= */

/* Dva uvodna odlomka u O NAMA */
.about__intro p{
  font-size:clamp(11px,.98vw,17px) !important;
  line-height:1.55 !important;
  margin:0 0 10px !important;
  max-width:100% !important;
}

/* Četiri teksta: Pouzdanost / Iskustvo / Preciznost / Brza reakcija */
.about__features{
  align-items:stretch !important;
}

.feature{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:190px !important;
  padding:8px 18px 14px !important;
}

.feature h3{
  margin:0 0 10px !important;
}

.feature p{
  width:100% !important;
  margin:0 auto !important;
  font-size:clamp(11px,.98vw,17px) !important;
  line-height:1.48 !important;
  text-align:center !important;
  text-wrap:balance;
}

/* Tekstovi ispod svih 6 servisnih slika */
.services__grid{
  align-items:stretch !important;
}

.service-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

.service-card__body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:12px 12px 16px !important;
}

.service-card h3{
  min-height:42px !important;
  margin:0 0 10px !important;
}

.service-card p{
  margin:0 !important;
  font-size:clamp(11px,.98vw,17px) !important;
  line-height:1.48 !important;
  text-align:left !important;
  text-wrap:pretty;
}

/* Na užim ekranima tekst ostaje čitljiv i kartice dobivaju više prostora. */
@media (max-width:1250px){
  .services__grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:16px !important;
  }

  .service-card img{
    height:150px !important;
  }

  .feature{
    min-height:175px !important;
  }
}

@media (max-width:760px){
  .about__features{
    grid-template-columns:1fr 1fr !important;
    gap:18px 0 !important;
  }

  .services__grid{
    grid-template-columns:1fr !important;
  }

  .service-card img{
    height:210px !important;
  }

  .feature p,
  .service-card p,
  .about__intro p{
    font-size:11px !important;
  }
}


/* =========================================================
   O NAMA — glavni opis isti font kao ostali opisi
   ========================================================= */
.about__intro p{
  font-size:clamp(11px,.98vw,17px) !important;
  line-height:1.55 !important;
  margin:0 0 10px !important;
  max-width:100% !important;
}

/* VIŠE O NAMA koristi isti O NAMA modal kao glavni link */
[data-about-open]{
  cursor:pointer;
}


/* PREGLEDAJTE SVE SERVISE i SVI PROJEKTI — identičan izgled */
.services .btn--blue.btn--small,
.projects .btn--blue.btn--small{
  min-width:190px !important;
  height:42px !important;
  padding:0 24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}


/* =========================================================
   HERO — POGLEDAJTE SERVISE identičan ZATRAŽITE PONUDU gumbu
   ========================================================= */
.hero a[href="#servisi"],
.hero__actions a[href="#servisi"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:190px !important;
  height:42px !important;
  padding:0 24px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:2px !important;
  background:#1682ff !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:background .2s ease, transform .2s ease !important;
}

.hero a[href="#servisi"]:hover,
.hero__actions a[href="#servisi"]:hover{
  background:#2c90ff !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}


/* =========================================================
   ZAGLAVLJE — malo veći font glavne navigacije
   O NAMA / SERVISI / PROJEKTI / KONTAKT
   ========================================================= */
header nav a,
.header nav a,
.site-header nav a,
.header__nav a,
.nav a{
  font-size:14px !important;
}

/* Gumb ZATRAŽITE PONUDU zadržava svoj postojeći izgled */
header nav a[data-offer-open],
.header nav a[data-offer-open],
.site-header nav a[data-offer-open]{
  font-size:inherit !important;
}


/* =========================================================
   O NAMA / NAŠI SERVISI / NAŠI PROJEKTI
   ista veličina fonta kao gumb SVI PROJEKTI
   ========================================================= */
.about .section-tag,
.services .section-tag,
.projects .section-tag{
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}


/* =========================================================
   STRANICA SVI PROJEKTI
   ========================================================= */

.projects-page{
  min-height:100vh;
  background:linear-gradient(180deg,#08233a 0%,#071d31 100%);
  color:#fff;
}

.projects-page__hero{
  padding:72px 0 34px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.projects-page__hero h1{
  margin:0 0 12px;
  font-size:40px;
  line-height:1.1;
  font-weight:800;
}

.projects-page__hero p{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.55;
}

.projects-page__content{
  padding:44px 0 70px;
}

.projects-page__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.project-detail-card{
  background:#06192a;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  overflow:hidden;
  height:100%;
}

.project-detail-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.project-detail-card__body{
  padding:18px 18px 20px;
}

.project-detail-card h2{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}

.project-detail-card ul{
  margin:0;
  padding-left:20px;
  color:rgba(255,255,255,.88);
}

.project-detail-card li{
  margin-bottom:7px;
  font-size:13px;
  line-height:1.45;
}

.project-detail-card li::marker{
  color:#238cff;
}

@media(max-width:1100px){
  .projects-page__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .projects-page__hero{
    padding:48px 0 28px;
  }

  .projects-page__hero h1{
    font-size:30px;
  }

  .projects-page__grid{
    grid-template-columns:1fr;
  }

  .project-detail-card img{
    height:220px;
  }
}


/* =========================================================
   O NAMA — NOVA STRANICA
   ========================================================= */
.about-page,
.projects-page{
  min-height:100vh;
  background:linear-gradient(180deg,#08233a 0%,#071d31 100%) !important;
  color:#fff !important;
  font-family:'Montserrat',sans-serif !important;
}

.about-page__hero,
.projects-page__hero{
  padding:70px 0 34px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.about-page__hero .section-tag,
.projects-page__hero .section-tag{
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  color:#238cff !important;
  margin-bottom:10px !important;
}

.about-page__hero h1,
.projects-page__hero h1{
  margin:0 0 12px !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  color:#fff !important;
}

.about-page__hero p,
.projects-page__hero p{
  max-width:780px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.86) !important;
}

.about-page__content{
  padding:42px 0 72px;
}

.about-page__panel{
  padding:34px 36px 36px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(10,49,80,.95),rgba(6,31,52,.97));
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}

.about-page__text{
  display:grid;
  gap:18px;
}

.about-page__text p{
  margin:0;
  font-size:14px;
  line-height:1.68;
  color:rgba(255,255,255,.89);
}

.about-page__clients-title{
  margin:34px 0 22px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
}

.about-page__clients-title::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin:10px auto 0;
  border-radius:3px;
  background:#238cff;
}

.about-page__logos{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

/* =========================================================
   PROJEKTI — TYPOGRAPHY MATCHES O NAMA
   ========================================================= */
.projects-page__content{
  padding:42px 0 72px !important;
}

.projects-page__grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.project-detail-card{
  background:#06192a !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:4px !important;
  overflow:hidden !important;
  height:100% !important;
}

.project-detail-card img{
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
}

.project-detail-card__body{
  padding:18px 18px 22px !important;
}

.project-detail-card h2{
  margin:0 0 14px !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  color:#fff !important;
}

.project-detail-card ul{
  margin:0 !important;
  padding-left:20px !important;
  color:rgba(255,255,255,.89) !important;
}

.project-detail-card li{
  margin-bottom:7px !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

.project-detail-card li::marker{
  color:#238cff !important;
}

/* =========================================================
   OSTALI PROJEKTI
   ========================================================= */
.other-projects{
  margin-top:54px;
  padding-top:38px;
  border-top:1px solid rgba(255,255,255,.10);
}

.other-projects__heading{
  max-width:850px;
  margin-bottom:24px;
}

.other-projects__heading .section-tag{
  font-size:20px !important;
  font-weight:800 !important;
  color:#238cff !important;
  margin-bottom:10px !important;
}

.other-projects__heading h2{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
}

.other-projects__heading p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.84);
}

.other-projects__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.other-project-card{
  padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  background:linear-gradient(180deg,#08243a 0%,#06192a 100%);
}

.other-project-card--wide{
  grid-column:1 / -1;
}

.other-project-card h3{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.25;
  font-weight:800;
  color:#fff;
}

.other-project-card p{
  margin:0;
  font-size:14px;
  line-height:1.58;
  color:rgba(255,255,255,.88);
}

.other-project-card ul{
  margin:14px 0 0;
  padding-left:20px;
  color:rgba(255,255,255,.90);
}

.other-project-card li{
  margin-bottom:6px;
  font-size:14px;
  line-height:1.42;
}

.other-project-card li::marker{
  color:#238cff;
}

@media(max-width:1100px){
  .projects-page__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .about-page__logos{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .about-page__hero,
  .projects-page__hero{
    padding:48px 0 28px !important;
  }

  .about-page__panel{
    padding:26px 20px 28px;
  }

  .about-page__logos{
    grid-template-columns:1fr 1fr;
  }

  .projects-page__grid{
    grid-template-columns:1fr !important;
  }

  .other-projects__grid{
    grid-template-columns:1fr;
  }

  .other-project-card--wide{
    grid-column:auto;
  }
}


/* SIMRAD — O NAMA */
.simrad-authorized{
  margin:34px 0 0;
  padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.simrad-authorized__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:32px;
  align-items:center;
  padding:24px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:rgba(4,27,46,.48);
}
.simrad-authorized .section-tag{
  display:block;
  margin-bottom:8px;
  font-size:14px !important;
  font-weight:800;
  color:#238cff;
}
.simrad-authorized h2{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
}
.simrad-authorized p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.89);
}
.simrad-authorized__logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.simrad-authorized__logo img{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  object-fit:contain;
}
@media(max-width:700px){
  .simrad-authorized__content{
    grid-template-columns:1fr;
  }
  .simrad-authorized__logo img{
    max-width:250px;
  }
}


/* NAŠI PROJEKTI — nazivi brodova smanjeni s 20 px na 18 px */
.project-detail-card h2{
  font-size:18px !important;
}


/* NAŠI PROJEKTI — nazivi brodova dodatno smanjeni s 18 px na 16 px */
.project-detail-card h2{
  font-size:16px !important;
}


/* NASLOVNA — plavi naslovi O NAMA / NAŠI SERVISI / NAŠI PROJEKTI +2 px */
.about .section-tag,
.services .section-tag,
.projects .section-tag{
  font-size:13px !important;
}


/* =========================================================
   HERO NASLOV — smanjen za 4 px na HR i EN verziji
   ========================================================= */
.hero__content h1{
  font-size:47px !important;
}

@media(max-width:1000px){
  .hero__content h1{
    font-size:40px !important;
  }
}

@media(max-width:760px){
  .hero__content h1{
    font-size:32px !important;
  }
}


/* HERO naslov — smanjen za 4 px na HR i EN */
.hero__content h1{
  font-size:47px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:40px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:32px !important;}
}


/* =========================================================
   HERO NASLOV HR + EN — dodatno smanjen za 3 px
   ELEKTROENERGETIKA I AUTOMATIKA ZA BRODOVE
   ELECTRICAL ENGINEERING AND AUTOMATION FOR VESSELS
   ========================================================= */
.hero__content h1{
  font-size:44px !important;
}

@media(max-width:1000px){
  .hero__content h1{
    font-size:37px !important;
  }
}

@media(max-width:760px){
  .hero__content h1{
    font-size:29px !important;
  }
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 3 px */
.hero__content h1{
  font-size:41px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:34px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:26px !important;}
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 2 px */
.hero__content h1{
  font-size:39px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:32px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:24px !important;}
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 2 px */
.hero__content h1{
  font-size:37px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:30px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:22px !important;}
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 2 px */
.hero__content h1{
  font-size:35px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:28px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:20px !important;}
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 4 px */
.hero__content h1{
  font-size:31px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:24px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:16px !important;}
}


/* HERO NASLOV HR + EN — dodatno smanjen za još 2 px */
.hero__content h1{
  font-size:29px !important;
}
@media(max-width:1000px){
  .hero__content h1{font-size:22px !important;}
}
@media(max-width:760px){
  .hero__content h1{font-size:14px !important;}
}

/* Zasebna CONTACT/KONTAKT stranica */
.contact-page{background:#061f33;color:#fff;min-height:100vh}.standalone-contact{padding:72px 0 90px}
.standalone-contact .section-tag{font-size:13px;font-weight:800;color:#238cff}.standalone-contact h1{margin:8px 0 12px;font-size:32px;color:#fff}
.contact-intro{max-width:820px;margin:0 0 34px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.86)}
.contact-page-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.contact-info-card,.contact-mail-card{padding:30px;border:1px solid rgba(255,255,255,.14);background:rgba(2,22,38,.55)}
.contact-info-card h2,.contact-mail-card h2{margin:0 0 24px;font-size:20px;color:#fff}.contact-line{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px;line-height:1.55}
.contact-line:last-child{border-bottom:0}.contact-line a,.contact-line span{color:rgba(255,255,255,.88);text-decoration:none}.contact-mail-card form{display:grid;gap:10px}
.contact-mail-card label{font-size:14px;font-weight:700}.contact-mail-card input,.contact-mail-card textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);background:#092942;color:#fff;padding:14px 15px;font:inherit}
.contact-mail-card textarea{resize:vertical;min-height:160px}.contact-mail-card .btn{margin-top:10px;justify-self:start;min-width:150px}
@media(max-width:800px){.contact-page-grid{grid-template-columns:1fr}.standalone-contact{padding:48px 0 70px}}


/* =========================================================
   KONTAKT STRANICA — isto zaglavlje i margine kao ostatak weba
   ========================================================= */

.contact-page .standalone-contact{
  padding:64px 0 80px !important;
}

.contact-page .standalone-contact > .container,
.contact-page .standalone-contact .container{
  width:min(1180px,92%) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Kontakt kartice uredno poravnate unutar iste širine kao naslovna */
.contact-page-grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important;
  gap:28px !important;
  align-items:stretch !important;
}

.contact-info-card,
.contact-mail-card{
  height:100% !important;
  box-sizing:border-box !important;
}

/* Zaglavlje na kontakt stranici nasljeđuje točno isti izgled kao naslovna */
.contact-page header,
.contact-page .topbar,
.contact-page .site-header,
.contact-page .header{
  width:100% !important;
}

.contact-page header .topbar__inner,
.contact-page header .header__inner,
.contact-page header .container{
  width:min(1180px,92%) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Navigacija ispod/uz logo: O NAMA / SERVISI / PROJEKTI / KONTAKT */
.contact-page header nav a{
  white-space:nowrap !important;
}

@media(max-width:800px){
  .contact-page .standalone-contact{
    padding:46px 0 64px !important;
  }

  .contact-page .standalone-contact > .container,
  .contact-page .standalone-contact .container{
    width:90% !important;
  }

  .contact-page-grid{
    grid-template-columns:1fr !important;
  }
}

/* Facebook i LinkedIn privremeno uklonjeni */
.social-links:empty,
.social-icons:empty,
.footer-social:empty {
  display: none !important;
}


/* FOOTER FINAL: 4 jednako raspoređena stupca, bez PRATITE NAS / FOLLOW US */
@media (min-width:900px){
  footer.footer .footer__inner{
    width:min(1500px,92%) !important;
    max-width:1500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:
      minmax(0,1.15fr)
      minmax(0,1fr)
      minmax(0,.82fr)
      minmax(0,1.28fr) !important;
    column-gap:clamp(32px,4vw,82px) !important;
    justify-content:center !important;
  }
}
footer.footer .footer__follow,
footer.footer .footer__socials{
  display:none !important;
}






/* =========================================================
   INRI FINAL — JEDINSTVENE MARGINE 2 CM NA SVIM STRANICAMA
   ========================================================= */

:root{
  --inri-page-margin: 2cm;
  --inri-body-copy-size: 17px;
  --inri-body-copy-line: 1.62;
}

/* Jedinstveni font kroz cijeli projekt */
html,
body,
button,
input,
textarea,
select{
  font-family:'Montserrat', Arial, sans-serif !important;
}

/* Glavni horizontalni rubovi na svim stranicama */
.content,
.container,
.topbar__inner,
.header__inner,
.about-page__hero .content,
.about-page__content > .content,
.projects-page__hero .content,
.projects-page__content > .content,
.standalone-contact > .container,
.contact-page .standalone-contact > .container,
.contact-page .standalone-contact .container{
  width:calc(100% - (2 * var(--inri-page-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-page-margin) !important;
  margin-right:var(--inri-page-margin) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Spriječi duple margine unutar već ograničenih kontejnera */
.content .content,
.container .container,
.about-page__content > .content .content,
.projects-page__content > .content .content{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* =========================================================
   HERO NASLOV + PODNASLOV
   ========================================================= */

/* Bio je 29 px; povećanje za 4 px = 33 px */
.hero__content{
  width:calc(100% - (2 * var(--inri-page-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-page-margin) !important;
  margin-right:var(--inri-page-margin) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

.hero__content h1{
  font-size:33px !important;
  line-height:1.08 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:100% !important;
}

.hero__content p,
.hero__content .hero__lead,
.hero__content .hero__subtitle{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  font-size:var(--inri-body-copy-size) !important;
  line-height:var(--inri-body-copy-line) !important;
}

/* =========================================================
   SVI OPISNI TEKSTOVI +3 PX / ISTI STIL
   ========================================================= */

/* Naslovna */
.about__intro p,
.feature p,
.service-card p,
.projects__lead,
.project-card__body p,
.ending-cta__content p,

/* O nama */
.about-page__hero p,
.about-page__text p,
.simrad-authorized p,
.about-logo-card span,

/* Projekti */
.projects-page__hero p,
.project-detail-card li,
.other-projects__heading p,
.other-project-card p,
.other-project-card li,

/* Kontakt */
.contact-intro,
.contact-line,
.contact-info-card p,
.contact-mail-card p,

/* Ponuda / modal */
.offer-modal__dialog p,
.offer-form label,
.offer-form input,
.offer-form textarea,

/* Footer */
.footer__brand-copy,
.footer__copyright,
.footer__contact-row,
.footer__nav a{
  font-size:var(--inri-body-copy-size) !important;
  line-height:var(--inri-body-copy-line) !important;
  font-family:'Montserrat', Arial, sans-serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* Footer naslovi ostaju jasni, ali tipografski isti */
.footer h3,
.footer__column h3{
  font-family:'Montserrat', Arial, sans-serif !important;
}

/* =========================================================
   PROJEKTI / SLIKE BRODOVA — ISTI RUB 2 CM KAO TEKST
   ========================================================= */

.projects > .content,
.projects-page__content > .content{
  width:calc(100% - (2 * var(--inri-page-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-page-margin) !important;
  margin-right:var(--inri-page-margin) !important;
}

.projects__grid,
.projects__grid--four,
.projects-page__grid{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

.project-card,
.project-card img,
.project-detail-card,
.project-detail-card img{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* =========================================================
   CTA BROD — ISTI RUB 2 CM
   ========================================================= */

.ending-cta{
  width:calc(100% - (2 * var(--inri-page-margin))) !important;
  margin-left:var(--inri-page-margin) !important;
  margin-right:var(--inri-page-margin) !important;
  box-sizing:border-box !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.ending-cta__content{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 2.5% !important;
  box-sizing:border-box !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =========================================================
   FOOTER — 4 JEDNAKA STUPCA, ISTE MARGINE 2 CM
   ========================================================= */

footer.footer{
  width:100% !important;
}

footer.footer .footer__inner{
  width:calc(100% - (2 * var(--inri-page-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-page-margin) !important;
  margin-right:var(--inri-page-margin) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  column-gap:2cm !important;
  row-gap:0 !important;
  align-items:start !important;
  justify-content:stretch !important;
}

footer.footer .footer__brand,
footer.footer .footer__contact,
footer.footer .footer__quick,
footer.footer .footer__services{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   O NAMA / PROJEKTI / KONTAKT / SERVISI / PONUDA
   svi koriste isti 2 cm sustav rubova
   ========================================================= */

.about,
.services,
.projects,
.about-page,
.projects-page,
.contact-page,
.standalone-contact{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Kontakt kartice ostaju unutar istih 2 cm */
.contact-page-grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* Ponuda modal: isti font i uredna unutarnja margina */
.offer-modal__dialog{
  font-family:'Montserrat', Arial, sans-serif !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){
  :root{
    --inri-page-margin:24px;
    --inri-body-copy-size:16px;
  }

  .hero__content h1{
    font-size:29px !important;
  }

  footer.footer .footer__inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:36px !important;
    row-gap:34px !important;
  }
}

@media(max-width:620px){
  :root{
    --inri-page-margin:18px;
    --inri-body-copy-size:15px;
  }

  .hero__content h1{
    font-size:24px !important;
  }

  footer.footer .footer__inner{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .ending-cta{
    width:calc(100% - (2 * var(--inri-page-margin))) !important;
  }
}


/* =========================================================
   FINALNA KOREKCIJA 13-09-2026
   1) sav sadržaj naslovne: 2 cm lijevo/desno
   2) opisni tekst O NAMA i PROJEKTI: +3 px
   3) isti font/stil na HR i EN
   ========================================================= */

:root{
  --inri-final-margin:2cm;
}

/* NASLOVNA — svaki glavni tekstualni blok i mreža prate točno 2 cm */
body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content,
body:not(.about-page):not(.projects-page):not(.contact-page) .about > .content,
body:not(.about-page):not(.projects-page):not(.contact-page) .services > .content,
body:not(.about-page):not(.projects-page):not(.contact-page) .projects > .content{
  width:calc(100% - (2 * var(--inri-final-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-final-margin) !important;
  margin-right:var(--inri-final-margin) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* elementi unutar .content ne dobivaju dodatnu marginu */
.about > .content .section-head,
.services > .content .section-head,
.projects > .content .section-head,
.about > .content .about__intro,
.about > .content .about__features,
.services > .content .services__grid,
.projects > .content .projects__grid{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* O NAMA — konkretno svi opisni tekstovi koje je korisnik naveo */
.about-page p,
.about-page .about-page__lead,
.about-page .about-page__text,
.about-page .about-page__text p,
.about-page .about-page__content p,
.about-page .simrad-authorized p,
.about-page .about-logo-card span{
  font-family:'Montserrat',Arial,sans-serif !important;
  font-size:20px !important;
  line-height:1.62 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* PROJEKTI — uvod, BWTS i svi ostali opisni projektni tekstovi */
.projects-page p,
.projects-page li,
.projects-page .projects-page__lead,
.projects-page .project-detail-card li,
.projects-page .other-projects p,
.projects-page .other-projects li,
.projects-page .other-project-card p,
.projects-page .other-project-card li{
  font-family:'Montserrat',Arial,sans-serif !important;
  font-size:20px !important;
  line-height:1.62 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* Naslovi poput UGRADNJA SUSTAVA... ostaju naslovi, ali isti font family */
.about-page h1,.about-page h2,.about-page h3,
.projects-page h1,.projects-page h2,.projects-page h3{
  font-family:'Montserrat',Arial,sans-serif !important;
}

/* 2 cm i na zasebnim stranicama */
.about-page .content,
.projects-page .content,
.contact-page .container,
.standalone-contact > .container{
  width:calc(100% - (2 * var(--inri-final-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-final-margin) !important;
  margin-right:var(--inri-final-margin) !important;
  box-sizing:border-box !important;
}

/* Footer — 4 identična stupca i isti vanjski rub */
footer.footer .footer__inner{
  width:calc(100% - (2 * var(--inri-final-margin))) !important;
  max-width:none !important;
  margin-left:var(--inri-final-margin) !important;
  margin-right:var(--inri-final-margin) !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  column-gap:clamp(28px,3.2vw,70px) !important;
  box-sizing:border-box !important;
}

/* Mobitel/tablet */
@media(max-width:1000px){
  :root{--inri-final-margin:24px;}
  .about-page p,
  .about-page .about-page__lead,
  .about-page .about-page__text,
  .about-page .about-page__text p,
  .about-page .about-page__content p,
  .about-page .simrad-authorized p,
  .about-page .about-logo-card span,
  .projects-page p,
  .projects-page li,
  .projects-page .projects-page__lead,
  .projects-page .project-detail-card li,
  .projects-page .other-projects p,
  .projects-page .other-projects li,
  .projects-page .other-project-card p,
  .projects-page .other-project-card li{
    font-size:18px !important;
  }
}

@media(max-width:620px){
  :root{--inri-final-margin:18px;}
  .about-page p,
  .about-page .about-page__lead,
  .about-page .about-page__text,
  .about-page .about-page__text p,
  .about-page .about-page__content p,
  .about-page .simrad-authorized p,
  .about-page .about-logo-card span,
  .projects-page p,
  .projects-page li,
  .projects-page .projects-page__lead,
  .projects-page .project-detail-card li,
  .projects-page .other-projects p,
  .projects-page .other-projects li,
  .projects-page .other-project-card p,
  .projects-page .other-project-card li{
    font-size:16px !important;
  }
}

/* FINAL 18px descriptive typography + mobile responsive */
:root{--copy:18px}
.hero__content p,.about__intro p,.about__features p,.feature p,.service-card p,
.projects__lead,.project-card__body p,.about-page p,.about-page li,.projects-page p,
.projects-page li,.contact-page p,.contact-page li,.contact-intro,.contact-line,
.contact-info-card p,.contact-mail-card p,.offer-modal__dialog p,.offer-form label,
.offer-form input,.offer-form textarea,.ending-cta__content p,.footer__brand-copy,
.footer__copyright,.footer__contact-row,.footer__nav a{
 font-family:'Montserrat',Arial,sans-serif!important;font-size:18px!important;
 line-height:1.58!important
}
html,body{max-width:100%;overflow-x:hidden!important}
*,*:before,*:after{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
@media(max-width:900px){
 .content,.container,.hero__content,.about>.content,.services>.content,.projects>.content,
 .about-page .content,.projects-page .content,.contact-page .container,
 .standalone-contact>.container{
  width:calc(100% - 40px)!important;max-width:none!important;
  margin-left:20px!important;margin-right:20px!important;padding-left:0!important;padding-right:0!important
 }
 .hero__content h1{font-size:clamp(26px,7vw,36px)!important;line-height:1.1!important;max-width:100%!important}
 .hero__buttons{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
 .about__intro{padding-right:0!important}
 .about__features,.services__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
 .projects__head,.section-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
 .projects__grid,.projects__grid--four{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
 .projects-page__grid,.project-details-grid,.other-projects__grid,.contact-page-grid{grid-template-columns:1fr!important;gap:20px!important}
 .project-card,.project-detail-card,.other-project-card,.contact-info-card,.contact-mail-card{min-width:0!important;width:100%!important}
 .project-card img,.project-detail-card img{width:100%!important;height:auto!important;object-fit:cover!important}
 .about-modal__logos,.about-page__logos,.clients-grid,.client-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
 .ending-cta{width:calc(100% - 40px)!important;margin-left:20px!important;margin-right:20px!important;height:auto!important;min-height:260px!important;padding:24px 18px!important}
 .ending-cta__content{width:100%!important;max-width:100%!important;margin:0!important;padding:18px!important}
 footer.footer .footer__inner{width:calc(100% - 40px)!important;margin-left:20px!important;margin-right:20px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 28px!important}
 .offer-modal{padding:16px!important}.offer-modal__dialog{width:100%!important;max-width:620px!important;max-height:calc(100vh - 32px)!important;overflow-y:auto!important}
}
@media(max-width:600px){
 .content,.container,.hero__content,.about>.content,.services>.content,.projects>.content,
 .about-page .content,.projects-page .content,.contact-page .container,.standalone-contact>.container{
  width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important
 }
 header nav,.nav,.main-nav{flex-wrap:wrap!important}
 header nav a,.nav a,.main-nav a{white-space:normal!important}
 .hero__content{padding-top:36px!important;padding-bottom:38px!important}
 .hero__content h1{font-size:27px!important}
 .hero__buttons{flex-direction:column!important;align-items:stretch!important}
 .hero__buttons .btn,.hero__buttons a{width:100%!important;max-width:100%!important;justify-content:center!important}
 .about__features,.services__grid,.projects__grid,.projects__grid--four,
 .projects-page__grid,.project-details-grid,.other-projects__grid,.contact-page-grid{
  grid-template-columns:1fr!important
 }
 .about-modal__logos,.about-page__logos,.clients-grid,.client-logos{grid-template-columns:1fr!important}
 input,textarea,button{max-width:100%!important}
 .ending-cta{width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important;min-height:300px!important}
 footer.footer .footer__inner{width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important;grid-template-columns:1fr!important;gap:30px!important}
 footer.footer .footer__brand,footer.footer .footer__contact,footer.footer .footer__quick,footer.footer .footer__services{width:100%!important;text-align:left!important}
 p,li,a,span,h1,h2,h3{overflow-wrap:anywhere}
 .offer-modal__dialog{padding:26px 18px!important}
}


/* FINAL: HERO na naslovnoj prati iste margine kao sav ostali sadržaj */
@media (min-width:901px){
  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content h1,
  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content p,
  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__buttons{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Mobilni prikaz hero sadržaja prati iste mobilne rubove kao ostatak stranice */
@media (max-width:900px){
  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content{
    width:calc(100% - 40px) !important;
    margin-left:20px !important;
    margin-right:20px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media (max-width:600px){
  body:not(.about-page):not(.projects-page):not(.contact-page) .hero__content{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
  }
}


/* =========================================================
   STVARNA ZAVRŠNA KOREKCIJA HERO SEKCIJE + MOBILNOG PRIKAZA
   ========================================================= */

/* DESKTOP: tekst hero sekcije počinje točno 2 cm od lijevog ruba */
@media (min-width: 901px){
  .hero{
    position:relative !important;
    height:560px !important;
    overflow:hidden !important;
  }

  .hero__content{
    position:absolute !important;
    left:2cm !important;
    right:2cm !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-47%) !important;

    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;

    z-index:3 !important;
  }

  .hero__content h1{
    width:auto !important;
    max-width:760px !important;
    margin:0 !important;
    font-size:33px !important;
    line-height:1.08 !important;
  }

  .hero__line{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero__content p{
    width:auto !important;
    max-width:760px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:18px !important;
    line-height:1.55 !important;
  }

  .hero__buttons{
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
    max-width:760px !important;
  }
}

/* TABLET / MOBITEL: sadržaj više nije apsolutno pomaknut i ne izlazi iz ekrana */
@media (max-width: 900px){
  .topbar{
    position:relative !important;
    z-index:50 !important;
  }

  .topbar__inner{
    width:calc(100% - 32px) !important;
    margin:0 16px !important;
    min-height:74px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .brand{
    min-width:0 !important;
    flex:0 1 auto !important;
  }

  .brand__top img{
    max-width:118px !important;
    height:auto !important;
  }

  .main-nav,
  .topbar__actions{
    display:none !important;
  }

  .menu-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    font-size:24px !important;
    cursor:pointer !important;
  }

  .topbar.is-open .main-nav,
  .topbar.is-open .topbar__actions{
    display:flex !important;
  }

  .topbar.is-open .topbar__inner{
    flex-wrap:wrap !important;
    padding-bottom:16px !important;
  }

  .topbar.is-open .main-nav{
    order:3 !important;
    width:100% !important;
    flex-direction:column !important;
    gap:0 !important;
    background:#061f33 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }

  .topbar.is-open .main-nav a{
    width:100% !important;
    padding:13px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .topbar.is-open .topbar__actions{
    order:4 !important;
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    padding-top:14px !important;
  }

  .topbar.is-open .topbar__actions .btn{
    width:100% !important;
    justify-content:center !important;
  }

  .hero{
    position:relative !important;
    height:auto !important;
    min-height:620px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:flex-end !important;
  }

  .hero__bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:62% center !important;
  }

  .hero__overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:
      linear-gradient(180deg,
        rgba(2,12,22,.12) 0%,
        rgba(2,12,22,.22) 30%,
        rgba(2,12,22,.82) 68%,
        rgba(2,12,22,.95) 100%) !important;
  }

  .hero__content{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;

    width:calc(100% - 40px) !important;
    max-width:none !important;
    margin:0 20px 28px !important;
    padding:20px !important;
    box-sizing:border-box !important;

    background:rgba(3,24,40,.72) !important;
    backdrop-filter:blur(2px) !important;
    z-index:3 !important;
  }

  .hero__content h1{
    max-width:100% !important;
    margin:0 !important;
    font-size:30px !important;
    line-height:1.1 !important;
    letter-spacing:-.5px !important;
  }

  .hero__content p{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:18px !important;
    line-height:1.5 !important;
  }

  .hero__buttons{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero__buttons .btn{
    flex:1 1 210px !important;
    min-width:0 !important;
  }

  /* Kartice i slike ne smiju se preklapati */
  .service-card,
  .project-card,
  .project-detail-card,
  .other-project-card{
    position:relative !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .service-card img,
  .project-card img,
  .project-detail-card img{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    object-fit:cover !important;
  }

  .service-card__body,
  .project-card__body,
  .project-detail-card__body{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  /* 18 px opisni tekst i na tabletu/mobitelu */
  .about__intro p,
  .feature p,
  .service-card p,
  .projects__lead,
  .about-page p,
  .projects-page p,
  .projects-page li,
  .contact-page p,
  .contact-line,
  .footer__brand-copy,
  .footer__copyright,
  .footer__contact-row,
  .footer__nav a{
    font-size:18px !important;
    line-height:1.55 !important;
  }
}

@media (max-width: 600px){
  .hero{
    min-height:650px !important;
  }

  .hero__content{
    width:calc(100% - 32px) !important;
    margin:0 16px 20px !important;
    padding:18px !important;
  }

  .hero__content h1{
    font-size:26px !important;
  }

  .hero__buttons{
    flex-direction:column !important;
  }

  .hero__buttons .btn{
    width:100% !important;
    flex:none !important;
  }

  .about__features,
  .services__grid,
  .projects__grid,
  .projects__grid--four,
  .projects-page__grid,
  .other-projects__grid,
  .contact-page-grid{
    grid-template-columns:1fr !important;
  }

  footer.footer .footer__inner{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}


/* =========================================================
   FINAL TYPOGRAPHY LOCK
   SVI OPISNI TEKSTOVI = 18 PX NA HR + EN, DESKTOP + MOBILE
   Naslovi i gumbi ostaju nepromijenjeni.
   ========================================================= */

html body p,
html body li,
html body .hero__content p,
html body .hero__lead,
html body .hero__subtitle,
html body .about__intro p,
html body .about__features p,
html body .feature p,
html body .service-card p,
html body .projects__lead,
html body .project-card__body p,
html body .about-page p,
html body .about-page li,
html body .projects-page p,
html body .projects-page li,
html body .project-detail-card li,
html body .other-projects p,
html body .other-projects li,
html body .other-project-card p,
html body .other-project-card li,
html body .contact-intro,
html body .contact-line,
html body .contact-info-card p,
html body .contact-mail-card p,
html body .offer-modal__dialog p,
html body .offer-form label,
html body .offer-form input,
html body .offer-form textarea,
html body .ending-cta__content p,
html body .footer__brand-copy,
html body .footer__copyright,
html body .footer__contact-row,
html body .footer__nav a,
html body footer p,
html body footer li,
html body footer a {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Input/textarea korisnički tekst ostaje 18 px i na mobilnim uređajima */
html body input,
html body textarea {
  font-size: 18px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Nikakvo smanjivanje opisnog teksta na tabletu/mobitelu */
@media (max-width: 1000px) {
  html body p,
  html body li,
  html body .contact-intro,
  html body .contact-line,
  html body .footer__brand-copy,
  html body .footer__copyright,
  html body .footer__contact-row,
  html body .footer__nav a,
  html body .offer-form label,
  html body input,
  html body textarea {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 600px) {
  html body p,
  html body li,
  html body .contact-intro,
  html body .contact-line,
  html body .footer__brand-copy,
  html body .footer__copyright,
  html body .footer__contact-row,
  html body .footer__nav a,
  html body .offer-form label,
  html body input,
  html body textarea {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }
}







/* =========================================================
   MOBITEL: ISTI DESKTOP RASPORED, ALI VEĆI PRIKAZ
   Layout viewport je 1024 px umjesto 1440 px.
   Time je sadržaj na telefonu osjetno veći i stranica se normalno
   scrolla prema dolje.
   ========================================================= */
html,
body{
  height:auto !important;
  min-height:100% !important;
}

@media (max-width: 1100px) and (min-width: 901px){
  html,
  body{
    min-width:1024px !important;
    width:1024px !important;
    max-width:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  main,
  section,
  footer{
    height:auto;
    max-height:none !important;
  }
}


/* =========================================================
   MOBITEL / 1024px DESKTOP-LIKE VIEW:
   footer mora stati cijeli u širinu bez rezanja desnog stupca
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){

  footer.footer{
    width:100% !important;
    overflow:visible !important;
  }

  footer.footer .footer__inner{
    width:calc(100% - 40px) !important;
    max-width:none !important;
    margin-left:20px !important;
    margin-right:20px !important;
    padding-left:0 !important;
    padding-right:0 !important;

    display:grid !important;
    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr)
      minmax(0, .78fr)
      minmax(0, 1.22fr) !important;
    column-gap:18px !important;
    row-gap:0 !important;
    align-items:start !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  footer.footer h3,
  footer.footer p,
  footer.footer a,
  footer.footer span,
  footer.footer .footer__nav a,
  footer.footer .footer__contact-row{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  /* Footer na mobitelu mora ostati čitljiv, ali stati cijeli u kadar */
  footer.footer .footer__brand-copy,
  footer.footer .footer__copyright,
  footer.footer .footer__contact-row,
  footer.footer .footer__nav a{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  footer.footer h3{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  footer.footer .footer__logo-wrap img{
    max-width:130px !important;
    height:auto !important;
  }

  footer.footer .footer__contact-row{
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:9px !important;
  }

  footer.footer .footer__contact-row svg{
    width:18px !important;
    height:18px !important;
  }
}


/* ENGLESKA VERZIJA — veći razmak između CONTACT i HR / EN */
html[lang="en"] .topbar__actions,
html[lang="en"] .header__actions{
  margin-left:18px !important;
}

html[lang="en"] .lang{
  margin-left:18px !important;
}


/* =========================================================
   MOBILNI DESKTOP-LIKE PRIKAZ: HR / EN BEZ POMAKA
   Primjenjuje se samo na mobilni 1024px prikaz.
   Desktop ostaje nepromijenjen.
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){

  /* Header uvijek koristi istu geometriju u HR i EN */
  .topbar{
    height:86px !important;
    min-height:86px !important;
  }

  .topbar__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    height:86px !important;
    min-height:86px !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) 300px !important;
    align-items:center !important;
    column-gap:28px !important;
  }

  .brand{
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    margin:0 !important;
  }

  .brand__top img{
    width:155px !important;
    max-width:155px !important;
    height:auto !important;
  }

  .brand__subtitle{
    display:block !important;
    width:220px !important;
    max-width:220px !important;
    white-space:nowrap !important;
    font-size:9px !important;
  }

  /* 4 jednake navigacijske pozicije – dulji EN tekst ne pomiče ostatak */
  .main-nav{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:12px !important;
    align-items:center !important;
  }

  .main-nav a{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /* Jezik i CTA imaju fiksni prostor u oba jezika */
  .topbar__actions{
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:72px 210px !important;
    column-gap:18px !important;
    align-items:center !important;
    justify-content:end !important;
  }

  .lang,
  html[lang="en"] .lang,
  html[lang="en"] .topbar__actions{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    margin:0 !important;
  }

  .topbar__actions .btn{
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
    margin:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }

  /* Hamburger nije potreban u desktop-like mobilnom prikazu */
  .menu-btn{
    display:none !important;
  }

  /* Hero geometrija identična u HR i EN */
  .hero__content{
    left:2cm !important;
    right:auto !important;
    width:640px !important;
    max-width:640px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero__content h1{
    width:640px !important;
    max-width:640px !important;
    min-height:116px !important;
  }

  .hero__content p{
    width:640px !important;
    max-width:640px !important;
    min-height:58px !important;
  }

  .hero__buttons{
    width:500px !important;
    max-width:500px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }

  .hero__buttons .btn,
  .hero__buttons a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    justify-content:center !important;
  }
}


/* =========================================================
   SAMO MOBITEL — O NAMA: širi tekst, manje lomljenja redova
   Desktop ostaje nepromijenjen.
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){

  .about{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }

  .about .content{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .about__intro{
    width:100% !important;
    max-width:none !important;
    padding-right:0 !important;
    text-align:left !important;
  }

  .about__intro h2{
    max-width:620px !important;
    font-size:25px !important;
    line-height:1.15 !important;
    margin-bottom:14px !important;
  }

  .about__intro p{
    max-width:820px !important;
    font-size:18px !important;
    line-height:1.5 !important;
    margin-bottom:10px !important;
  }

  .about__intro .btn{
    margin-top:16px !important;
  }

  /* Četiri prednosti idu u jedan uredan red preko pune širine. */
  .about__features{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
    align-items:stretch !important;
  }

  .feature{
    min-width:0 !important;
    min-height:205px !important;
    padding:8px 28px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  .feature:first-child{
    border-left:0 !important;
  }

  .feature__icon{
    width:48px !important;
    height:48px !important;
    margin:0 auto 12px !important;
  }

  .feature h3{
    font-size:15px !important;
    line-height:1.25 !important;
    margin:0 0 10px !important;
    white-space:nowrap !important;
  }

  .feature p{
    width:100% !important;
    max-width:205px !important;
    margin:0 auto !important;
    font-size:18px !important;
    line-height:1.45 !important;
    text-align:center !important;
    text-wrap:balance !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}


/* =========================================================
   FOOTER FINAL — jednaki stupci, jednake margine i razmaci
   Primjenjuje se na HR + EN, desktop + mobilni desktop-like prikaz
   ========================================================= */

/* DESKTOP */
@media (min-width:1101px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding-left:0 !important;
    padding-right:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:48px !important;
    row-gap:0 !important;
    align-items:start !important;
    justify-content:stretch !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  footer.footer h3,
  footer.footer p,
  footer.footer a,
  footer.footer span{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }
}

/* MOBILNI PRIKAZ KOJI KORISTI 1024px DESKTOP-LIKE VIEWPORT */
@media (max-width:1100px) and (min-width:901px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding-left:0 !important;
    padding-right:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:24px !important;
    row-gap:0 !important;
    align-items:start !important;
    justify-content:stretch !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  footer.footer h3,
  footer.footer p,
  footer.footer a,
  footer.footer span,
  footer.footer .footer__nav a,
  footer.footer .footer__contact-row{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}

/* Ako se stranica ipak otvori u pravom uskom mobilnom viewportu */
@media (max-width:900px){
  footer.footer .footer__inner{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}


/* =========================================================
   FOOTER — FINALNO PORAVNANJE 4 STUPCA
   BRZI LINKOVI je geometrijski jednako udaljen od lijevog
   i desnog susjednog stupca. HR + EN, desktop + mobilni.
   ========================================================= */

/* Računalo */
@media (min-width:1101px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin:0 2cm !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    column-gap:0 !important;
    align-items:start !important;
  }

  footer.footer .footer__inner > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  /* Svaki stupac dobiva isti unutarnji prostor.
     Prvi je uz lijevu marginu, zadnji uz desnu,
     dva srednja su pravilno centrirana u svojim četvrtinama. */
  footer.footer .footer__inner > *:nth-child(1){
    padding:0 32px 0 0 !important;
    text-align:left !important;
  }
  footer.footer .footer__inner > *:nth-child(2){
    padding:0 21px 0 11px !important;
    text-align:left !important;
  }
  footer.footer .footer__inner > *:nth-child(3){
    padding:0 11px 0 21px !important;
    text-align:left !important;
  }
  footer.footer .footer__inner > *:nth-child(4){
    padding:0 0 0 32px !important;
    text-align:left !important;
  }
}

/* Mobilni desktop-like prikaz */
@media (max-width:1100px) and (min-width:901px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin:0 2cm !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    column-gap:0 !important;
    align-items:start !important;
  }

  footer.footer .footer__inner > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__inner > *:nth-child(1){
    padding:0 16px 0 0 !important;
  }
  footer.footer .footer__inner > *:nth-child(2){
    padding:0 11px 0 5px !important;
  }
  footer.footer .footer__inner > *:nth-child(3){
    padding:0 5px 0 11px !important;
  }
  footer.footer .footer__inner > *:nth-child(4){
    padding:0 0 0 16px !important;
  }
}

/* Pravi uski mobitel: jedan stupac, uredne jednake margine */
@media (max-width:900px){
  footer.footer .footer__inner{
    width:calc(100% - 32px) !important;
    margin:0 16px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  footer.footer .footer__inner > *{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    text-align:left !important;
  }
}


/* =========================================================
   FOOTER — STVARNO JEDNAKI RAZMACI
   4 jednaka stupca + isti razmak između svakog stupca.
   Bez dodatnih asimetričnih paddinga.
   HR + EN, desktop + mobilni desktop-like prikaz.
   ========================================================= */

/* DESKTOP */
@media (min-width:1101px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:56px !important;
    row-gap:0 !important;
    align-items:start !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__inner > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
}

/* MOBILNI DESKTOP-LIKE PRIKAZ */
@media (max-width:1100px) and (min-width:901px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:28px !important;
    row-gap:0 !important;
    align-items:start !important;
    box-sizing:border-box !important;
  }

  footer.footer .footer__inner > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
}

/* USKI MOBITEL */
@media (max-width:900px){
  footer.footer .footer__inner{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  footer.footer .footer__inner > *{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
  }
}


/* =========================================================
   FOOTER — VIZUALNO JEDNAKI RAZMACI IZMEĐU 4 SADRŽAJNA BLOKA
   Ključ: stupci ostaju jednake širine, ali se sadržaj svakog
   stupca centrira unutar svoje četvrtine.
   Tako BRZI LINKOVI stoji stvarno na sredini između
   KONTAKT i SERVISI.
   ========================================================= */

/* DESKTOP */
@media (min-width:1101px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin:0 2cm !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:0 !important;
    align-items:start !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:center !important;
    text-align:left !important;
  }

  footer.footer .footer__brand{
    justify-self:start !important;
  }

  footer.footer .footer__services{
    justify-self:end !important;
  }

  footer.footer .footer__contact h3,
  footer.footer .footer__quick h3,
  footer.footer .footer__services h3,
  footer.footer .footer__nav,
  footer.footer .footer__contact-row{
    text-align:left !important;
  }
}

/* MOBILNI DESKTOP-LIKE PRIKAZ */
@media (max-width:1100px) and (min-width:901px){
  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin:0 2cm !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:0 !important;
    align-items:start !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:center !important;
    text-align:left !important;
  }

  footer.footer .footer__brand{
    justify-self:start !important;
  }

  footer.footer .footer__services{
    justify-self:end !important;
  }
}

/* U uskom mobilnom prikazu ostaje jedan stupac */
@media (max-width:900px){
  footer.footer .footer__inner{
    width:calc(100% - 32px) !important;
    margin:0 16px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
}


/* =========================================================
   FOOTER MOBITEL — e-mail uvijek u jednom redu
   Uz malo drugačiju raspodjelu širine stupaca.
   Desktop ostaje nepromijenjen.
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){

  footer.footer .footer__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin:0 2cm !important;
    padding:0 !important;

    display:grid !important;
    /* Kontakt dobiva malo više mjesta zbog e-mail adrese,
       brzi linkovi malo manje; ukupni raspored ostaje uravnotežen. */
    grid-template-columns:0.92fr 1.28fr 0.82fr 1.18fr !important;
    column-gap:22px !important;
    align-items:start !important;
  }

  footer.footer .footer__brand,
  footer.footer .footer__contact,
  footer.footer .footer__quick,
  footer.footer .footer__services{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:stretch !important;
    text-align:left !important;
  }

  /* Kontakt redovi ostaju uredno poravnati ikona + tekst. */
  footer.footer .footer__contact-row{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
  }

  footer.footer .footer__contact-row svg,
  footer.footer .footer__contact-row img{
    flex:0 0 auto !important;
  }

  /* E-mail nikada ne lomiti u dva reda. */
  footer.footer a[href^="mailto:"],
  footer.footer .footer__contact-row a[href^="mailto:"]{
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    display:inline-block !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Ostali sadržaj smije normalno lomiti redove. */
  footer.footer .footer__services,
  footer.footer .footer__quick{
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

/* Za stvarno uske mobilne zaslone footer je jedan stupac,
   pa e-mail također bez lomljenja. */
@media (max-width:900px){
  footer.footer a[href^="mailto:"]{
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
  }
}


/* =========================================================
   GORNJI DESNI CTA — isti font kao ostale ZATRAŽITE PONUDU /
   REQUEST A QUOTE kartice
   ========================================================= */

.topbar__actions .btn,
.header__actions .btn,
.topbar__actions .btn--small,
.header__actions .btn--small{
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}


/* =========================================================
   MOBITEL — malo manje bočne margine na svim stranicama
   Tekst i sadržaj dobivaju više korisne širine.
   Desktop ostaje nepromijenjen.
   ========================================================= */
@media (max-width: 768px){
  :root{
    --mobile-page-gutter: 14px;
  }

  .container,
  .section__inner,
  .topbar__inner,
  .hero__inner,
  .footer__inner,
  .footer-grid,
  main > section > .container,
  section > .container{
    width: auto !important;
    max-width: none !important;
    margin-left: var(--mobile-page-gutter) !important;
    margin-right: var(--mobile-page-gutter) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Elementi koji već koriste širinu roditelja neka ne dodaju novu bočnu marginu */
  .hero__content,
  .section__content,
  .page-content,
  .content{
    max-width: 100% !important;
  }
}


/* Gornji ZATRAŽITE PONUDU / REQUEST A QUOTE:
   ista veličina fonta kao donji hero CTA */
.topbar__actions .btn,
.header__actions .btn,
.topbar__actions .btn--small,
.header__actions .btn--small{
  font-size:18px !important;
}


/* FINALNO: gornji ZATRAŽITE PONUDU / REQUEST A QUOTE = 18 px */
header .topbar__actions .btn,
header .header__actions .btn,
.topbar__actions a.btn,
.header__actions a.btn,
.topbar__actions .btn--small,
.header__actions .btn--small {
  font-size: 18px !important;
}


/* FINALNO: gornji desni CTA koristi isti font kao hero CTA */
.topbar__actions .btn,
.topbar__actions .btn--small,
.header__actions .btn,
.header__actions .btn--small,
.topbar__actions a.btn,
.header__actions a.btn {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}


/* =========================================================
   EN HEADER — REQUEST A QUOTE ne smije prilaziti CONTACT-u.
   Fiksiraj desni akcijski blok na isto mjesto kao na HR verziji.
   ========================================================= */

html[lang="en"] .topbar__inner{
  grid-template-columns:220px minmax(0,1fr) 300px !important;
}

html[lang="en"] .topbar__actions{
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
  margin-left:0 !important;
  justify-self:end !important;

  display:grid !important;
  grid-template-columns:72px 210px !important;
  column-gap:18px !important;
  align-items:center !important;
}

html[lang="en"] .topbar__actions .lang{
  width:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  margin:0 !important;
}

html[lang="en"] .topbar__actions .btn{
  width:210px !important;
  min-width:210px !important;
  max-width:210px !important;
  margin:0 !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* Ako se header ne renderira kao grid na određenoj širini,
   ipak zadrži minimalni razmak od CONTACT-a. */
html[lang="en"] .main-nav{
  margin-right:24px !important;
}


/* =========================================================
   FINALNO ZAGLAVLJE — ISTA GEOMETRIJA U HR I EN
   Sprječava da REQUEST A QUOTE ode prema CONTACT-u.
   Vrijedi za desktop i desktop-like mobilni prikaz.
   ========================================================= */
@media (min-width:901px){

  html[lang="hr"] .topbar__inner,
  html[lang="en"] .topbar__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:190px minmax(0,1fr) 280px !important;
    column-gap:18px !important;
    align-items:center !important;
  }

  html[lang="hr"] .brand,
  html[lang="en"] .brand{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    margin:0 !important;
  }

  html[lang="hr"] .main-nav,
  html[lang="en"] .main-nav{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:10px !important;
    align-items:center !important;
  }

  html[lang="hr"] .main-nav a,
  html[lang="en"] .main-nav a{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  html[lang="hr"] .topbar__actions,
  html[lang="en"] .topbar__actions{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    margin:0 !important;
    justify-self:end !important;

    display:grid !important;
    grid-template-columns:60px 205px !important;
    column-gap:15px !important;
    align-items:center !important;
  }

  html[lang="hr"] .topbar__actions .lang,
  html[lang="en"] .topbar__actions .lang{
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
    margin:0 !important;
    justify-content:center !important;
  }

  html[lang="hr"] .topbar__actions .btn,
  html[lang="en"] .topbar__actions .btn{
    width:205px !important;
    min-width:205px !important;
    max-width:205px !important;
    margin:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   EN MOBILNI DESKTOP-LIKE PRIKAZ — bez preklapanja navigacije
   Samo za englesku verziju na mobilnom prikazu.
   Desktop i hrvatska verzija ostaju nepromijenjeni.
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){

  html[lang="en"] .topbar__inner{
    grid-template-columns:180px minmax(0,1fr) 270px !important;
    column-gap:12px !important;
  }

  html[lang="en"] .brand{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
  }

  html[lang="en"] .main-nav{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:4px !important;
    align-items:center !important;
  }

  html[lang="en"] .main-nav a{
    min-width:0 !important;
    width:100% !important;
    padding:0 2px !important;
    margin:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  html[lang="en"] .topbar__actions{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
    grid-template-columns:58px 198px !important;
    column-gap:14px !important;
  }

  html[lang="en"] .topbar__actions .lang{
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
  }

  html[lang="en"] .topbar__actions .btn{
    width:198px !important;
    min-width:198px !important;
    max-width:198px !important;
  }
}


/* FINALNO — EN mobilna navigacija koristi isti font kao HR navigacija */
@media (max-width:1100px) and (min-width:901px){
  html[lang="en"] .main-nav a{
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
  }
}


/* =========================================================
   FINALNO — EN NAV = TOČNO ISTA TIPOGRAFIJA KAO HR NAV
   ABOUT US / SERVICES / PROJECTS / CONTACT
   O NAMA / SERVISI / PROJEKTI / KONTAKT
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){
  html[lang="hr"] .main-nav a,
  html[lang="en"] .main-nav a{
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
}

.form-status{margin-top:12px;min-height:22px;font-size:14px!important;line-height:1.4!important;font-weight:600!important}
.form-status--success{color:#77e6a4!important}
.form-status--error{color:#ff9d9d!important}
.js-mail-form button[disabled]{opacity:.65;cursor:wait}


/* =========================================================
   MOBILNI DESKTOP-LIKE PRIKAZ — O NAMA CTA GORE DESNO
   "VIŠE O NAMA" / "MORE ABOUT US" ide u gornji desni kut
   tog bloka. Desktop ostaje nepromijenjen.
   ========================================================= */
@media (max-width:1100px) and (min-width:901px){
  .about .content,
  .about__inner{
    position:relative !important;
  }

  .about__intro{
    position:relative !important;
    padding-right:230px !important;
    min-height:145px !important;
  }

  .about__intro .btn{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    margin:0 !important;
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /* Tekst ostaje lijevo i dobiva dovoljno mjesta da ne ulazi pod gumb. */
  .about__intro h2,
  .about__intro p{
    max-width:100% !important;
  }
}


/* =========================================================
   FINAL HEADER — bez gornjeg ZATRAŽITE PONUDU / REQUEST A QUOTE
   Navigacija + HR/EN rastegnuti do desne margine.
   Font O NAMA / SERVISI / PROJEKTI / KONTAKT + HR|EN = +2 px.
   Vrijedi za desktop i desktop-like mobilni prikaz.
   ========================================================= */
@media (min-width:901px){
  .topbar__inner,
  .header__inner,
  html[lang="hr"] .topbar__inner,
  html[lang="en"] .topbar__inner{
    width:calc(100% - 4cm) !important;
    max-width:none !important;
    margin-left:2cm !important;
    margin-right:2cm !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:190px minmax(0,1fr) 76px !important;
    column-gap:24px !important;
    align-items:center !important;
  }

  .main-nav,
  html[lang="hr"] .main-nav,
  html[lang="en"] .main-nav{
    width:100% !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:clamp(18px,3vw,52px) !important;
    align-items:center !important;
  }

  .main-nav a,
  html[lang="hr"] .main-nav a,
  html[lang="en"] .main-nav a{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-family:'Montserrat',Arial,sans-serif !important;
    font-size:13px !important; /* prethodno 11px => +2px */
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
  }

  .topbar__actions,
  .header__actions,
  html[lang="hr"] .topbar__actions,
  html[lang="en"] .topbar__actions{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .topbar__actions .lang,
  .header__actions .lang,
  html[lang="hr"] .topbar__actions .lang,
  html[lang="en"] .topbar__actions .lang{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    font-size:13px !important; /* +2px */
    line-height:1.2 !important;
  }

  .topbar__actions .lang a,
  .topbar__actions .lang span,
  .header__actions .lang a,
  .header__actions .lang span{
    font-size:13px !important;
  }

  /* Ukloni eventualni stari prostor rezerviran za CTA. */
  .topbar__actions .btn,
  .header__actions .btn{
    display:none !important;
  }
}

/* Na stvarno uskom mobilnom prikazu povećaj nav/jezik za 2px,
   ali zadrži postojeći način prikaza. */
@media (max-width:900px){
  .main-nav a{
    font-size:calc(1em + 2px) !important;
  }
  .lang,
  .lang a,
  .lang span{
    font-size:calc(1em + 2px) !important;
  }
}

/* Hero CTA "KONTAKTIRAJTE NAS / CONTACT US" zadržava isti izgled
   kao dosadašnji donji CTA. */
.hero__buttons .btn,
.hero__buttons a.btn{
  font-size:11px !important;
}


/* =========================================================
   NOVA KONTAKT FORMA — inspirirana dostavljenim rasporedom,
   prilagođena INRI bojama i tipografiji.
   ========================================================= */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
.contact-mail-card--modern{
  background:rgba(2,22,38,.72)!important;
  border:1px solid rgba(35,139,255,.28)!important;
}
.inri-contact-form{display:block!important;width:100%!important}
.inri-form-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
}
.inri-field--full{grid-column:1/-1!important}
.inri-contact-form input:not([type="checkbox"]),
.inri-contact-form textarea{
  width:100%!important;box-sizing:border-box!important;
  margin:0!important;padding:17px 18px!important;
  border:1px solid rgba(35,139,255,.72)!important;
  border-radius:7px!important;
  background:#071d31!important;color:#fff!important;
  font-family:'Montserrat',Arial,sans-serif!important;
  font-size:18px!important;font-weight:400!important;line-height:1.45!important;
  outline:none!important;box-shadow:none!important;
}
.inri-contact-form input:not([type="checkbox"]){min-height:58px!important}
.inri-contact-form textarea{min-height:190px!important;resize:vertical!important}
.inri-contact-form input::placeholder,
.inri-contact-form textarea::placeholder{color:rgba(255,255,255,.78)!important;opacity:1!important}
.inri-contact-form input:focus,
.inri-contact-form textarea:focus{
  border-color:#238bff!important;
  box-shadow:0 0 0 2px rgba(35,139,255,.12)!important;
}
.inri-consent{
  display:flex!important;align-items:flex-start!important;gap:12px!important;
  margin:18px 0 22px!important;color:rgba(255,255,255,.86)!important;
  font-family:'Montserrat',Arial,sans-serif!important;
  font-size:15px!important;font-weight:400!important;line-height:1.5!important;
}
.inri-consent input[type="checkbox"]{
  appearance:none!important;-webkit-appearance:none!important;
  flex:0 0 24px!important;width:24px!important;height:24px!important;
  margin:1px 0 0!important;border:1px solid #238bff!important;border-radius:5px!important;
  background:#071d31!important;cursor:pointer!important;position:relative!important;
}
.inri-consent input[type="checkbox"]:checked{background:#1682ff!important}
.inri-consent input[type="checkbox"]:checked:after{
  content:"✓";position:absolute;left:5px;top:-2px;color:#fff;font-size:18px;font-weight:800
}
.inri-submit{
  min-width:155px!important;min-height:52px!important;padding:0 26px!important;
  border:0!important;border-radius:3px!important;background:#1682ff!important;
  color:#fff!important;font-family:'Montserrat',Arial,sans-serif!important;
  font-size:14px!important;font-weight:800!important;letter-spacing:0!important;
}
.contact-modal__dialog .inri-contact-form{margin-top:4px!important}
.contact-modal__dialog .inri-form-grid{gap:13px!important}
.contact-modal__dialog .inri-contact-form input:not([type="checkbox"]),
.contact-modal__dialog .inri-contact-form textarea{font-size:16px!important;padding:14px 15px!important}
.contact-modal__dialog .inri-contact-form textarea{min-height:145px!important}
.contact-modal__dialog .inri-consent{font-size:13px!important;margin:14px 0 18px!important}

@media(max-width:700px){
  .inri-form-grid{grid-template-columns:1fr!important;gap:12px!important}
  .inri-field--full{grid-column:auto!important}
  .inri-contact-form input:not([type="checkbox"]),
  .inri-contact-form textarea{
    font-size:16px!important;padding:14px 15px!important;border-radius:6px!important
  }
  .inri-contact-form input:not([type="checkbox"]){min-height:54px!important}
  .inri-contact-form textarea{min-height:165px!important}
  .inri-consent{font-size:14px!important;gap:10px!important;margin:16px 0 20px!important}
  .inri-consent input[type="checkbox"]{flex-basis:22px!important;width:22px!important;height:22px!important}
  .inri-submit{min-width:140px!important;min-height:50px!important;font-size:14px!important}
}