:root{
  --paveiktais-media-h: 460px;

  --page-pad: 32px; /* desktop side padding */
  --anchor-nav-gap: 32px; /* distance from nav bottom to section kicker */
  --services-nav-gap: 32px; /* distance from nav bottom to services content */
  
  /* Typography scale (responsive): keep consistent across sections */
  --fs-h2: 48px;      /* Section title (H2) desktop */
  --lh-h2: 1.02;
  /* letter-spacing uses em coefficient (scales with font-size) */
  --ls-h2: -0.04em;

  /* Font tokens */
  --ff-body: "Inter", sans-serif;
  --fw-body: 400;
  --ff-display: "Oswald", sans-serif;
  --fw-display: 400;
  --fw-display-strong: 600;

  --fs-h3: 28px;      /* Heading 3 desktop */
  --lh-h3: 1.12;
  --ls-h3: -0.018em;

  --fs-h3s: 24px;     /* Compact H3 (items) desktop */
  --lh-h3s: 1.18;
  --ls-h3s: -0.02em;

  --fs-note: 12px;    /* Technical note */
  --lh-note: 1.35;
--nav-blur-h: 122px; /* blur height under nav */

  --c-bg: 4 17 44; /* #04112C */
  --op-nav: .80;

  --glow-size: 390px;
  --glow-blur: 600px;
  --glow-x: 1050px;
  --glow-y: -172px;
  --glow-color: 118 152 255; /* #7698FF */
  --glow-alpha: .80;

  --c-bg-top: 4 17 44;        /* #04112C */
  --c-bg-bot: 4 17 44;        /* #04112C */
  --c-text: 255 255 255;
  --c-accent: 79 143 219;      /* #4f8fdb */
  --c-border: 255 255 255;

  /* NAV background (exact spec): #04112C @ 80% */
  --c-nav-fill: var(--c-bg); /* uses global bg */
  --op-nav-fill: .8;

  --op-text: .92;
  --op-muted: .65;
  --op-link: .84;
  --op-border: .18;
  --op-border-strong: .20;     /* softer (was .24) to avoid "white bg" feel */

  /* Progressive blur: spatial steps */
  --nav-blur-start: 34px;
  --nav-blur-mid1: 22px;
  --nav-blur-mid2: 12px;
}

/* Typography bindings (global) */
.services__title,
.whyus__title,
.about__title,
.contact__title,
.paveiktais__title{
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--ff-body);
  color: rgb(var(--c-text) / var(--op-text));
  background: linear-gradient(180deg,
    rgb(var(--c-bg-top) / 1),
    rgb(var(--c-bg-bot) / 1)
  );
}

.wrap{
  width: 100%;
  max-width: 1366px; /* keep content readable on large screens */
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Responsive page padding */
@media (max-width: 1024px){
  :root{ --page-pad: 24px; --fs-h2: 44px; --fs-h3: 26px; --fs-h3s: 22px; --paveiktais-media-h: 380px; }
}
@media (max-width: 780px){
  /* Mobile: no separator line in brand */
  .brand__sep{ display:none; }

  :root{ --page-pad: 16px; --fs-h2: 36px; --fs-h3: 22px; --fs-h3s: 20px; }
.services__lead,
  .whyus__lead,
  .paveiktais__lead,
  .about__lead,
  .contact__lead{
    font-size: 16px;
    line-height: 26px;
  }

  /* Reduce vertical spacing for single-column mobile layout */
  .services{ padding: 24px 0 40px; }
  .whyus{ padding: 44px 0 48px; }
  .paveiktais,
  .section--paveiktais{ padding: 40px 0 48px; }
  .about, .contact{ padding: 44px 0 48px; }

  .whyus__head{ margin-bottom: 20px; text-align:center; }
  .about__head, .contact__head{ margin-bottom: 20px; text-align:center; }

  /* Services spacing handled via .services__right gap */
  .services__right{ gap: 16px; }
  /* Hero should use available mobile viewport height */
  .hero__media-wrap{ height: calc(100svh - 140px); }

}

@media (max-width: 480px){
  :root{ --page-pad: 16px; }
}

/* ===== Topbar: sticky + background glow (NO blur) ===== */
.topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding: 32px 0 0;
  background: transparent;
}

/* Header glow/gradient layer (NO blur, NO clipping) */


/* Header glow/gradient layer (NO blur). Height matches blur zone and fades out (no "rect band"). */


/* This creates the dark/top gradient + right glow WITHOUT any blur */


/* ===== Header glow (Figma) =====
   390×390, fill #7698FF @ 80%, layer blur 600, positioned (x=1050, y=-172)
   Wrapper is position:fixed covering viewport with overflow:hidden —
   clips Firefox blur bleed without affecting Chrome/Safari appearance.
*/
.topbar-glow-clip{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:49;
}
.topbar-glow{
  position:absolute;
  width: var(--glow-size);
  height: var(--glow-size);
  left: var(--glow-x);
  top: var(--glow-y);
  background: rgb(var(--glow-color) / var(--glow-alpha));
  filter: blur(var(--glow-blur));
  pointer-events:none;
}

.topbar__inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Mobile header: keep the same global wrap padding tokens (Desktop 32 / Tablet 24 / Mobile 16)
   so the nav aligns with the rest of the page content. */
@media (max-width: 780px){
  .navbox{ width: 100%; flex: 1; }
  .navbox__content{ width: 100%; justify-content: space-between; }
}

/* ===== Navbox ===== */
.navbox{ position:relative; display:block; }
.navbox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(var(--c-border) / var(--op-border-strong));
  clip-path: polygon(14px 0%,100% 0%,100% calc(100% - 14px),calc(100% - 14px) 100%,0% 100%,0% 14px);
}
.navbox::after{
  content:"";
  position:absolute;
  inset:1px;
  background: rgb(var(--c-bg) / var(--op-nav));
  clip-path: polygon(13px 0%,100% 0%,100% calc(100% - 13px),calc(100% - 13px) 100%,0% 100%,0% 13px);
}
.navbox__content{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap: var(--nav-gap);
  padding: 14px 32px 14px 18px;
  transition: gap 260ms ease;
  will-change: gap;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  column-gap: var(--brand-gap);
  transition: column-gap 260ms ease;
  text-decoration:none;
  color:inherit;
}
.brand__mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background: transparent;
  border:none;
}
.brand__mark img{ width:40px; height:40px; display:block; }
.brand__word img{ height:18px; width:auto; display:block; }
.brand__sep{
  width:1px;
  height:26px;
  background: rgb(var(--c-border) / .20);
  display:block;
  transition: width 260ms ease, margin 260ms ease, opacity 200ms ease;
  will-change: width, margin, opacity;
}


/* Links */
.nav{ display:flex; align-items:center; gap:30px;
  
  margin-left: 0;
  transition: none;
  will-change: margin-left;
}
.nav__link{
  text-decoration:none;
  color: rgb(var(--c-text) / var(--op-link));
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 0;
  white-space:nowrap;
}
.nav__link:hover{ color: rgb(var(--c-text) / .96); }


