/* Final CTA consistency layer — loaded after all section-specific rules. */
.button.button-blue,
.button.button-dark,
.solution-cta .button.button-light {
  width: 236px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* Solutions CTA accent follows the deep-to-light blue gradient from the design. */
.solution-cta h2 span {
  background: none;
  color: #3BA7E3;
  -webkit-text-fill-color: #3BA7E3;
}

@media (min-width: 721px) {
  .solution-cta h2 {
    font-size: 42px;
  }
}

/* Contact form: follows the angled composition and larger fields of the reference. */
.contact{height:900px;min-height:900px}
.contact-image{left:44.5%;top:0;right:0;bottom:0;height:auto;clip-path:polygon(34% 0,100% 0,100% 100%,0 92%,12% 51%,0 18%);overflow:hidden}
.contact-image:after{background:linear-gradient(90deg,rgba(10,19,21,.04),rgba(0,0,0,.12))}
.contact-curve{display:none}
.contact-content{padding-top:118px}
.contact h2,.contact h2 span{font-size:40px!important;line-height:1.1;letter-spacing:-1.1px}.contact h2{margin:28px 0 34px}
.contact form{width:440px;gap:13px}
.contact input,.contact select,.contact textarea{width:100%;border:1px solid #C7CED1;background:rgba(255,255,255,.78);font:14px Inter,Arial,sans-serif;color:#111820;outline-color:#3BA7E3}
.contact input,.contact select{height:52px;padding:0 16px}
.contact select{appearance:auto;color:#606A70;cursor:pointer}
.contact textarea{height:166px;padding:15px 16px;resize:vertical}
.contact .button-dark{margin-top:11px}
.contact .form-status{min-height:20px;margin-top:2px;font-size:14px}
.contact .button-dark:disabled{cursor:wait;opacity:.7;transform:none;box-shadow:none}
.contact .contact-consent{display:flex;align-items:flex-start;gap:12px;margin-top:4px;color:#64747c;font:14px/1.45 Inter,Arial,sans-serif;cursor:pointer}
.contact .contact-consent input{appearance:none;flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;border:1px solid #aebbc1;border-radius:3px;background:#fff;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.contact .contact-consent input:checked{border-color:#3BA7E3;background-color:#3BA7E3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.4 11.5 13 4.7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:14px}
.contact .contact-consent input:focus-visible{outline:3px solid rgba(59,167,227,.28);outline-offset:2px}
.contact form .contact-consent input[type="checkbox"]{
  box-sizing:border-box!important;
  flex:0 0 20px!important;
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  padding:0!important;
  margin:1px 0 0!important;
}
@media(max-width:720px){.contact{height:auto;min-height:820px}.contact-image{left:0;clip-path:none;opacity:.28}.contact-content{padding-top:76px}.contact h2{font-size:31px}.contact form{width:100%}.contact input,.contact select{height:52px}.contact textarea{height:156px}}

/* Desktop navigation and its separate client CTA share one grid, not one dark panel. */
@media(min-width:1381px){
  .site-header{width:max-content;max-width:calc(100vw - 64px);margin:0;padding:0 32px}
  .site-header:not(.is-scrolled){position:fixed;left:32px;transform:none}
  .site-header.is-scrolled{left:32px;transform:none}
  .site-header.is-scrolled.is-nav-hidden{transform:translateY(-130%)}
  .main-nav{flex:none}
  .client-cta{position:fixed;top:28px;right:32px;left:auto;display:grid;width:clamp(140px,9.6vw,184px);height:66px;min-height:66px;margin:0;border-radius:6px;background:#3BA7E3;color:#F7FBFD;font:600 17px Inter,Arial,sans-serif;box-shadow:0 0 30px rgba(18,199,224,.25);transition:transform .38s cubic-bezier(.2,.8,.2,1),top .28s ease,filter .25s;z-index:31}
  .client-cta:hover{transform:translateY(-3px);filter:brightness(1.12)}
  body:has(.site-header.is-scrolled) .client-cta{top:14px}
  body:has(.site-header.is-nav-hidden) .client-cta{transform:translateY(-130%);pointer-events:none}
}
@media(min-width:1101px) and (max-width:1380px){
  .site-header{width:calc(100% - 196px);margin:0}
  .site-header:not(.is-scrolled){position:fixed;left:32px;transform:none}
  .site-header.is-scrolled{left:32px;transform:none}
  .site-header.is-scrolled.is-nav-hidden{transform:translateY(-130%)}
  .client-cta{position:fixed;top:20px;right:32px;left:auto;display:grid;width:116px;height:56px;min-height:56px;margin:0;border-radius:6px;background:#3BA7E3;color:#F7FBFD;font:600 13px Inter,Arial,sans-serif;box-shadow:0 0 24px rgba(18,199,224,.22);transition:transform .38s cubic-bezier(.2,.8,.2,1),top .28s ease,filter .25s;z-index:31}
  body:has(.site-header.is-scrolled) .client-cta{top:14px}
  body:has(.site-header.is-nav-hidden) .client-cta{transform:translateY(-130%);pointer-events:none}
}

/* Footer composition mirrored from the shop design. */
.footer{min-height:368px;padding:56px 0 20px;background:linear-gradient(108deg,#0B0F10 0%,#0D1C24 49%,#123D50 100%);font-family:Inter,Arial,sans-serif}
.footer .container{width:min(1136px,calc(100% - 96px))}
.footer-grid{grid-template-columns:1.55fr 1.15fr 1fr;gap:72px}
.footer-brand{display:grid;grid-template-columns:60px 1fr;gap:28px;align-items:start}
.footer-brand img{width:54px;height:62px;object-fit:contain}
.footer h3{margin:4px 0 20px;font:700 18px Montserrat,Arial,sans-serif}
.footer a,.footer span{font-size:14px;line-height:1.35;margin-bottom:13px;opacity:1}
.footer a{transition:color .2s ease,transform .2s ease}
.footer> .container>div:not(.footer-brand) a:hover,.footer .social a:hover{color:#3BA7E3;transform:translateX(3px)}
.footer-brand a,.footer-brand>div>span{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.footer-brand i{width:16px;color:#35ACE9;font-size:18px;text-align:center}
.footer-brand>div>span{display:block;line-height:1.45;padding-left:0}
.footer-brand>div>span>i{display:inline-block;margin-right:11px}
.footer-hours{display:block;padding-left:29px!important;margin:0!important}
.footer .social{display:flex;gap:11px;margin:17px 0 0}
.footer .social a{display:grid;place-items:center;margin:0;color:#35ACE9;font-size:20px}
.footer .copyright{margin:58px 0 0;text-align:center;font:14px/1.55 Inter,Arial,sans-serif}
.footer .copyright a{display:inline;margin:0;font-weight:700}
@media(max-width:720px){.footer{min-height:0;padding:42px 0 20px}.footer .container{width:calc(100% - 40px)}.footer-grid{grid-template-columns:1fr 1fr;gap:32px 22px}.footer-brand{grid-column:1/-1}.footer h3{font-size:14px}.footer a,.footer span{font-size:14px}.footer .copyright{margin-top:38px;font-size:14px}}

/* Risinājumi image focus — move each image directly in pixels. */
#risinajumi .solution-card:nth-child(1){--image-shift-x:0px;--image-shift-y:-315px;--image-scale:1.01}
#risinajumi .solution-card:nth-child(2){--image-shift-x:0px;--image-shift-y:-185px;--image-scale:1.03}
#risinajumi .solution-card:nth-child(3){--image-shift-x:0px;--image-shift-y:-155px;--image-scale:1.03}
#risinajumi .solution-card:nth-child(4){--image-shift-x:0px;--image-shift-y:-130px;--image-scale:1.03}
#risinajumi .solution-card img{object-position:center center!important;transform:translate(var(--image-shift-x),var(--image-shift-y)) scale(var(--image-scale))!important}
#risinajumi .solution-card:hover img,#risinajumi .solution-card:focus-visible img{transform:translate(var(--image-shift-x),var(--image-shift-y)) scale(var(--image-scale))!important}

/* CTA motion: elevation and a single light sweep, with no scale effect. */
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease}
.button:after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.34) 49%,transparent 70%);transform:translateX(-135%);transition:transform .62s cubic-bezier(.18,.75,.3,1);pointer-events:none}
.button:hover{transform:translateY(-2px) !important;filter:none;box-shadow:0 12px 26px rgba(0,0,0,.22)!important}
.button:hover:after{transform:translateX(135%)}
.button-blue:hover{box-shadow:0 12px 28px rgba(59,167,227,.34)!important}
.button-light:hover{box-shadow:0 12px 28px rgba(63,182,249,.25)!important}
.button-dark:hover{box-shadow:0 12px 28px rgba(0,0,0,.34)!important}
@media(prefers-reduced-motion:reduce){.button:after{display:none}.button:hover{transform:none!important}}

/* Mobile layout: preserve composition, readable type and touch targets on 320–720 px screens. */
@media(max-width:720px){
  html{scroll-padding-top:82px}
  .hero{height:min(760px,100svh);min-height:680px}
  .hero-header-space{height:76px}
  .site-header{height:60px!important;width:calc(100% - 32px)!important;top:16px!important}
  .site-header.is-scrolled{top:10px!important}
  .wordmark{font-size:15px!important;padding-left:0!important}
  .client-cta{position:fixed!important;top:16px;right:54px;display:grid!important;width:100px!important;height:60px!important;min-height:60px!important;margin:0!important;border-radius:6px;background:#3BA7E3;color:#F7FBFD;font:600 14px Inter,Arial,sans-serif;z-index:31;transition:transform .38s cubic-bezier(.2,.8,.2,1),top .28s ease,filter .25s}
  body:has(.site-header.is-scrolled) .client-cta{top:10px}
  body:has(.site-header.is-nav-hidden) .client-cta{transform:translateY(-150%);pointer-events:none}
  .hero-content{width:calc(100% - 40px)!important;margin:0 20px!important;padding-top:182px!important}
  .hero h1{font-size:clamp(36px,10.4vw,46px)!important;line-height:1.04}
  .hero-content p{max-width:340px;font-size:15px!important;line-height:1.45}
  .button.button-blue,.button.button-dark,.solution-cta .button.button-light{width:min(236px,100%);height:58px!important;min-height:58px!important;font-size:14px!important}
  .services,.why,#risinajumi{overflow:hidden}
  .section-dark{padding:66px 0!important}
  .section-dark h2,.solutions-custom>h2{font-size:clamp(30px,8.6vw,40px)!important;line-height:1.08!important}
  .service-grid{grid-template-columns:1fr!important;gap:16px!important}
  .services .image-card{height:clamp(240px,73vw,320px);border-radius:24px}
  .services .image-card>div{inset:auto 18px 18px}
  .why{padding:68px 0 72px!important}
  .why-layout-custom{gap:32px 16px!important}
  .why-layout-custom .benefit{min-width:0}
  #risinajumi{padding:58px 0 76px!important}
  .solutions-custom>.eyebrow{margin-bottom:22px!important}
  .solutions-custom>h2{margin-bottom:34px!important}
  .solution-list{gap:16px!important}
  #risinajumi .solution-card{height:190px!important;border-radius:22px}
  #risinajumi .solution-content{padding:16px 18px}
  #risinajumi .solution-content strong{font-size:21px!important;line-height:1.12}
  #risinajumi .solution-content p{font-size:11px}
  #risinajumi .solution-card:nth-child(1){--image-shift-y:-138px}
  #risinajumi .solution-card:nth-child(2){--image-shift-y:-90px}
  #risinajumi .solution-card:nth-child(3){--image-shift-y:-80px}
  #risinajumi .solution-card:nth-child(4){--image-shift-y:-65px}
  .solution-cta{padding-top:48px!important}
  .solution-cta h2,.solution-cta h2 span{font-size:clamp(27px,8vw,34px)!important;line-height:1.24!important}
  .solution-cta .button-light{margin-top:24px}
  .contact{min-height:0!important}
  .contact-content{padding:86px 0 72px!important}
  .contact h2,.contact h2 span{font-size:clamp(32px,9vw,40px)!important;line-height:1.08!important}
  .contact form{gap:12px!important}
  .contact input,.contact select{height:54px!important;font-size:15px!important}
  .contact textarea{height:150px!important;font-size:15px!important}
}
@media(max-width:390px){
  .client-cta{right:50px;width:92px!important;font-size:14px}
  .hero h1{font-size:35px!important}
  .services .image-card{height:235px}
  #risinajumi .solution-card{height:176px!important}
}

/* Match the E-veikals divider rhythm to the NEXTAGE IT / Privātpersonām divider. */
@media (min-width: 1381px) {
  .main-nav > a:nth-child(3) {
    margin-right: 20px;
  }

  .main-nav > a:nth-child(3)::after {
    right: -23px !important;
  }
}

/* Between desktop and phone, keep navigation readable instead of compressing labels. */
@media (min-width: 721px) and (max-width: 1380px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    position: fixed;
    top: 20px;
    left: 32px;
    width: calc(100% - 196px);
    height: 60px;
    margin: 0;
    padding: 0 20px;
    transform: none;
  }

  .site-header.is-scrolled { top: 14px; }
  .site-header.is-scrolled.is-nav-hidden { transform: translateY(-140%); }

  .wordmark { font-size: 17px; }
  .main-nav { display: none !important; }

  .menu-toggle {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 27px;
    height: 2px;
    border-radius: 999px;
    background: #f7fbfd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  }

  .menu-toggle:hover { background: rgba(255, 255, 255, .08); }
  .menu-toggle:focus-visible { outline: 2px solid #3ba7e3; outline-offset: 3px; }

  .main-nav.open {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: flex !important;
    height: auto;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(205, 239, 255, .15);
    border-radius: 8px;
    background: rgba(13, 18, 21, .94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
  }

  .main-nav.open a {
    height: auto;
    min-height: 44px;
    padding: 11px 14px;
    font-size: 15px;
  }

  .main-nav.open a::after,
  .main-nav.open .audience-indicator { display: none !important; }

  .client-cta {
    position: fixed;
    top: 20px;
    right: 32px;
    display: grid;
    width: 132px;
    height: 60px;
    min-height: 60px;
    margin: 0;
    border-radius: 6px;
    font-size: 15px;
    z-index: 31;
  }

  body:has(.site-header.is-scrolled) .client-cta { top: 14px; }
  body:has(.site-header.is-nav-hidden) .client-cta {
    transform: translateY(-140%);
    pointer-events: none;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled { width: calc(100% - 180px); }
  .client-cta { width: 116px; font-size: 14px; }
}

/* Laptop GPUs should prioritise a stable hero over the wide-screen 3D scene. */
@media (min-width: 721px) and (max-width: 1380px) {
  .hero,
  .services {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    will-change: auto !important;
  }

  .hero::before { opacity: 0 !important; }

  .hero-image {
    --hero-scroll-zoom: 1 !important;
    --hero-scroll-lift: 0px !important;
    --energy: .08 !important;
    --energy-rotation: 0deg !important;
    --portal-bloom-scale: .72 !important;
    --portal-ring-scale: .82 !important;
  }

  .hero-content {
    --copy-y: 0px !important;
    --copy-scale: 1 !important;
    --copy-opacity: 1 !important;
  }
}

/* Mobile hero: keep the message, navigation and device visually separate. */
@media (max-width: 720px) {
  .hero-message { display: none; }

  .hero-curve {
    background: linear-gradient(
      90deg,
      rgba(250, 251, 251, .99) 0%,
      rgba(250, 251, 251, .98) 58%,
      rgba(250, 251, 251, .88) 70%,
      rgba(250, 251, 251, .42) 87%,
      rgba(250, 251, 251, .04) 100%
    ) !important;
  }

  .hero-image { opacity: .62; }
  .hero-image img { object-position: 79% center; }

  .client-cta {
    right: 76px !important;
    width: 100px !important;
  }

  .menu-toggle { right: 16px; }
}

@media (max-width: 390px) {
  .client-cta { right: 66px !important; width: 92px !important; }
}

/* Desktop grid: 80 px gutters at 1440 px, matching the 1280 px content container. */
@media (min-width: 1381px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: max(32px, calc((100vw - 1280px) / 2));
    width: calc(min(1280px, calc(100vw - 64px)) - clamp(172px, calc(9.6vw + 32px), 216px));
    max-width: none;
  }

  .site-header .main-nav { flex: 1; gap:clamp(12px, 1.2vw, 18px); padding-left:20px; }

  .client-cta {
    right: max(32px, calc((100vw - 1280px) / 2));
  }
}

/* Branded page transition for full-page navigation. */
.page-transition-layer{position:fixed;z-index:9999;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 30%,rgba(48,185,249,.22),transparent 32%),linear-gradient(135deg,#101518,#071015);opacity:0;clip-path:circle(0% at 50% 50%);transition:opacity .42s ease,clip-path .52s cubic-bezier(.2,.8,.2,1)}
body.page-enter .page-transition-layer{opacity:1;clip-path:circle(150% at 50% 50%)}
body.page-leaving .page-transition-layer{opacity:1;clip-path:circle(150% at 50% 50%)}
@media(prefers-reduced-motion:reduce){.page-transition-layer{display:none}}

/* Global premium loader, shared by every site page. */
.site-preloader{position:fixed;z-index:10000;inset:0;display:grid;place-items:center;background:#131517;opacity:1;visibility:visible;transition:opacity .42s ease,visibility 0s linear .42s}
.site-preloader-ring{position:relative;display:block;width:58px;height:58px;border:3px solid rgba(59,167,227,.18);border-top-color:#3BA7E3;border-right-color:#3BA7E3;border-radius:50%;filter:drop-shadow(0 0 11px rgba(59,167,227,.32));animation:site-loader-spin .82s linear infinite}
.site-preloader-ring::after{content:"";position:absolute;inset:10px;border:1px solid rgba(59,167,227,.32);border-left-color:#3BA7E3;border-radius:50%;animation:site-loader-spin 1.28s linear infinite reverse}
body.is-loaded .site-preloader{opacity:0;visibility:hidden;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes site-loader-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.site-preloader-ring,.site-preloader-ring::after{animation:none}}

/* Wide layouts use page edges, not a centred navigation group. */
@media (min-width: 1381px) {
  :root { --navigation-edge: clamp(32px, 5.56vw, 80px); }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: var(--navigation-edge);
    width: min(1108px, calc(100vw - var(--navigation-edge) - var(--navigation-edge) - clamp(172px, calc(9.6vw + 32px), 216px)));
  }

  .client-cta { right: var(--navigation-edge); }
}

@media (min-width: 1381px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    width: max-content;
    max-width: calc(100vw - var(--navigation-edge) - var(--navigation-edge) - clamp(172px, calc(9.6vw + 32px), 216px));
  }

  .site-header .main-nav { flex: 0 0 auto; }
}

/* Services dropdown and the catalogue entry point. */
.nav-dropdown{position:relative;display:flex;align-items:center;height:100%}
.nav-dropdown .has-caret{gap:8px;cursor:pointer}
.services-dropdown-menu{position:absolute;top:100%;left:-16px;z-index:50;display:grid;width:270px;padding:9px;border:1px solid rgba(205,239,255,.16);border-radius:10px;background:rgba(13,18,21,.94);box-shadow:0 18px 42px rgba(0,0,0,.3);backdrop-filter:blur(18px) saturate(135%);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.services-dropdown-menu a{display:flex!important;align-items:center;min-height:38px!important;height:auto!important;padding:8px 11px;border-radius:6px;color:#f4f7f8;font-size:13px;line-height:1.25;opacity:1!important}
.services-dropdown-menu a:hover{background:rgba(63,182,249,.12);color:#BCEBFF!important;text-shadow:none!important}
.services-dropdown-all{margin-top:4px;border-top:1px solid rgba(205,239,255,.13);color:#72c9f5!important;font-weight:600}
.services-dropdown-all span{margin-left:auto;font-size:17px}
.services-dropdown-order{margin-top:0;border-top:0;color:#72c9f5!important;font-weight:600}
.services-dropdown-order span{font-size:0!important}
.services-dropdown-order span::after{content:"\2192";font-size:17px;line-height:1}
.nav-dropdown:hover .services-dropdown-menu,.nav-dropdown:focus-within .services-dropdown-menu,.nav-dropdown.is-open .services-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.services-all-wrap{display:flex;justify-content:center;padding-top:52px}.services-all-link{background:#f5f6f6;color:#101415}
.services-all-link{width:236px!important;height:64px!important;min-height:64px!important;padding:0!important;font:700 14px Montserrat,Arial,sans-serif!important}
@media(max-width:720px){.nav-dropdown{display:block;height:auto}.main-nav.open .nav-dropdown .has-caret{display:flex;justify-content:flex-start;gap:8px}.main-nav.open .services-dropdown-menu{position:static;width:100%;margin:0 0 4px;padding:0 8px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.main-nav.open .services-dropdown-menu a{min-height:36px!important;padding-left:16px;font-size:13px}.main-nav.open .nav-dropdown:not(.is-open) .services-dropdown-menu{display:none}.services-all-wrap{padding-top:34px}}

/* 14px reading baseline: cards grow with their copy instead of clipping it. */
.surveillance-benefit p,.service-detail li,.use-card p,.solution-card-detail p,.contact-consent span,.consent span{overflow-wrap:anywhere}
@media(min-width:721px){.surveillance-benefit{min-height:236px!important}.service-detail{min-height:174px!important}}
@media(min-width:721px) and (max-width:1100px){.surveillance-benefit{min-height:222px!important}.service-detail{min-height:184px!important}}
@media(max-width:720px){.surveillance-benefit{min-height:218px!important}.solution-card-detail>div{padding-bottom:14px}.footer-grid{align-items:start}}
@media(min-width:1101px) and (max-width:1200px){.site-header{width:calc(100% - 40px);padding-left:12px;padding-right:12px;font-size:14px}.wordmark{font-size:14px;padding-right:10px}.main-nav{gap:8px;padding-left:10px}.main-nav .clients{flex-basis:98px;width:98px;font-size:14px}}

/* Rotating service proposition in the homepage hero. */
.hero-content .hero-service-slogan{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:72px;max-width:620px;margin:27px 0 31px;line-height:1.35;transition:opacity .23s ease,transform .23s ease;will-change:opacity,transform}
.hero-service-slogan strong{font:700 18px/1.25 Montserrat,Arial,sans-serif;color:#17435c}
.hero-service-slogan span{display:block;font:400 17px/1.45 Inter,Arial,sans-serif;color:#1b2225}
.hero-service-slogan.is-changing{opacity:0;transform:translateY(8px)}
@media(max-width:820px){.hero-content .hero-service-slogan{min-height:92px;margin:20px 0 25px}.hero-service-slogan strong{font-size:16px}.hero-service-slogan span{font-size:15px}}
@media(max-width:720px){.hero-content .hero-service-slogan{min-height:116px;max-width:330px;margin:22px 0 26px}.hero-service-slogan strong{font-size:16px;line-height:1.28}.hero-service-slogan span{font-size:15px;line-height:1.45}}

/* Hero breathing room: heading → rotating proposition → action. */
.hero-content .hero-service-slogan{margin:26px 0 68px}
@media(max-width:820px){.hero-content .hero-service-slogan{margin:14px 0 58px}}
@media(max-width:720px){.hero-content .hero-service-slogan{margin:14px 0 60px}}

/* Keep the CTA on one stable baseline while rotating copy has different line counts. */
.hero-content .hero-service-slogan{height:92px;min-height:92px}
@media(max-width:820px){.hero-content .hero-service-slogan{height:108px;min-height:108px}}
@media(max-width:720px){.hero-content .hero-service-slogan{height:128px;min-height:128px}}

/* Shared legal-notice links inside contact forms. */
.contact-consent span a,
.consent span a {
  color: #1679ae;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-consent span a:hover,
.consent span a:hover { color: #0f5e8b; }

/* Mobile QA pass: navigation, reading rhythm and footer use one deliberate layout. */

@media (max-width: 720px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    position: fixed;
    top: 20px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    transform: none !important;
  }

  .site-header.is-scrolled { top: 12px !important; }
  .site-header.is-scrolled.is-nav-hidden { transform: translateY(-150%) !important; }
  .wordmark { padding-right: 14px !important; }
  .menu-toggle { right: 18px !important; }

  /* The separate client button is hidden on phones; the header stays uncluttered. */
  .client-cta { display: none !important; }

  .hero { height: max(760px, 100svh) !important; min-height: 760px !important; }
  .hero-image { opacity: .78 !important; }
  .hero-image img { object-position: 78% center !important; }
  .hero-curve {
    background: linear-gradient(90deg, #fafbfb 0%, rgba(250,251,251,.98) 46%, rgba(250,251,251,.82) 63%, rgba(250,251,251,.28) 88%, rgba(250,251,251,.04) 100%) !important;
  }
  .hero-content { padding-top: 205px !important; }

  /* Explicit line breaks in the sales CTA must remain visible on narrow screens. */
  #risinajumi .solution-cta h2 br { display: block !important; content: ""; margin-top: .18em; }
  #risinajumi .solution-cta h2,
  #risinajumi .solution-cta h2 span {
    font-size: clamp(28px, 8.25vw, 34px) !important;
    line-height: 1.22 !important;
    letter-spacing: -1px !important;
  }
  #risinajumi .solution-cta { padding-top: 54px !important; }
  #risinajumi .solution-cta .button-light { margin-top: 30px !important; }

  .footer { padding: 48px 0 24px !important; }
  .footer .container { width: calc(100% - 48px) !important; }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 38px 24px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; gap: 20px !important; }
  .footer-brand img { width: 46px !important; height: 64px !important; }
  .footer h3 { margin: 0 0 15px !important; font-size: 14px !important; }
  .footer a,
  .footer span { font-size: 14px !important; line-height: 1.42 !important; margin-bottom: 10px !important; }
  .footer-brand a,
  .footer-brand > div > span { margin-bottom: 10px !important; }
  .footer .copyright { margin-top: 42px !important; font-size: 13px !important; line-height: 1.55 !important; }
}

@media (max-width: 390px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled { left: 16px !important; width: calc(100% - 32px) !important; }
  .footer .container { width: calc(100% - 40px) !important; }
  .footer-grid { gap: 32px 18px !important; }
  .footer a,
  .footer span { font-size: 13px !important; }
}

/* Service-page consultation CTA: keep the label on one calm, readable line. */
@media (max-width: 720px) {
  .surveillance-cta .button.button-light {
    display: inline-flex !important;
    width: min(290px, 100%) !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 360px) {
  .surveillance-cta .button.button-light {
    width: 100% !important;
    font-size: 12px !important;
  }
}

/* Service pages: on phones the composition is centred instead of inheriting
   the desktop left-aligned grid. The navigation stays intentionally aligned. */
@media (max-width: 720px) {
  .surveillance-page .surveillance-copy {
    text-align: center !important;
  }

  .surveillance-page .surveillance-copy > p:not(.service-label) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .surveillance-page .hero-actions {
    justify-content: center !important;
  }

  .surveillance-page .surveillance-why h2,
  .surveillance-page .surveillance-services h2,
  .surveillance-page .surveillance-uses h2 {
    text-align: center !important;
  }

  .surveillance-page .surveillance-cta .container {
    text-align: center !important;
  }

  .surveillance-page .surveillance-cta .button.button-light {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .surveillance-page .use-card div {
    text-align: center !important;
  }
}

/* Keep the home hero copy inside the light panel at every laptop/desktop width. */
@media (min-width: 721px) {
  .hero {
    --hero-copy-safe-width: min(700px, calc(47vw - 48px));
  }

  .hero h1,
  .hero-content .hero-service-slogan {
    max-width: var(--hero-copy-safe-width) !important;
    overflow-wrap: anywhere;
  }

  .hero h1 { text-wrap: balance; }
  .hero-content .hero-service-slogan { text-wrap: pretty; }
}

/* Mobile solution cards: crop inside the frame; never move the image out of it. */
@media (max-width: 720px) {
  #risinajumi .solution-card > img,
  #risinajumi .solution-card:hover > img,
  #risinajumi .solution-card:focus-visible > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.015) !important;
  }

  #risinajumi .solution-card:nth-child(1) > img { object-position: center 66% !important; }
  #risinajumi .solution-card:nth-child(2) > img { object-position: center 50% !important; }
  #risinajumi .solution-card:nth-child(3) > img { object-position: center 52% !important; }
  #risinajumi .solution-card:nth-child(4) > img { object-position: center 50% !important; }
}

/* Compact laptop navigation: no empty bar beside the hamburger. */
@media (min-width: 721px) and (max-width: 1380px) {
  .site-header,
  .catalogue-page .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: max(32px, calc((100vw - 1280px) / 2)) !important;
    width: min(288px, calc(100% - 196px)) !important;
    margin: 0 !important;
  }

  .site-header .wordmark { padding-right: 18px !important; }
  .site-header .menu-toggle { right: 14px !important; }
}

/* Modal navigation for phones and compact laptops. */
.main-nav .mobile-client-link,
.mobile-nav-overlay { display: none !important; }

@media (max-width: 1380px) {
  body.nav-modal-open { overflow: hidden !important; }

  .site-header { z-index: 110 !important; }

  .mobile-nav-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(4, 9, 12, .56);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }

  .mobile-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .main-nav.open {
    position: fixed !important;
    z-index: 111;
    top: 96px !important;
    left: max(20px, calc((100vw - 1280px) / 2)) !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: min(430px, calc(100vw - 40px)) !important;
    height: auto !important;
    max-height: calc(100svh - 116px);
    overflow: auto;
    padding: 12px !important;
    border: 1px solid rgba(190, 232, 249, .18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(27, 36, 40, .98), rgba(11, 16, 19, .98));
    box-shadow: 0 24px 62px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    transform: translateY(-10px);
    animation: mobile-nav-in .32s cubic-bezier(.2, .82, .2, 1) forwards;
  }

  .main-nav.open > a,
  .main-nav.open .nav-dropdown > .has-caret {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 8px;
    font-size: 15px !important;
    line-height: 1.25;
  }

  .main-nav.open .nav-dropdown > .has-caret { justify-content: flex-start !important; }

  .main-nav.open > a:hover,
  .main-nav.open .nav-dropdown > .has-caret:hover {
    background: rgba(63, 182, 249, .1);
  }

  .main-nav.open .nav-dropdown {
    display: block !important;
    width: 100%;
    height: auto;
  }

  .main-nav.open .services-dropdown-menu,
  .main-nav.open .nav-dropdown:not(.is-open) .services-dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    margin: 2px 0 6px;
    padding: 3px 6px !important;
    border: 0 !important;
    border-left: 1px solid rgba(123, 209, 247, .28) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .main-nav.open .nav-dropdown.is-open .services-dropdown-menu {
    display: grid !important;
  }

  .main-nav.open .services-dropdown-menu a {
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .main-nav.open .mobile-client-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px !important;
    margin-top: 8px;
    border-radius: 8px;
    background: #3BA7E3;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(59, 167, 227, .22);
  }

  .menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(.55); }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu-toggle span { transition: transform .24s ease, opacity .18s ease; }

  /* At every breakpoint that uses a hamburger the client area belongs inside it. */
  .client-cta {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Cookie consent --------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  right: clamp(16px, 3vw, 48px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(650px, calc(100vw - 32px));
  padding: 22px 24px;
  color: #f7fbfd;
  background: rgba(15, 23, 27, 0.94);
  border: 1px solid rgba(117, 198, 238, 0.28);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(2, 10, 15, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.cookie-consent.is-visible { opacity: 1; transform: translateY(0); }
.cookie-consent.is-leaving { opacity: 0; transform: translateY(12px); }
.cookie-consent__content { min-width: 0; flex: 1 1 auto; }
.cookie-consent__title { margin: 0 0 7px; font: 700 18px/1.2 Inter, sans-serif; }
.cookie-consent__text { margin: 0; color: rgba(239, 247, 250, 0.78); font: 400 14px/1.5 Inter, sans-serif; }
.cookie-consent__link { display: inline-block; margin-top: 7px; color: #55bcf1; font: 600 13px/1.4 Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.cookie-consent__actions { display: flex; flex: 0 0 auto; gap: 10px; }
.cookie-consent__button { min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; font: 700 13px/1 Inter, sans-serif; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.cookie-consent__button:hover { transform: translateY(-2px); }
.cookie-consent__button--secondary { color: #f7fbfd; background: transparent; border-color: rgba(235, 247, 251, 0.4); }
.cookie-consent__button--secondary:hover { border-color: #fff; }
.cookie-consent__button--primary { color: #fff; background: #3ba7e3; border-color: #3ba7e3; }
.cookie-consent__button--primary:hover { background: #2899d8; border-color: #2899d8; }

@media (max-width: 620px) {
  .cookie-consent { right: 16px; bottom: 16px; left: 16px; display: block; width: auto; padding: 20px; }
  .cookie-consent__actions { margin-top: 17px; }
  .cookie-consent__button { flex: 1 1 0; }
}

/* Final mobile wordmark size — placed after legacy header rules. */
@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    font-size: 19px !important;
    letter-spacing: -.45px !important;
  }
}

/* Catalogue mobile header: the dark catalogue surface needs a clear white mark. */
@media (max-width: 720px) {
  .catalogue-page .site-header .wordmark,
  .catalogue-page .site-header.is-scrolled .wordmark {
    color: #fff !important;
  }
}

/* Ultrawide screens: keep the navigation and compact client CTA inside the
   same 1280px content grid, with deliberate whitespace after the LV control. */
@media (min-width: 1381px) {
  :root {
    --wide-nav-edge: max(32px, calc((100vw - var(--page)) / 2));
    --wide-client-width: 164px;
    --wide-nav-gap: 32px;
  }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: var(--wide-nav-edge) !important;
    width: calc(var(--page) - var(--wide-client-width) - var(--wide-nav-gap)) !important;
    max-width: none !important;
  }

  .site-header .main-nav {
    flex: 1 1 auto !important;
  }

  .site-header .main-nav > .language {
    margin-right: 0 !important;
  }

  .site-header > .clients,
  .client-cta {
    position: fixed !important;
    top: 28px !important;
    right: var(--wide-nav-edge) !important;
    left: auto !important;
    width: var(--wide-client-width) !important;
  }

  .site-header.is-scrolled > .clients,
  body:has(.site-header.is-scrolled) .client-cta {
    top: 14px !important;
  }
}

/* Keep the two utility actions in the services drawer centred as one label + arrow group. */
@media (max-width: 720px) {
  .main-nav.open .services-dropdown-menu .services-dropdown-all {
    justify-content: center !important;
    text-align: center !important;
  }

  .main-nav.open .services-dropdown-menu .services-dropdown-all span {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
  }
}

/* Final wide-screen navigation grid. Kept last to override legacy header rules. */
@media (min-width: 1381px) {
  :root {
    --wide-nav-edge: max(32px, calc((100vw - var(--page)) / 2));
    --wide-client-width: 164px;
    --wide-nav-gap: 32px;
  }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: var(--wide-nav-edge) !important;
    width: calc(var(--page) - var(--wide-client-width) - var(--wide-nav-gap)) !important;
    max-width: none !important;
  }

  .site-header .main-nav { flex: 1 1 auto !important; }
  .site-header .main-nav > .language { margin-right: 0 !important; }

  .site-header > .clients,
  .client-cta {
    position: fixed !important;
    top: 28px !important;
    right: var(--wide-nav-edge) !important;
    left: auto !important;
    width: var(--wide-client-width) !important;
  }

  .site-header.is-scrolled > .clients,
  body:has(.site-header.is-scrolled) .client-cta { top: 14px !important; }
}

/* Keep the compact desktop header's inner edges symmetrical while scrolling. */
@media (min-width: 721px) and (max-width: 1380px) {
  .site-header.is-scrolled {
    padding: 0 16px !important;
  }
}

/* Reserve the same visual breathing room after LV as before the wordmark. */
@media (min-width: 1101px) {
  .site-header .main-nav > .language {
    margin-right: 32px !important;
  }
}

/* Desktop navigation uses the same outer grid as the site's content container. */
@media (min-width: 1381px) {
  :root {
    --navbar-grid-width: min(var(--page), calc(100vw - 64px));
    --navbar-grid-edge: max(32px, calc((100vw - var(--page)) / 2));
    --navbar-client-width: 164px;
    --navbar-client-gap: 32px;
  }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled,
  .catalogue-page .site-header,
  .catalogue-page .site-header:not(.is-scrolled),
  .catalogue-page .site-header.is-scrolled {
    left: var(--navbar-grid-edge) !important;
    width: calc(var(--navbar-grid-width) - var(--navbar-client-width) - var(--navbar-client-gap)) !important;
    max-width: none !important;
  }

  .site-header > .clients,
  .client-cta,
  .catalogue-page .catalogue-client {
    position: fixed !important;
    top: 28px !important;
    right: var(--navbar-grid-edge) !important;
    left: auto !important;
    width: var(--navbar-client-width) !important;
  }

  .site-header.is-scrolled > .clients,
  body:has(.site-header.is-scrolled) .client-cta,
  .catalogue-page .site-header.is-scrolled ~ .catalogue-client {
    top: 14px !important;
  }
}

@media (max-width: 720px) {
  .main-nav.open {
    top: 92px !important;
    left: 20px !important;
    width: calc(100vw - 40px) !important;
    max-height: calc(100svh - 108px);
  }
}

@media (max-width: 390px) {
  .main-nav.open { left: 16px !important; width: calc(100vw - 32px) !important; }
}

@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    font-size: 19px !important;
    letter-spacing: -.55px !important;
  }
}

/* Centre the complete benefit group vertically and horizontally in every
   mobile service-benefit card, not merely its text alignment. */
@media (max-width: 720px) {
  .surveillance-page .surveillance-benefit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .surveillance-page .surveillance-benefit .benefit-icon {
    flex: 0 0 auto !important;
    margin: 0 auto 14px !important;
  }

  .surveillance-page .surveillance-benefit h3 {
    margin: 0 0 14px !important;
  }

  .surveillance-page .surveillance-benefit p {
    margin: 0 !important;
  }
}

/* Homepage mobile section hand-off.  Keep the services CTA inside its dark
   plane and preserve the intentional line break in the services heading. */
@media (max-width: 720px) {
  .services.section-dark {
    position: relative !important;
    z-index: 1 !important;
    padding-bottom: 88px !important;
  }

  .services.section-dark h2 br {
    display: block !important;
  }

  .services-all-wrap {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
    clear: both !important;
    margin: 0 !important;
    padding: 40px 0 0 !important;
    transform: none !important;
  }

  .services-all-wrap.reveal,
  .services-all-wrap.reveal.visible {
    transform: none !important;
  }

  .services-all-link {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
  }

  .why {
    position: relative !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding-top: 76px !important;
  }
}

/* Mobile brand mark: intentionally more prominent without competing with
   the circular menu control. */
@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    font-size: 19px !important;
    letter-spacing: -.45px !important;
  }
}

/* All service-detail heroes use a centred CTA group on phones. */
@media (max-width: 720px) {
  .surveillance-page .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(300px, 100%) !important;
    margin: 0 auto !important;
  }

  .surveillance-page .hero-actions .button {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Service-page cards share a deliberately centred mobile composition. */
@media (max-width: 720px) {
  .surveillance-page .surveillance-benefit,
  .surveillance-page .service-detail,
  .surveillance-page .use-card > div {
    text-align: center !important;
  }

  .surveillance-page .service-detail {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
  }

  .surveillance-page .service-detail > i {
    margin: 0 auto !important;
  }

  .surveillance-page .service-detail ul {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    font-size: 22px !important;
    letter-spacing: -.7px !important;
  }
}

/* At compact-laptop widths the hamburger is already active. Reserve a real
   light copy surface instead of relying only on the photograph's crop: no
   heading, rotating proposition or CTA can visually enter the image area. */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero-curve {
    display: block !important;
    z-index: 0 !important;
    inset: 0 auto 0 0 !important;
    width: min(57vw, 710px) !important;
    background: #fafbfb !important;
    border-radius: 0 46% 46% 0 / 0 52% 52% 0 !important;
  }

  .hero-content {
    --hero-copy-safe-width: min(440px, calc(100vw - 560px)) !important;
  }

  .hero h1,
  .hero-content .hero-service-slogan,
  .hero-content > p {
    max-width: var(--hero-copy-safe-width) !important;
  }
}

/* Centred modal navigation at every hamburger breakpoint. */
@media (max-width: 1380px) {
  .main-nav.open {
    top: clamp(104px, 12vh, 132px) !important;
    right: auto !important;
    left: 50% !important;
    width: min(430px, calc(100vw - 40px)) !important;
    max-height: calc(100svh - 128px) !important;
    transform: translate(-50%, -12px) !important;
    animation: mobile-nav-top-in .32s cubic-bezier(.2, .82, .2, 1) forwards !important;
    align-items: center !important;
    text-align: center !important;
  }

  .main-nav.open > a,
  .main-nav.open .nav-dropdown > .has-caret {
    justify-content: center !important;
    text-align: center !important;
  }

  .main-nav.open .nav-dropdown,
  .main-nav.open .services-dropdown-menu {
    text-align: center !important;
  }

  .main-nav.open .services-dropdown-menu,
  .main-nav.open .nav-dropdown:not(.is-open) .services-dropdown-menu {
    border-top: 1px solid rgba(123, 209, 247, .28) !important;
    border-left: 0 !important;
  }

  .main-nav.open .services-dropdown-menu a {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Compact desktop: retain a calm breathing space under the hero CTA. */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero-content > .button {
    position: relative;
    top: -38px;
  }
}

@keyframes mobile-nav-top-in {
  to { transform: translate(-50%, 0); }
}

@keyframes mobile-nav-center-in {
  to { transform: translate(-50%, -50%); }
}

@keyframes mobile-nav-in {
  to { transform: translateY(0); }
}

/* One navigation grid at every responsive breakpoint: the compact header
   deliberately spans the available content width instead of becoming a short
   floating tile on tablets and compact notebooks. */
@media (min-width: 721px) and (max-width: 1380px) {
  .site-header,
  .catalogue-page .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: max(32px, calc((100vw - 1280px) / 2)) !important;
    width: min(1280px, calc(100vw - 64px)) !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: 20px !important;
    width: calc(100vw - 40px) !important;
    max-width: none !important;
  }
}

/* Compact desktop/tablet hero: reserve a true resting area after the CTA.
   Long rotating propositions must never push the action into the next section. */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero {
    height: max(760px, 100svh) !important;
    min-height: 760px !important;
  }

  .hero-content {
    padding-bottom: 96px !important;
  }
}

/* Keep the right-hand visual connected to the full hero height. The white
   curve remains above it, while the actual photograph always reaches the
   transition into the services section. */
@media (min-width: 721px) and (max-width: 1380px) {
  .hero-image {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(754px, 60vw) !important;
    height: 100% !important;
    clip-path: none !important;
    --hero-scale: 1 !important;
  }

  .hero-image img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% center !important;
  }
}

/* A controlled layered hand-off from hero to Pakalpojumi. The photo stays
   stable; only the incoming services plane glides forward as the user scrolls. */
@media (min-width: 721px) and (max-width: 1380px) and (prefers-reduced-motion: no-preference) {
  .services {
    position: relative !important;
    z-index: 2 !important;
    overflow: clip !important;
    will-change: transform, border-radius !important;
    transform: perspective(1500px) translateY(var(--services-y)) rotateX(var(--services-rotate)) !important;
    transform-origin: 50% 0 !important;
    border-radius: var(--services-radius) var(--services-radius) 0 0 !important;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, var(--services-shadow)) !important;
  }
}

/* The compact photo is a real full-height layer, not a fixed-size asset. */
@media (min-width: 721px) and (max-width: 1380px) {
  .hero-image,
  .hero-image img {
    min-height: 100% !important;
  }

  /* A responsive ellipse keeps the original organic Figma-like silhouette
     while still covering the new, taller hero scene. */
  .hero-image {
    clip-path: ellipse(105% 66% at 100% 50%) !important;
  }
}

/* On phones the transition is intentionally lighter: a calm lift-and-fade
   preserves performance while clearly introducing the services section. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .hero-image {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .services.services-scroll-ready {
    opacity: .01;
    transform: translate3d(0, 44px, 0) !important;
    transition: transform .72s cubic-bezier(.18, .82, .22, 1), opacity .55s ease;
    will-change: transform, opacity;
  }

  .services.services-scroll-ready.services-scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Parallax only for the concrete texture; all content remains perfectly stable. */
@media (min-width: 721px) {
  .why {
    background-attachment: fixed;
    background-position: center center;
  }
}

@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .why { background-attachment: scroll; }
}

/* Canonical home-hero composition for compact desktops.
   The image uses its original smooth S-curve and the copy has a hard safe
   column, so long rotating propositions can never enter the photo area. */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero {
    height: 680px !important;
    min-height: 680px !important;
  }

  .hero-image {
    top: -10px !important;
    right: 0 !important;
    left: auto !important;
    width: 754px !important;
    height: 912px !important;
    min-height: 0 !important;
    overflow: visible !important;
    clip-path: path('M 128 0 H 754 V 912 H 70 C 125 840 155 746 151 648 C 147 565 112 510 72 453 C 28 390 0 326 0 229 C 0 127 51 43 128 0 Z') !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-content {
    --hero-copy-safe-width: clamp(300px, calc(38vw - 20px), 500px);
    padding-bottom: 0 !important;
  }

  .hero h1,
  .hero-content .hero-service-slogan {
    max-width: var(--hero-copy-safe-width) !important;
  }
}

@media (min-width: 1381px) {
  .hero-content {
    --hero-copy-safe-width: min(600px, calc(42vw - 40px));
  }

  .hero h1,
  .hero-content .hero-service-slogan {
    max-width: var(--hero-copy-safe-width) !important;
  }
}

/* Tablet landscape: use the same visual language without forcing the desktop
   S-curve into too little horizontal space. Copy stays on a calm light field. */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero {
    height: max(760px, 100svh) !important;
    min-height: 760px !important;
  }

  .hero-image {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: none !important;
    opacity: .58 !important;
    --hero-scale: 1 !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 76% center !important;
  }

  .hero-curve {
    display: block !important;
    z-index: 0 !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(250,251,251,.99) 0%, rgba(250,251,251,.98) 49%, rgba(250,251,251,.85) 65%, rgba(250,251,251,.25) 100%) !important;
    border-radius: 0 !important;
  }

  .hero-content {
    width: min(500px, calc(100% - 64px)) !important;
    margin-left: 32px !important;
    padding-bottom: 90px !important;
  }
}

/* Final home hero layout.
   Keep one unambiguous composition: the original S-shaped photograph is
   clipped inside the hero, while all copy lives in a measured light column.
   This is deliberately placed last to neutralise earlier experimental rules. */
@media (min-width: 1025px) and (max-width: 1380px) {
  .hero {
    height: clamp(760px, 63.333vw, 874px) !important;
    min-height: clamp(760px, 63.333vw, 874px) !important;
  }

  .hero-image {
    top: -10px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 754px !important;
    height: 912px !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    clip-path: path('M 128 0 H 754 V 912 H 70 C 125 840 155 746 151 648 C 147 565 112 510 72 453 C 28 390 0 326 0 229 C 0 127 51 43 128 0 Z') !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-curve { display: none !important; }

  .hero-content {
    --hero-copy-safe-width: 500px;
    width: min(var(--page), calc(100% - 128px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(276px, 21vw, 306px) !important;
    padding-bottom: 0 !important;
  }

  .hero h1,
  .hero-content .hero-service-slogan {
    max-width: var(--hero-copy-safe-width) !important;
  }
}

/* Wide displays keep the same hierarchy without scaling the right-hand
   device until it overwhelms the message column. */
@media (min-width: 1381px) {
  .hero {
    height: 890px !important;
    min-height: 780px !important;
  }

  .hero-content {
    --hero-copy-safe-width: min(600px, calc(42vw - 40px));
    padding-top: 294px !important;
  }
}

/* Compact navigation: at the hamburger breakpoint the header becomes a calm
   page-level control, rather than a long dark bar. Desktop navigation above
   1380px deliberately remains unchanged. */
@media (max-width: 1380px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    position: fixed !important;
    top: 20px !important;
    left: 32px !important;
    width: calc(100% - 64px) !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header.is-scrolled {
    top: 14px !important;
    padding: 0 10px 0 16px !important;
    border: 1px solid rgba(20, 42, 52, .10) !important;
    border-radius: 999px !important;
    background: rgba(249, 252, 252, .90) !important;
    box-shadow: 0 10px 30px rgba(12, 27, 33, .10) !important;
    backdrop-filter: blur(15px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(125%) !important;
  }

  .site-header.is-nav-hidden { transform: translateY(-150%) !important; }

  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    padding: 0 !important;
    border: 0 !important;
    color: #131517 !important;
    font: 700 18px/1 Inter, Arial, sans-serif !important;
    letter-spacing: -.45px;
    text-shadow: none !important;
  }

  .menu-toggle,
  .site-header .menu-toggle {
    position: absolute !important;
    top: 1px;
    right: 0 !important;
    display: flex !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #131517 !important;
    box-shadow: 0 8px 20px rgba(10, 20, 23, .18) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  .site-header.is-scrolled .menu-toggle { top: 0; right: 1px !important; }

  .menu-toggle span,
  .site-header .menu-toggle span {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 2px !important;
    margin: 0 !important;
    width: 25px !important;
    height: 2px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform-origin: center !important;
  }

  .menu-toggle:hover { background: #1c282d !important; }

  .main-nav.open {
    top: 92px !important;
    left: 32px !important;
    width: min(430px, calc(100vw - 64px)) !important;
  }
}

@media (max-width: 720px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    top: 16px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
  }

  .site-header.is-scrolled { top: 10px !important; }

  .site-header .wordmark,
  .site-header.is-scrolled .wordmark { font-size: 16px !important; }

  .main-nav.open {
    top: 84px !important;
    left: 20px !important;
    width: calc(100vw - 40px) !important;
  }
}

@media (max-width: 390px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled { left: 16px !important; width: calc(100% - 32px) !important; }
  .main-nav.open { left: 16px !important; width: calc(100vw - 32px) !important; }
}

/* Final precedence: the modal itself and all of its actions are centred. */
@media (max-width: 1380px) {
  .main-nav.open {
    top: clamp(104px, 12vh, 132px) !important;
    right: auto !important;
    left: 50% !important;
    width: min(430px, calc(100vw - 40px)) !important;
    max-height: calc(100svh - 128px) !important;
    transform: translate(-50%, -12px) !important;
    animation: mobile-nav-top-in .32s cubic-bezier(.2, .82, .2, 1) forwards !important;
    align-items: center !important;
    text-align: center !important;
  }

  .main-nav.open > a,
  .main-nav.open .nav-dropdown > .has-caret,
  .main-nav.open .services-dropdown-menu a {
    justify-content: center !important;
    text-align: center !important;
  }

  .main-nav.open .nav-dropdown,
  .main-nav.open .services-dropdown-menu {
    text-align: center !important;
  }

  .main-nav.open .services-dropdown-menu,
  .main-nav.open .nav-dropdown:not(.is-open) .services-dropdown-menu {
    border-top: 1px solid rgba(123, 209, 247, .28) !important;
    border-left: 0 !important;
  }
}

/* Mobile brand mark: 15% larger and still balanced with the menu control. */
@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    font-size: 19px !important;
    letter-spacing: -.45px !important;
  }
}

/* Final mobile menu corrections for the catalogue page. */
@media (max-width: 720px) {
  .catalogue-page .site-header .wordmark,
  .catalogue-page .site-header.is-scrolled .wordmark {
    color: #fff !important;
  }

  .main-nav.open .services-dropdown-menu .services-dropdown-all {
    justify-content: center !important;
    text-align: center !important;
  }

  .main-nav.open .services-dropdown-menu .services-dropdown-all span {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
  }
}

/* Final mobile grid: the header, copy containers and footer share one left
   edge. Scrolling keeps the header as dark transparent glass, never white. */
@media (max-width: 720px) {
  :root { --mobile-page-gutter: 20px; }

  .container,
  .footer .container {
    width: calc(100% - (var(--mobile-page-gutter) * 2)) !important;
  }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    left: var(--mobile-page-gutter) !important;
    width: calc(100vw - (var(--mobile-page-gutter) * 2)) !important;
    padding: 0 !important;
  }

  .site-header .wordmark,
  .site-header.is-scrolled .wordmark { padding: 0 !important; }

  .site-header.is-scrolled {
    background: rgba(18, 22, 25, .68) !important;
    background-image: none !important;
    border: 1px solid rgba(198, 235, 247, .18) !important;
    box-shadow: 0 10px 28px rgba(9, 18, 22, .18) !important;
    backdrop-filter: blur(15px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(125%) !important;
  }

  .site-header.is-scrolled .wordmark { color: #fff !important; }
}

@media (max-width: 390px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled,
  .main-nav.open {
    left: var(--mobile-page-gutter) !important;
    width: calc(100vw - (var(--mobile-page-gutter) * 2)) !important;
  }
}

/* Keep the mobile wordmark clear of the rounded navbar edge on every page. */
@media (max-width: 720px) {
  .site-header .wordmark,
  .site-header.is-scrolled .wordmark {
    margin-left: 18px !important;
  }
}
/* Footer social links */
.footer .social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.footer .social a,
.footer .social .social-linkedin {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #3ba7e3;
  font-size: 20px;
  line-height: 1;
}

.footer .social a {
  transition: color 180ms ease, transform 180ms ease;
}

.footer .social a:hover {
  color: #8bd6ff;
  transform: translateY(-2px);
}

.footer .social .social-linkedin {
  opacity: .78;
  cursor: default;
}

/* Keep footer social icons neutral until the visitor interacts with them. */
.footer .social a,
.footer .social .social-linkedin,
.surveillance-page .footer .social a,
.order-page .footer .social a {
  color: #ffffff;
}

.footer .social a:hover,
.footer .social a:focus-visible,
.surveillance-page .footer .social a:hover,
.surveillance-page .footer .social a:focus-visible,
.order-page .footer .social a:hover,
.order-page .footer .social a:focus-visible {
  color: #3BA7E3;
}

/* Align the navbar's visible content with the existing page content grid. */
@media (min-width: 721px) {
  .site-header {
    padding-inline: 24px !important;
  }

  .site-header .wordmark {
    padding-left: 0 !important;
  }

  /* Offset the navigation's trailing flex space so the visible LV control
     has the same optical inset as the NEXTAGE IT wordmark on the left. */
  .site-header .main-nav > .language {
    margin-right: -24px !important;
  }
}

/* Keep the existing centred drawer inside the viewport on small phones.
   Earlier gutter rules override its left edge without resetting the transform. */
@media (max-width: 1380px) {
  .main-nav.open { left: 50% !important; transform: translateX(-50%) !important; }
}

/* Dark responsive pages need a light brand mark before the header reaches
   its scrolled glass state. The shared compact-header rule above uses a dark
   wordmark by default for light pages, so keep the exception deliberately
   limited to the dark order and all-services screens. */
@media (max-width: 1380px) {
  body.order-page .site-header .wordmark,
  body.order-page .site-header.is-scrolled .wordmark,
  body.catalogue-page:not(.client-page):not(.privacy-page):not(.password-reset-page) .site-header .wordmark,
  body.catalogue-page:not(.client-page):not(.privacy-page):not(.password-reset-page) .site-header.is-scrolled .wordmark {
    color: #fff !important;
  }
}

/* Client views keep the same dark wordmark as the other light responsive
   pages; they also carry .catalogue-page for the shared navigation layout. */
@media (max-width: 1380px) {
  body.client-page .site-header .wordmark,
  body.client-page .site-header.is-scrolled .wordmark {
    color: #131517 !important;
  }
}
/* Shared audience chrome. Page styles must not redefine these dimensions. */
.footer{color:#f5f7f6;background-color:#123d50}
.footer .footer-grid>div>a:hover,.footer .footer-grid>div>a:focus-visible{color:#3BA7E3;transform:translateX(3px)}
.main-nav>.language{display:flex;align-items:center;flex-shrink:0;height:100%;margin-left:auto}
.main-nav>.language select{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;min-height:44px;padding:0 3px;width:55px}
.main-nav>.language option{background:#17242c;color:#fff}
.main-nav>.language select:focus-visible{outline:2px solid #82d5f7;outline-offset:3px}
.site-header .main-nav>.language{margin-right:0!important}
/* Highlight the current section without changing link widths. */
.site-header .main-nav .scroll-active{font-weight:400}
@media(max-width:1380px){.main-nav.open>.language{width:100%;margin:0;padding:0 14px;min-height:44px;font-size:15px}}
@media(min-width:721px) and (max-width:1024px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}.footer-grid>div{min-width:0}.footer-grid>.footer-brand{grid-column:1/-1}}