/* ===== Progressive blur (Figma) =====
   Frame: 1440×122, fill: #3E3E3E @ 1%
   Background blur: Progressive, X 50%→50%, Y 0%→100%, Start 34 → End 0
   Implementation: 3 stacked backdrop-filter layers + masks (no visible tint on solid bg).
*/
.nav-progressive-blur{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--nav-blur-h);
  pointer-events:none;
  z-index:1;
  background: rgb(62 62 62 / 0.01); /* #3E3E3E @ 1% */
}

.nav-progressive-blur::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.88) 30%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.88) 30%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,0) 100%
  );
}

.nav-progressive-blur::after{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.12) 85%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.12) 85%,
    rgba(0,0,0,0) 100%
  );
}

.nav-progressive-blur > i{
  position:absolute;
  inset:0;
  display:block;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,.40) 0%,
    rgba(0,0,0,.18) 70%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,.40) 0%,
    rgba(0,0,0,.18) 70%,
    rgba(0,0,0,0) 100%
  );
}


/* ===== Hero ===== */

/* ===== Hero bottom gradient overlay (Figma spec) ===== */
.hero__media-wrap{
  position: relative;
  height: min(768px, calc(100vh - 160px));
  border: 1px solid rgb(var(--c-border) / .10);
  overflow: hidden;
  background: #000;
}
.hero__overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:360px;
  pointer-events:none;
  background: linear-gradient(
    0deg,
    #04112C 0%,
    rgba(6, 19, 48, 0.43) 50%,
    rgba(10, 10, 11, 0.00) 100%
  );
  z-index: 2; /* above image overlays, below text */
}
/* Ensure hero content stays above overlays */
.hero__content{ z-index: 3; }

.hero{ padding: var(--page-pad) 0; }
.hero__frame{ position:relative; }
.hero__img, .hero__img img{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero__img img{ object-fit: cover; display:block; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:block;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__video.is-ready{ opacity: 1; }
.hero__media-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .10) 45%, rgb(0 0 0 / .62) 100%);
  pointer-events:none;
  z-index: 1; /* above image, below bottom gradient overlay */
}
.hero__content{
  position:absolute;
  inset: 0;
  /* Text is part of the hero media block, so padding is measured from this container,
     using the same 32/24/16 tokens as the rest of the page. */
  padding: 0 var(--page-pad) var(--page-pad) var(--page-pad);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  max-width: 980px;
  z-index: 2;
}
.hero__title{
  margin:0 0 12px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(var(--fs-h2, 36px), 6vw, 68px);
  line-height: 1.02;
  color: rgb(var(--c-text) / .96);
}
.hero__lead{
  margin:0;
  max-width: 940px;
  color: rgb(var(--c-text) / var(--op-muted));
  font-size: 16px;
  line-height: 1.6;
}


@media (max-width: 980px){
  /* Keep the same wrap system; padding is controlled via --page-pad tokens */
  .nav{ gap:18px; }
}
@media (max-width: 760px){
  .nav{ display:none; }
}






main{ padding-top: 104px; }


/* ===== Header compact animation (wordmark slides out, nav shifts left) ===== */
.brand__word{
  display:inline-block;
  overflow:hidden;
  max-width: 220px;
  opacity: 1;
  transform: translateX(0);
  transition: max-width 260ms ease, opacity 200ms ease, transform 260ms ease;
  will-change: max-width, opacity, transform;
}

.brand__sep{
  transition: width 260ms ease, margin 260ms ease, opacity 200ms ease;
  will-change: width, margin, opacity;
}

.topbar--compact .brand__word{
  max-width: 0px;
  opacity: 0;
  transform: translateX(-14px);
}

.topbar--compact .brand__sep{
  width: 0px;
  margin: 0;
  opacity: 0;
}






/* Make the gap from symbol to first link exactly 32px */
/* ===== Clean compact header behavior =====
   Goal: symbol stays fixed; wordmark slides out; nav shifts left so
   distance from symbol to first link = 32px (no hacks on link spacing).
*/
:root{
  --compact-gap: 32px;
  --nav-gap: 28px;
  --brand-gap: 14px;
}

.topbar--compact{
  --nav-gap: var(--compact-gap);
  --brand-gap: 0px;
}

/* Compact state: keep fixed gap between symbol and first link */

/* Wordmark collapses to zero (no reserved space) */
.topbar--compact .brand__word{
  max-width: 0;
  opacity: 0;
  transform: translateX(-14px);
}

/* Shift nav left to sit 32px from symbol */

/* CTA: inside stroke (white 16%) with chamfer corners (matches nav geometry) */
.cta{
  position: relative;
  display:inline-grid;
  place-items:center;
  height: 52px;
  padding: 0 34px;

  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;

  color: rgb(var(--c-text) / 1);
  text-decoration:none;

  /* Outer shape */
  clip-path: polygon(
    14px 0%,
    100% 0%,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0% 100%,
    0% 14px
  );
}

/* ===== Mobile menu (<= 780px) ===== */
.burger{
  display:none;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: rgba(var(--c-text), var(--op-text));
  cursor:pointer;
  padding:0;
}
.burger:focus-visible{ outline:2px solid rgba(var(--c-accent),.8); outline-offset:3px; }

/* Lucide-style icons */
.burger__svg{
  display:block;
  color: rgba(var(--c-text), .92);
}
.burger__svg--close{ display:none; }

.mobilemenu{
  /* Closed by default. We only show it when the burger is opened. */
  display:none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--mobile-nav-h, 88px);
  bottom: 0;
  width: 100%;
  background: rgb(var(--c-bg));
  z-index: 50;
  overflow: auto;
}

.mobilemenu::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  /* subtle bottom overlay (menu can end above it) */
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events: none;
}

.mobilemenu__panel{
  /* content container inside full overlay */
  max-width: 1366px;
  margin: 0 auto;
  padding: var(--page-pad) var(--page-pad) 24px;
  display: flex;
  flex-direction: column;
  /* Center menu content horizontally */
  align-items: center;
  gap: 16px;
}
.mobilemenu__links{
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items: center;
}
.mobilemenu__link{
  color: rgba(var(--c-text), var(--op-text));
  text-decoration:none;
  /* Match desktop nav link typography */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: center;
}
.mobilemenu__link:hover{ background: rgba(255,255,255,.06); }
.mobilemenu__cta{
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.mobilemenu__cta .cta{
  display:inline-flex;
  width: 100%;
  max-width: 420px;
  justify-content:center;
}

/* responsive behavior */
@media (max-width: 780px){
  .topbar__inner{ gap: 12px; }
  .nav{ display:none; }
  .cta{ display:none; }
  .contact-map__nav .cta { display:inline-flex; }
  .burger{ display:inline-flex; }
  /* Menu panel should appear only when opened */
  .topbar.is-menu-open .mobilemenu{ display:block; }
}

/* Ensure the HTML [hidden] attribute always wins */
.mobilemenu[hidden]{ display:none !important; }

/* when open */
.topbar.is-menu-open .burger__svg--menu{ display:none; }
.topbar.is-menu-open .burger__svg--close{ display:block; }

/* Fill */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(var(--c-accent) / 1);
  z-index:-2;
}

/* Inside stroke */
.cta::after{
  content:"";
  position:absolute;
  inset:1px; /* creates room so border stays inside outer edge */
  box-sizing: border-box;
  border:1px solid rgba(255,255,255,0.16);
  clip-path: polygon(
    13px 0%,
    100% 0%,
    100% calc(100% - 13px),
    calc(100% - 13px) 100%,
    0% 100%,
    0% 13px
  );
  pointer-events:none;
  z-index:-1;
}



/* CTA light variant (used for Google Maps / Waze buttons) */
.cta--light{
  color: rgb(var(--c-bg));
}
.cta--light::before{
  background: #fff;
}
.cta--light::after{
  border: 1px solid rgb(var(--c-bg) / 0.14);
}

/* Map CTA layout tweaks (inherits .cta shape) */
.contact-map__actions .contact-map__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* equal width (Waze 1:1 with Google Maps) */
  width: clamp(120px, 32vw, 164px);
  padding: 0 18px;
  height: 52px; /* keep the same as the main CTA */
  white-space: nowrap;
}

.contact-map__actions .contact-map__btn .cta__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.contact-map__actions .contact-map__btn .cta__icon svg{
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

.contact-map__actions .contact-map__btn:hover{
  filter: brightness(0.98);
}

@media (max-width: 780px){
  .contact-map__actions .contact-map__btn{
    width: 100%;
  }
  .contact-map__actions-inner{
    width: 100%;
  }
}
.cta:hover{ filter: brightness(1.05); }


/* =========================
   SERVICES (Pakalpojumi)
========================= */

.services{
  position: relative;
  padding: 64px 0 120px;
}

.services__grid{
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 96px;
  align-items: start;
}

.services__left{
  position: sticky;
  top: calc(var(--nav-h, 72px) + 32px);

  max-width: 440px;
}

.services__list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(246,243,236,0.16);
}

.services__item{
  border-bottom: 1px solid rgba(246,243,236,0.16);
}

.services__btn{
  width: 100%;
  text-align: left;
  padding: 26px 0;
  background: transparent;
  border: 0;
  /* technical notes */
  color: rgba(246, 243, 236, 0.64);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 14px; /* 120% */
  letter-spacing: 0.075em;
  text-transform: uppercase;
  cursor: pointer;
}

.services__item.active .services__btn{
  color: rgba(246, 243, 236, 0.88);
}

.services__right{
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--services-right-offset, 0px);
  gap: 100px; /* max spacing between service cards on desktop */
}

.service-block{
  min-height: auto;
  display: block;
  scroll-margin-top: calc(var(--nav-h, 72px) + 64px);
}

.service-block__media{
  width: min(640px, 100%);
}

.service-block__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

@media (max-width: 1100px){
  .services{
    padding: 48px 0 96px;
  }
  .services__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .services__left{
    position: relative;
    top: 0;
  }
  .service-block{
    padding: 0;
  }
  .services__right{ gap: 24px; }
  .service-card{ margin-left: 0; max-width: 100%; }
  .services__list{ display:none; }

}


/* =========================
   SERVICES SECTION
========================= */
:root{
  --scroll-offset: 136px; /* nav footprint (104) + 32 gap */
}

#services{
  scroll-margin-top: 0;
}

.services{
  /* Slightly tighter top padding so the first service card aligns better with the header "arc" line */
  padding: 64px 0 140px;
}

.services__wrap{
  /* IMPORTANT: do NOT override .wrap side padding (controlled via --page-pad) */
}

.services__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 96px;
  align-items: start;
}

.services__left{
  position: sticky;
  /* Keep the left column locked under the fixed header footprint */
  top: var(--scroll-offset);
  align-self: start;
  padding-top: 8px;
}

.services__kicker{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.services__dot{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgb(var(--c-accent) / 0.9);
}

.services__kicker-text{
  /* technical notes */
  color: rgba(246, 243, 236, 0.64);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 14px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.services__title{
  color: rgba(246, 243, 236, 0.88);
  margin: 0 0 28px;

  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.services__lead{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px; /* 150% */
  color: rgba(246, 243, 236, 0.64);
  margin: 0 0 72px;
  max-width: 46ch;
}

.services__list{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  max-width: 740px;
}

.services__item{
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
}

.services__btn{
  width: 100%;
  text-align: left;
  padding: 26px 0;
  background: transparent;
  border: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgb(var(--c-text) / 0.55);
  cursor: pointer;
}

.services__item.active .services__btn{
  color: rgb(var(--c-text) / 0.92);
}

.services__btn:focus-visible{
  outline: 2px solid rgb(var(--c-accent) / .7);
  outline-offset: 6px;
}

.services__right{
  position: relative;
}

.service-block{
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* When jumping via service list, land correctly under the fixed nav */
  scroll-margin-top: var(--scroll-offset);
}


/* Responsive */
@media (max-width: 1100px){
  .services__grid{
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .services__left{
    position: relative;
    top: 0;
  }
  .services__lead{
    font-size: 18px;
    margin-bottom: 44px;
  }
  .service-block{
    min-height: auto;
    padding: 72px 0;
  }
}


/* Technical notes */
.t-note{
  color: rgba(246, 243, 236, 0.64);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-note);
  font-style: normal;
  font-weight: 300;
  line-height: var(--lh-note); /* 120% */
  letter-spacing: 0.075em;
  text-transform: uppercase;
}


/* Service card (image + gradient + text) */
.service-block{
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-margin-top: 0;
}

.service-card{
  margin-left: auto; /* align cards to the right in desktop two-column layout */
  position: relative;
  width: 100%;
  max-width: 820px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.10);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
  clip-path: polygon(
    14px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 14px
  );
}

.service-card > img{ /* legacy */
  display: block;
  width: 100%;
  height: auto;
}

/* Service media placeholder (keeps layout stable even if /images/services are missing) */
.service-card__media{
  display:block;
  position:relative;
  overflow:hidden;
  width:100%;
  /* Same 3/2 ratio as the real service images (1920×1280) so the
     placeholder → <img> swap doesn't change the card height. */
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(1200px 700px at 70% 10%, rgb(var(--c-accent) / 0.25), transparent 55%),
    linear-gradient(180deg, rgb(8 22 54 / 1), rgb(var(--c-bg) / 1));
}
.service-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%);
  /* 0.9s delay: on fast connections images replace the placeholder before the
     skeleton shimmer ever becomes visible — it only shows on slow loads. */
  animation:ghost-sweep 1.9s ease-in-out 0.9s infinite;
  z-index:1;
}
@keyframes ghost-sweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(220%)}
}
.service-card__media--placeholder{
  position: relative;
}
.service-card__media--placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 240px at 20% 70%, rgb(255 255 255 / 0.06), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgb(255 255 255 / 0.05), transparent 65%);
  pointer-events:none;
}

/* =========================
   FIX: Services spacing + mobile single-column
   - Desktop: max 100px between service cards
   - Mobile (<=780): 16px between cards
   - Remove 92vh min-height that created huge empty gaps
========================= */

.services__right{
  display:flex;
  flex-direction:column;
  gap: 100px; /* desktop max */
  /* 8px matches the left column top padding; --services-right-offset is the
     JS-computed shift that vertically centers the first card against the
     left column content on desktop. */
  padding-top: calc(var(--services-right-offset, 0px) + 8px);
}

.service-block{
  min-height: auto !important;
  display:block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  scroll-margin-top: var(--scroll-offset);
}

@media (max-width: 1100px){
  .services__right{ gap: 24px; }
}

@media (max-width: 780px){
  .services__right{ gap: 16px; }
  /* When services become a single column, hide the desktop list nav */
  .services__list{ display:none !important; }
}

.service-card__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #04112C 0%, rgba(6, 19, 48, 0.43) 50%, rgba(10, 10, 11, 0.00) 100%);
  pointer-events: none;
}

.service-card__content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 32px 30px;
}

.service-card__title{
  margin: 0 0 10px;
  color: rgba(246, 243, 236, 0.88);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.service-card__text{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  color: rgba(246, 243, 236, 0.64);
  max-width: 72ch;
}

@media (max-width: 1100px){
  .service-block{ min-height: auto; padding: 48px 0; }
  .service-card__content{ padding: 22px 22px 24px; }
}

@media (max-width: 780px){
  .service-card__overlay{
    background: linear-gradient(0deg, #04112C 0%, rgba(6, 19, 48, 0.65) 55%, rgba(10, 10, 11, 0.10) 100%);
  }
  .service-card__text{
    color: rgba(246, 243, 236, 0.82);
  }
}


.service-card__img,
.service-card__video{
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the box before image data arrives — without this the freshly
     inserted <img> is 0px tall, so the card collapses to text-only and then
     jumps open (visible on slow networks). 3/2 matches the real asset size
     (1920×1280), so nothing gets cropped. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}






/* =========================
   WHY US (Kāpēc izvēlēties mūs)
   Structure matches provided reference; colors use global tokens.
========================= */
#kapec-mes{ scroll-margin-top: 0; }

.whyus{
  padding: 140px 0 140px;
}

/* Do not override .wrap side padding (controlled via --page-pad) */
/* .whyus__wrap intentionally left without padding rules */

.whyus__head{
  max-width: 920px;
  margin: 0 auto 72px;
  text-align: center;
}

.whyus__title{
  margin: 0 0 18px;
  color: rgba(246, 243, 236, 0.88);

  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.whyus__lead{
  margin: 0 auto;
  text-align: center;

font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(246, 243, 236, 0.64);

  max-width: 70ch;
}

.whyus__grid{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Why-us: desktop stays as 2-col grid; compact row layout is MOBILE ONLY */
@media (max-width: 780px){
  .whyus{ padding: 64px 0 72px; }
  .whyus__head{ margin-bottom: 24px; }

  .whyus__grid{
    grid-template-columns: 1fr;
    max-width: none;
  }

  .whyus-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    min-height: 0;
    border-right: none !important;
    border-bottom: 1px solid rgb(var(--c-accent) / 0.35);
  }
  .whyus-item:last-child{ border-bottom: none; }

  .whyus-item__icon{
    margin: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}


.whyus-item{
  padding: 56px 56px 58px;
  min-height: 200px;
}

.whyus-item__icon{
  display:block;
  margin: 0 0 26px;
}

.whyus-item__title{
  margin: 0;
  color: rgb(var(--c-text) / var(--op-text));

  font-size: var(--fs-h3s);
  line-height: var(--lh-h3s);
  letter-spacing: var(--ls-h3s);
}

/* Divider lines (match cross layout) */
.whyus-item:nth-child(1),
.whyus-item:nth-child(2){
  border-bottom: 1px solid rgb(var(--c-accent) / 0.35);
}
.whyus-item:nth-child(1),
.whyus-item:nth-child(3){
  border-right: 1px solid rgb(var(--c-accent) / 0.35);
}



@media (max-width: 780px){
  /* Compact spacing when content becomes one column */
  .whyus{ padding: 72px 0 72px; }
  .whyus__head{ margin-bottom: 32px; text-align:left; }
  .whyus__lead{ font-size: 15px; line-height: 22px; text-align: left; margin: 0; }
  .whyus-item{ min-height: auto; }
}
@media (max-width: 680px){
  .whyus{ padding: 110px 0 110px; }
  .whyus__head{ text-align:left; margin-bottom: 48px; }
  .whyus__grid{ grid-template-columns: 1fr; }
  .whyus-item{
    border-right: none !important;
    border-bottom: 1px solid rgb(var(--c-accent) / 0.25);
    padding: 20px 0;
    display:flex;
    align-items:center;
    gap: 12px;
  }
  .whyus-item:last-child{ border-bottom: none; }
  .whyus-item__icon{ width: 44px; height: 44px; margin: 0; flex: 0 0 44px; }
}


/* =========================
   PAVEIKTAIS (placeholder)
========================= */
#paveiktais{ scroll-margin-top: 0; }

/* The markup uses .section--paveiktais; keep the same spacing rules */
.paveiktais,
.section--paveiktais{
  padding: 120px 0 160px;
}

/* .paveiktais__wrap intentionally left without padding rules */

.paveiktais__head{
  max-width: 760px;
  margin: 0 0 56px;
}

.paveiktais__head--center{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.paveiktais__head--center .paveiktais__lead{
  margin-left: auto;
  margin-right: auto;
}
.paveiktais__title{ text-align: center; 
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}


.paveiktais__kicker{ margin-bottom: 18px; }



.paveiktais__lead{
  margin: 0;
  
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: rgba(246, 243, 236, 0.64);

  max-width: 70ch;
}




/* =========================
   ABOUT + CONTACT SECTIONS
========================= */
.about, .contact{
  padding: 120px 0 140px;
}

.about__head, .contact__head{
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
}

.about__title, .contact__title{
  margin: 0 0 18px;
  color: rgba(246, 243, 236, 0.88);

  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.about__lead, .contact__lead{
  margin: 0 auto 32px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(246, 243, 236, 0.64);
  max-width: 72ch;
}

.about__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: start;
}




@media (max-width: 1100px){
  .about__grid{
    grid-template-columns: 1fr;
  }
  .contact__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px){
  .about, .contact{
  padding: 120px 0 140px;
}
  .about__head, .contact__head{
    text-align: left;
    margin-bottom: 40px;
  }
}



/* =========================
   CONTACT (Sazinies ar mums)
========================= */
.contact{
  padding: 88px 0 96px;
}
/* .contact__wrap intentionally left without padding rules */
.contact__head--center{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 64px;
}

.contact__lead{
  margin: 0 auto 32px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(246, 243, 236, 0.64);
  max-width: 72ch;
}

.contact-box{
  border: 0;
  padding: 0;
  background: transparent;
  clip-path: none;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
}


.contact-map{
  margin-top: 24px;
  border: 1px solid rgb(255 255 255 / 0.10);
  background: rgb(var(--c-bg) / 0.10);
  position: relative;
  overflow: hidden;}







/* Custom location pin (matches CTA accent) */
/* Map action buttons inside the map frame (Google Maps / Waze)
   Requirements:
   - White background
   - Dark-blue text + icon (uses token: --c-bg)
   - Equal width (50/50)
   - No overlay/opacity/gradient/pseudo-element layers
*/
.contact-map__actions{
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 6;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;

  padding: 0 10px;

  /* allow map interactions except on the buttons */
  pointer-events: none;
}

.contact-map__actions-inner{
  grid-column: 2;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.contact-map__actions .contact-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* equal width (Waze 1:1 with Google Maps) */
  width: clamp(132px, 22vw, 164px);

  padding: 12px 14px;

  background: #fff !important;
  color: rgb(var(--c-bg)) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;

  border: 1px solid rgb(var(--c-bg) / 0.14);
  border-radius: 12px;
}

/* Kill the old layered CTA/panel effects for these buttons */
.contact-map__actions .contact-action::before,
.contact-map__actions .contact-action::after{
  content: none !important;
  display: none !important;
}

.contact-map__actions .contact-action__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.contact-map__actions .contact-action__icon svg{
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

.contact-map__actions .contact-action:hover{
  background: #f2f6fb !important;
}



@media (max-width: 900px){
  .contact-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
}
  .contact-divider{
  width: 1px;
  height: 28px;
  background: rgb(246 243 236 / 0.16);
  justify-self: center;
}
  .contact-box{
  border: 0;
  padding: 0;
  background: transparent;
  clip-path: none;
}
  .contact-item{ justify-content: flex-start; text-align: left; }
}


/* =========================
   INTERACTION SIGNIFIERS
========================= */

a,
button,
[role="button"],
.contact-item,
.carousel__arrow,
.carousel__dot {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

.nav__cta:hover,
.contact-item:hover,
.carousel__arrow:hover {
  text-decoration: none;
}


a{ text-decoration: none; }
a:hover{ text-decoration: none; }

/* v118: About partners logos */
.about-logos{
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0; /* separators define rhythm */
}

.about-logo{
  flex: 1 1 0;
  /* allow shrinking on small screens (prevents horizontal scroll) */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  color: rgba(246, 243, 236, 1);
  opacity: 0.64;
  transition: opacity 0.3s ease;
  text-decoration: none;
  position: relative;
}

/* vertical separators (desktop/tablet row) */
.about-logo:not(:first-child)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64px;
  background: rgba(246, 243, 236, 0.18);
}

.about-logo:hover{ opacity: 1; }

.about-logo:focus-visible{
  outline: 2px solid rgb(246 243 236 / 0.5);
  outline-offset: 4px;
  border-radius: 10px;
}

.partner__img{
  width: auto;
  /* never overflow its flex cell */
  max-width: 100%;
  display: block;
  filter: none;
  transform: scale(1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* optical sizing per logo (matches provided reference) */
.about-logo--saf .partner__img{ height: 56px; }
.about-logo--hansa .partner__img{ height: 52px; }
.about-logo--letera .partner__img{ height: 33px; }
.about-logo--na .partner__img{ height: 56px; }
.about-logo--erica .partner__img{ height: 46px; }

.about-logo:hover .partner__img{
  filter: brightness(0) invert(1);
  transform: scale(1.06);
}

/* Mobile/tablet: keep the same single row (no wrap, no scroll),
   just scale the contents down so separators stay in place.
*/
@media (max-width: 900px){
  .about-logo{ padding: 12px 14px; }
  .about-logo--saf .partner__img{ height: 50px; }
  .about-logo--hansa .partner__img{ height: 46px; }
  .about-logo--letera .partner__img{ height: 23px; }
  .about-logo--na .partner__img{ height: 50px; }
  .about-logo--erica .partner__img{ height: 42px; }
}


/* Mobile: partners wrap into 3 rows (2,2,1) with fixed separators */
@media (max-width: 700px){
  .about-logos{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;        /* separators create the column rhythm */
    row-gap: 18px;
    align-items: center;
  }

  /* disable desktop separators */
  .about-logo::before{ display: none !important; }

  /* center each cell */
  .about-logo{
    padding: 10px 12px;
  }

  /* last logo centered under left column logos */
  .about-logo:nth-child(5){
    grid-column: 1;
  }
}


@media (max-width: 520px){
  .about-logo{ padding: 10px 10px; }
  .about-logo--saf .partner__img{ height: 57px; }
  .about-logo--hansa .partner__img{ height: 51px; }
  .about-logo--letera .partner__img{ height: 35px; }
  .about-logo--na .partner__img{ height: 57px; }
  .about-logo--erica .partner__img{ height: 48px; }
}

@media (max-width: 380px){
  .about-logo{ padding: 8px 8px; }
  .about-logo--saf .partner__img{ height: 51px; }
  .about-logo--hansa .partner__img{ height: 45px; }
  .about-logo--letera .partner__img{ height: 32px; }
  .about-logo--na .partner__img{ height: 51px; }
  .about-logo--erica .partner__img{ height: 45px; }
}

/* v61: Contact cards (style like nav, 14px cut corners) */
.contact-box{
  border: 0;
  padding: 0;
  background: transparent;
  clip-path: none;
}
.contact-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px){
  .contact-cards{ grid-template-columns: 1fr; gap: 14px; }
}

/* Contact actions (Google Maps / Waze) */
.contact-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.contact-action{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  text-decoration:none;
  color: rgb(var(--c-text) / var(--op-text));
  font-weight: 600;
  letter-spacing: 0.02em;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  z-index: 1;
}
.contact-action::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(var(--c-border) / var(--op-border-strong));
  clip-path: inherit;
  z-index: 0;
}
.contact-action::after{
  content:"";
  position:absolute;
  inset:1px;
  background: rgb(var(--c-bg) / var(--op-nav));
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  z-index: 0;
}
.contact-action{ isolation: isolate; }
.contact-action:hover::after{ background: rgb(var(--c-bg) / 0.88); }
.contact-action:active{ transform: translateY(1px); }
.contact-card{
  position: relative;
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 18px 20px;
  border: 0; /* border is drawn via ::before to avoid clip-path border dropouts on mobile */
  background: transparent;
  color: rgba(246, 243, 236, 0.88);
  text-decoration:none;
  cursor:pointer;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .2s ease;
  outline: none;
}
.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  /* Border like nav */
  background: rgb(var(--c-border) / var(--op-border-strong));
  clip-path: inherit;
  pointer-events:none;
}
.contact-card::after{
  content:"";
  position:absolute;
  inset:1px;
  /* Same fill as nav */
  background: rgb(var(--c-bg) / var(--op-nav));
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  pointer-events:none;
  transition: background .2s ease;
}
.contact-card > *{ position: relative; z-index: 1; }

.contact-card:hover::after{
  background: rgb(var(--c-bg) / 0.88);
}
.contact-card:hover::before{ background: rgb(var(--c-border) / 0.22); }
.contact-card:active{ transform: translateY(1px); }

.contact-card:focus-visible::before{
  background: rgb(var(--c-accent) / 0.55);
}
.contact-card__badge{
  position: relative;
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 54px;
  color: rgb(var(--c-accent) / 1);
  background: transparent;
  border: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.contact-card__badge::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgb(var(--c-accent) / 0.26);
  clip-path: inherit;
  pointer-events:none;
}
.contact-card__badge::after{
  content:"";
  position:absolute;
  inset:1px;
  background: rgb(var(--c-accent) / 0.22);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  pointer-events:none;
}
.contact-card__badge svg{ position: relative; z-index: 1; }
.contact-card__badge svg{ width: 22px; height: 22px; }
.contact-card__text{ display:flex; flex-direction:column; gap: 6px; min-width:0; }
.contact-card__label{
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  font-weight: 300;
  line-height: 12px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.64);
}
.contact-card__value{
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(246, 243, 236, 0.88);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* v65: full-screen sections (modern A option) */
#kapec-mes,
#par-mums,
#paveiktais,
#sazinaties,
#contact,
.about,
.contact{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* v67: contact section should be tighter (no forced full-screen centering) */
#sazinaties,
.contact{
  min-height: auto;
  justify-content: flex-start;
}

#kapec-mes .wrap,
#par-mums .wrap,
#paveiktais .wrap,
#sazinaties .wrap,
#contact .wrap{
  width: 100%;
}

/* Ensure anchor scroll lands nicely under fixed nav (72px) + 32px spacing */
#kapec-mes,
#par-mums,
#paveiktais,
#sazinaties,
#contact{
  scroll-margin-top: 104px;
}


/* PAVEIKTAIS CAROUSEL: center slide with side peeks */
.paveiktais-carousel{
  position: relative;
  margin-top: 56px;
  --paveiktais-h: 520px;
}
.paveiktais-carousel__viewport{
  position: relative;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.paveiktais-carousel__track{
  display: flex;
  gap: 28px;
  will-change: transform;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1); /* Apple-ish */
}
.paveiktais-carousel__track.is-no-anim{
  transition: none !important;
}
.paveiktais-carousel__slide{
  flex: 0 0 70%;
  opacity: 0.75;
  transform: scale(0.98);
  transition: opacity 450ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.paveiktais-carousel__slide.is-active{
  opacity: 1;
  transform: scale(1);
}
.paveiktais-carousel__media{
  position: relative;
  overflow: hidden;
  background: rgb(var(--c-bg) / 0.06);
  border: 1px solid rgb(255 255 255 / 0.10);
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.22);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  /* Responsive height: scales down on mobile instead of staying fixed */
  height: clamp(220px, 60vw, var(--paveiktais-media-h));
}

/* Media fills the clipped frame */
.paveiktais-carousel__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------------------------------
   PAVEIKTAIS carousel layout vars
   [ side ] [ ACTIVE ] [ side ]
   HUD width = ACTIVE and centered.
---------------------------------- */
.paveiktais-carousel{
  --paveiktais-peek: 10%;     /* side images visibility */
  --paveiktais-slide: 70%;    /* active slide width (of inner viewport) */
}

/* Side peek padding: allow partial slides visible */
.paveiktais-carousel__viewport{
  padding: 0 var(--paveiktais-peek);
}

/* Each slide takes a fixed basis so center slide is always the same width */
.paveiktais-carousel__slide{
  flex: 0 0 var(--paveiktais-slide);
}

/* HUD wrapper shares the same inner width as the viewport (same padding) */
.paveiktais-carousel__hud-wrap{
  padding: 0 var(--paveiktais-peek);
  margin-top: 14px;
  position: relative;
  z-index: 6;
}

/* HUD row: EXACTLY the same width as the active slide and horizontally centered */
.paveiktais-carousel__hud{
  width: var(--paveiktais-slide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.paveiktais-carousel__hud .paveiktais-carousel__dots,
.paveiktais-carousel__hud .paveiktais-carousel__arrows{
  pointer-events: auto;
}
.paveiktais-carousel__arrows{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.paveiktais-carousel__btn{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 243, 236, 0.88);
  background: rgb(var(--c-bg) / 0.35);
  border: 1px solid rgb(255 255 255 / 0.12);
  cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); /* left cut */
}
.paveiktais-carousel__btn--next{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); /* right cut */
}
.paveiktais-carousel__btn:hover{
  background: rgb(var(--c-bg) / 0.48);
  border-color: rgb(255 255 255 / 0.18);
}
.paveiktais-carousel__dots{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.paveiktais-carousel__dot{
  width: 10px;
  height: 10px;
  min-width: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(246, 243, 236, 0.40);
  cursor: pointer;
  transition: width 350ms ease, background 350ms ease, opacity 350ms ease;
}
.paveiktais-carousel__dot.is-active{
  width: 36px;
  background: rgba(246, 243, 236, 0.80);
}
@media (max-width: 1100px){
  .paveiktais-carousel{ --paveiktais-peek: 6%; --paveiktais-slide: 82%; }
  .paveiktais-carousel{ --paveiktais-h: 440px; }
}
@media (max-width: 700px){
  .paveiktais-carousel{ --paveiktais-peek: 4%; --paveiktais-slide: 92%; }
  .paveiktais-carousel{ --paveiktais-h: 320px; }
  .paveiktais-carousel__dots{ gap: 6px; }
  .paveiktais-carousel__dot{ width: 8px; height: 8px; }
  .paveiktais-carousel__dot.is-active{ width: 28px; }
}

/* v66: do NOT vertically center paveiktais (keeps carousel + typography intact) */
#paveiktais{
  min-height: auto;
  display: block;
}


/* =========================
   FOOTER
========================= */
.footer{
  /* constrained to global content wrap */
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);

  background: rgb(var(--c-bg) / 1);
  color: rgb(var(--c-text) / var(--op-text));
  border-top: 1px solid rgb(var(--c-border) / var(--op-border));
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  position: relative;
  overflow: hidden;
}
.footer__wrap{
  /* side padding comes from .wrap via --page-pad */
  padding: 28px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.footer__copy{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--c-text) / var(--op-muted));
}
.footer__social{
  width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgb(var(--c-text) / var(--op-text));
  text-decoration:none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}
.footer__social:hover{ background: rgb(var(--c-border) / 0.08); transform: translateY(-1px); }
.footer__social:active{ transform: translateY(0); }
@media (max-width: 520px){
  .footer__wrap{ padding: 22px 0; }
  .footer__social{ width: 40px; height: 40px; }
}


/* v67: compact contact cards on mobile */
@media (max-width: 520px){
  .contact{ padding: 56px 0 56px; }
  .contact__head--center{ margin: 0 auto 28px; }
  
  .contact__lead{ margin-bottom: 18px; }

  .contact-cards{ gap: 12px; }
  .contact-card{ padding: 14px 16px; gap: 12px; }
  .contact-card__badge{ width: 46px; height: 46px; flex: 0 0 46px; }
  .contact-card__badge svg{ width: 20px; height: 20px; }
  .contact-card__text{ gap: 4px; }
  .contact-card__value{ font-size: 15px; line-height: 22px; white-space: normal; }
  .contact-map{ margin-top: 14px; }
  .contact-map__iframe{ height: 300px; }
  

}

.contact-map__actions{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  gap:0;
  width:100%;
  justify-content:stretch;
  z-index:3;
  padding:0;
}

/* Map action buttons: white background, dark-blue text/icon, 50/50 width, inside map frame */
.contact-map__actions .contact-action{
  flex: 1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 16px;
  background: rgb(255 255 255 / 0.96);
  color: rgb(var(--c-bg));
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align:center;

  /* Keep the angular shape but avoid the previous layered pseudo backgrounds */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border-top: 1px solid rgb(var(--c-bg) / 0.14);
}

.contact-map__actions .contact-action::before,
.contact-map__actions .contact-action::after{
  display:none !important;
}

.contact-map__actions .contact-action + .contact-action{
  border-left: 1px solid rgb(var(--c-bg) / 0.14);
}

.contact-map__actions .contact-action__icon{
  display:inline-flex;
  width:18px;
  height:18px;
}

@media (max-width: 780px){
  .contact-map__actions .contact-action{
    padding: 12px 14px;
    font-weight: 600;
  }
}



.footer .wrap.footer__wrap{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}


/* v102: hide brand separator on mobile */
@media (max-width: 780px){
  .brand__sep{ display:none !important; }
}

/* =========================
   MOBILE: single-column alignment + tighter section spacing
   (Desktop/Tablet remain unchanged)
========================= */
@media (max-width: 780px){
  /* When content stacks into one column, align copy to the left */
  .services__kicker,
  .services__title,
  .services__lead,
  .whyus__head,
  .paveiktais__head,
  .about__head,
  .contact__head,
  .contact__head--center,
  .paveiktais__head--center{
    text-align: left;
  }

  /* Reduce vertical spacing between sections (~50% of desktop) */
  .services{ padding: 32px 0 60px; }
  .whyus{ padding: 70px 0 70px; }
  .about{ padding: 60px 0 70px; }
  .contact{ padding: 60px 0 70px; }

  /* Slightly tighter section heads (excluding Paveiktais, which has carousel/HUD rhythm) */
  .whyus__head,
  .about__head,
  .contact__head{
    margin-bottom: 28px;
  }
}



/* Map action buttons (Google Maps / Waze) */
.contact-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  color: rgb(var(--c-bg));
  font-weight:600;
}
.contact-action__icon{ width:18px; height:18px; display:inline-flex; }
.contact-action__icon svg{ width:18px; height:18px; display:block; }
.contact-action:hover{ background: rgb(255 255 255 / 1); }


@media (max-width: 780px){
  .contact-map__actions{
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .contact-map__actions-inner{
    grid-column: 1;
  }
}

/* v134: Map buttons subtle hover (token-based) */
.contact-map__btn {
  transition: background 0.25s ease, transform 0.2s ease;
}

.contact-map__btn:hover {
  background: rgba(var(--c-bg), 0.06);
  transform: translateY(-1px);
}

.contact-map__btn:active {
  transform: translateY(0);
}



/* v136 – Proper overlay hover for map buttons */
.contact-map__btn::before {
  transition: background 0.25s ease;
}

.contact-map__btn:hover::before {
  background: rgb(var(--c-bg) / 0.12);
}


/* v137 – Map buttons: true overlay tint over white (does not replace base white) */
.contact-map__btn{
  position: relative;
  overflow: hidden; /* keep overlay inside button shape */
}

.contact-map__btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--c-bg));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* keep content above overlay */
.contact-map__btn > *{
  position: relative;
  z-index: 1;
}

.contact-map__btn:hover::after{
  opacity: 0.12;
}


/* v138 – Static Maps embed (replaces iframe) */






/* v139 – Map media wrapper: show iframe until Static Maps key is set */




.contact-map__iframe{
  border: 0;
  height: 420px;
}

@media (max-width: 780px){
  .contact-map__iframe{ height: 320px; }
}

/* ===== Language switch =====
   One visual component used in both Desktop header and Mobile menu.
   Desktop: to the LEFT of CTA, same row.
   Mobile: under CTA inside opened mobile menu.

   NOTE (v184): we intentionally use a slightly lighter pill + stronger border
   so the component is clearly visible on the dark header background.
*/
.topbar-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap !important;
  align-self:center;
}
@media (max-width: 780px){
  .topbar-actions{ display:none !important; }
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background: rgb(0 0 0 / 0.28); /* visible on header */
  border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
  margin:0;
}

/* Shield the buttons from global header link styles */
.lang-switch__btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  overflow:visible;
  text-decoration:none;
  background: transparent;
  padding:0 !important;
  border:0;
  line-height:0;
  transition: transform 140ms ease, filter 140ms ease, background 140ms ease, opacity 140ms ease;
}
.lang-switch__btn:hover{ filter: brightness(1.06); transform: translateY(-0.5px); }
/* Inactive language is simply dimmed; the active one is full-strength. */
.lang-switch__btn{ opacity: 0.3; }
.lang-switch__btn:hover{ opacity: 0.7; }
.lang-switch__btn.is-active{ opacity: 1; background: rgb(255 255 255 / 0.10); }

.lang-switch__flag{
  width:22px;
  height:22px;
  border-radius:999px;
  display:block;
}

/* Show the correct instance per breakpoint */
.lang-switch--desktop{ display:flex; }
.lang-switch--mobile{ display:none; }
@media (max-width: 780px){
  .lang-switch--desktop{ display:none; }
  .mobilemenu__panel .lang-switch--mobile{
    display:flex;
    justify-content:center;
    margin-top: 14px;
  }
}


/* =========================
   DESKTOP TOOLTIP (v186)
========================= */

@media (min-width: 781px) {

  .lang-switch__btn {
    position: relative;
  }

  .lang-switch__btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);

    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 12px;
    line-height: 1;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }

  .lang-switch__btn:hover::after,
  .lang-switch__btn:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


/* =========================
   MAP SIMPLIFICATION (v188)
   - Rectangular map (sharp corners)
   - No overlay tint
   - No iframe color filter
   Scoped only to the map block.
========================= */

.contact-map,
.contact-map__frame,




.contact-map__iframe {
  filter: none !important;
}


/* =========================
   MAP BUTTONS BELOW FRAME (v189)
   - Keep buttons outside the map rectangle
   - Strip extra map wrappers by using only iframe
========================= */

.contact-map {
  border-radius: 0 !important;
  clip-path: none !important;
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* Map nav buttons — overlaid top-left on the map */
.contact-map__static {
  pointer-events: auto;
}

.contact-map__nav {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.contact-map__nav .contact-map__btn {
  pointer-events: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  gap: 8px;
  padding-left: 20px;
  padding-right: 20px;
}
.contact-map__btn-icon {
  flex-shrink: 0;
  display: block;
}

@media (max-width: 780px) {
  .contact-map__nav {
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
  }
  .contact-map__nav .contact-map__btn {
    min-width: 120px;
  }
}

@media (max-width: 520px) {
  .contact-map__nav {
    top: 16px;
  }
}


/* =========================
   CLEAN SINGLE MAP (v190)
========================= */

.contact-map {
  border-radius: 0;
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

.contact-map__actions--below {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

@media (max-width: 520px) {
  .contact-map__actions--below {
    flex-direction: column;
  }
  .contact-map__btn {
    width: 100%;
    text-align: center;
  }
}


/* =========================
   MAP ACTION LINKS (v192)
   Ensure Google Maps / Waze buttons are clickable and below the map.
========================= */

.contact-map__actions--below,
.contact-map__actions--below a {
  pointer-events: auto !important;
}


/* =========================
   MAP BUTTON HOVER OVERLAY (v193)
   Dark blue 20% overlay instead of color swap
========================= */

.contact-map__btn {
  position: relative;
  overflow: hidden;
}

.contact-map__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 32, 70, 0.20); /* dark blue 20% */
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.contact-map__btn:hover::after {
  opacity: 1;
}


/* =========================
   MAP BUTTON HOVER OVERLAY (v194)
   Keep base white; on hover add a 20% dark-blue overlay layer
   WITHOUT replacing CTA pseudo-elements.
========================= */

/* Keep the original CTA structure:
   .cta::before = fill
   .cta::after  = inside stroke
   We add the overlay by layering backgrounds on ::before on hover.
*/

.contact-map__btn.cta--light:hover::before {
  background:
    linear-gradient(rgba(10, 32, 70, 0.20), rgba(10, 32, 70, 0.20)),
    #ffffff;
}

/* Prevent extra brightness filter from fighting the overlay */
.contact-map__actions .contact-map__btn:hover{
  filter: none;
}


/* =========================
   STATIC MAP + CUSTOM PIN (v196)
========================= */

.contact-map__static{
  position: relative;
  display: block;
}

.contact-map__img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
}

/* Custom accent pin centered */

/* =========================
   LANDSCAPE MOBILE FIX
   iPhone landscape: >780px wide but very short.
   Compact the nav so it doesn't overflow.
========================= */
@media (max-height: 500px) and (orientation: landscape) {
  .nav { gap: 16px; }
  .nav .nav__link { font-size: 13px; }
  .topbar__inner { gap: 12px; }
  .navbox__content { padding: 10px 20px 10px 14px; }
  .topbar-actions { gap: 10px; }
  /* Reduce hero height in landscape */
  .hero__media-wrap { height: 100svh; }
}

/* Prevent navbox overflowing viewport on any narrow landscape */
.navbox { min-width: 0; overflow: visible; }
.nav { flex-wrap: nowrap; overflow: hidden; }




/* =========================
   SECTION REVEAL (scroll-in)
   Sections below hero start invisible and fade in when they enter the viewport.
   JS adds .sr class via IntersectionObserver, then adds .sr--on to trigger reveal.
========================= */
/* Hide-before-reveal is applied ONLY when JS confirms it can reveal again
   (html.js is set synchronously in <head>). Without JS — or if the reveal
   script never runs — sections stay fully visible instead of a blank page. */
html.js .sr {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
html.js .sr--on {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion: never hide content behind an animation. */
@media (prefers-reduced-motion: reduce) {
  html.js .sr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile: no reveal animation at all. On iOS Safari both IntersectionObserver
   and early scroll events proved unreliable, leaving sections invisible until
   the JS safety-net fired — on phones content simply shows immediately. */
@media (max-width: 780px) {
  html.js .sr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Service card image shimmer — already working, keep as-is */

/* =========================
   MOBILE SECTION RHYTHM (authoritative)
   Placed last on purpose: earlier section paddings are set in several
   scattered places (base rules + multiple 780/700/680 media blocks) and
   they fight each other — on phones the sections ended up with anything
   from 32px to 160px of vertical padding. This block wins the cascade
   and gives every section the same 48px top/bottom rhythm.
========================= */
@media (max-width: 780px){
  .services,
  .whyus,
  .paveiktais,
  .section--paveiktais,
  .about,
  .contact{
    padding: 48px 0;
  }

  /* Tame oversized inner gaps so sections feel consistent inside too */
  .paveiktais__head{ margin-bottom: 28px; }
  .paveiktais-carousel{ margin-top: 0; }
  .about-logos{ margin-top: 32px; }

  /* The v65 "full-screen sections" treatment (min-height:100vh + centered
     content) is a desktop design choice — on phones it inflates short
     sections like "Kāpēc izvēlēties" and "Par mums" to a whole screen of
     mostly empty space. Sections size to their content on mobile instead. */
  #kapec-mes,
  #par-mums,
  #paveiktais,
  #sazinaties,
  .about,
  .contact{
    min-height: 0;
    justify-content: flex-start;
  }
}

/* =========================
   TOUCH DEVICES (any orientation)
   The width-based mobile block above misses phones in LANDSCAPE (~926px wide),
   where the same iOS Safari problems returned. Gate the GPU- and
   reveal-critical fixes on the device class instead of viewport width.
========================= */
@media (hover: none) and (pointer: coarse){
  /* Giant blur filters stall iOS tile rasterization while scrolling —
     the page painted as solid-background "void" until the GPU caught up. */
  .topbar-glow-clip{ display: none; }
  .nav-progressive-blur{
    background: linear-gradient(180deg, rgb(4 17 44 / 0.85) 0%, rgb(4 17 44 / 0.45) 55%, rgb(4 17 44 / 0) 100%);
  }
  .nav-progressive-blur::before,
  .nav-progressive-blur::after,
  .nav-progressive-blur > i{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* No reveal animation on touch devices — IntersectionObserver and early
     scroll events proved unreliable on iOS Safari. Content is just visible. */
  html.js .sr{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Landscape phones: service cards go 2-up — full-width cards look oversized
   when the viewport is short and wide. Matches the existing landscape gate. */
@media (max-height: 500px) and (orientation: landscape){
  .services__right{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .service-card{ max-width: none; margin-left: 0; }
}

/* Landscape phones: same phone, same reading distance — keep PHONE typography.
   By width alone (~850-930px) landscape fell into the larger tablet bucket
   (44px headings, 18px leads) on a 390px-tall screen. */
@media (max-height: 500px) and (orientation: landscape){
  :root{ --fs-h2: 36px; --fs-h3: 22px; --fs-h3s: 20px; }
  .services__lead,
  .whyus__lead,
  .paveiktais__lead,
  .about__lead,
  .contact__lead{
    font-size: 16px;
    line-height: 26px;
  }
  .hero__lead{ font-size: 16px; }
}