/* ============================================
   EDELVEISS EG — HOMEPAGE (Apvienotais Dizains)
   style.css — v6.0
   ============================================ */

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  background: #FFFFFF;
  /* Light site base */
  color: #1a1a1a;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- CSS VARIABLES ---------- */
:root {
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;

  --c-bg-light: #FFFFFF;
  --c-bg-alt: #FAFAFA;
  --c-teal: #00CED1;
  --c-teal-hover: #00b5b8;

  /* Muted accent – used sparingly for key CTAs only */
  --c-accent-subtle: rgba(0, 206, 209, 0.08);

  --c-text-dark: #111111;
  --c-text-body: #444444;
  --c-text-muted: #888888;

  --c-border: rgba(0, 0, 0, 0.08);

  /* Typography Scale */
  --text-h1: clamp(2.5rem, 4vw, 4rem);
  --text-h2: clamp(2.2rem, 3.4vw, 3.4rem);
  --text-h3: clamp(1.6rem, 2.5vw, 2.2rem);

  --radius: 4px;
  /* Default for elements */
  --radius-btn: 999px;
  /* Fully rounded for buttons */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fixed (non-fluid) h2 above tablet — every h2/.section-title reads this
   through the shared --text-h2 variable, so this is the single point that
   sets it, replacing the old clamp() growth for this range. */
@media (min-width: 1025px) {
  :root {
    --text-h2: 40px;
  }
}

/* ---------- TYPOGRAPHY ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--c-text-dark);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 300;
}

/* Base size for any bare h1/h2 that isn't already using a more specific
   class like .hero__headline or .section-title (those still win — equal
   selector specificity, but a class beats a bare element). Without this,
   content typed straight into an ACF WYSIWYG field (e.g. Privātuma
   politika) rendered at the browser default size instead of the site's
   scale. */
h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
  /* Lighter, cleaner headings */
}

.section-title {
  font-size: var(--text-h2);
  margin-bottom: 2.5rem;
  /* unified spacing below headers */
}

.section-header {
  margin-bottom: 2.5rem;
}

.section-header .section-title,
.portfolio__header .section-title {
  margin-bottom: 1rem;
}

.section-header .about__body,
.portfolio__header .about__body {
  max-width: 520px;
  margin-bottom: 0;
}

/* Shared text-block width for the hero and the products section, so both stay
   in sync from one set of rules. Percentage-based and tiered by breakpoint:
   50% above tablet, 70% through tablet down to 500px, 90% on mobile M/S. */
:root {
  --text-block-max: 600px;
}

.hero__headline,
#products .section-header .section-title {
  max-width: 50%;
}

@media (max-width: 1024px) and (min-width: 500px) {
  .hero__headline,
  #products .section-header .section-title {
    max-width: 70%;
  }
}

@media (max-width: 499px) {
  .hero__headline,
  #products .section-header .section-title {
    max-width: 90%;
  }
}

.hero__sub,
#products .section-header .about__body {
  max-width: min(var(--text-block-max), 620px);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

/* ---------- BUTTONS (From vecais-piemērs) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-btn);
  transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--c-teal);
  color: #111;
}

.btn--primary:hover {
  background: var(--c-teal-hover);
  color: #111;
  box-shadow: 0 0 0 5px rgba(0, 206, 209, .12), 0 8px 28px rgba(0, 206, 209, .18);
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

.btn--outline {
  border: 1px solid rgba(0, 0, 0, .18);
  color: var(--c-text-dark);
  background: #ffffff;
}

.btn--outline:hover {
  background: var(--c-text-dark);
  border-color: var(--c-text-dark);
  color: #fff;
}

.w-full {
  width: 100%;
}

/* ---------- NAVIGATION (Match vecais-piemērs dark theme with blur) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.9rem 0;
  background: #ffffff;
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}

.nav--transparent {
  background: transparent;
}

.nav--transparent .nav__links a {
  color: #ffffff;
}

.nav--transparent .nav__links a:hover {
  color: #ffffff;
}

.nav--transparent .lang-btn {
  color: rgba(255, 255, 255, 0.55); /* non-active is slightly darker/greyish on transparent */
  position: relative;
}

.nav--transparent .lang-btn.active {
  color: #ffffff; /* active is pure white */
}

.nav--transparent .lang-btn::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}

.nav--transparent .lang-btn.active::after {
  transform: scaleX(1);
}

.nav--transparent .lang-btn:hover {
  color: var(--c-teal);
}

.nav--transparent .lang-btn:hover::after {
  background-color: var(--c-teal);
  transform: scaleX(1);
}
.nav--transparent .nav__hamburger[aria-expanded="false"] span {
  background-color: #ffffff;
}

.nav--transparent .nav__hamburger[aria-expanded="true"] span {
  background-color: var(--c-text-dark) !important;
}
.nav--scrolled {
  padding: 0.9rem 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav--scrolled .nav__links a {
  color: #111111;
}

.nav--scrolled .nav__links a:hover {
  color: #111111;
}

.nav--scrolled .lang-btn {
  color: rgba(17, 17, 17, 0.5); /* non-active is slightly lighter/greyish on white */
  position: relative;
}

.nav--scrolled .lang-btn.active {
  color: #111111; /* active is pure black */
}

.nav--scrolled .lang-btn::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #111111;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}

.nav--scrolled .lang-btn.active::after {
  transform: scaleX(1);
}

.nav--scrolled .nav__hamburger span,
.nav--scrolled .nav__hamburger[aria-expanded="false"] span,
.nav--scrolled .nav__hamburger[aria-expanded="true"] span {
  background-color: var(--c-text-dark) !important;
}


.nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.nav__logo img {
  height: 39px;
  /* 3px smaller than the original 42px */
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* slightly tighter gap */
}

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  /* slightly larger size since uppercase is removed */
  font-weight: 500;
  letter-spacing: 0.03em;
  /* tighter spacing for standard text case */
  text-transform: none;
  /* removed capslock/uppercase */
  color: #111111;
  /* white navigation button text */
  position: relative;
  transition: color 0.25s;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-teal);
  /* accent underline on hover as requested */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__links a:hover {
  color: #111111;
}

.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Header social icons (Instagram, LinkedIn, Facebook) */
.nav__socials {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Same circular button look as .social-btn in the contact blocks, sized down for the header */
.nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-text-dark);
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__social svg {
  width: 16px;
  height: 16px;
}

.nav__social:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.nav--transparent .nav__social {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.nav--transparent .nav__social:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

/* .nav--scrolled is added alongside .nav--transparent (not swapped in), so it
   needs its own override here — matches the same pattern already used for
   .nav__links a and .lang-btn just above. */
.nav--scrolled .nav__social {
  background: #ffffff;
  border-color: var(--c-border);
  color: var(--c-text-dark);
}

.nav--scrolled .nav__social:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .nav__socials {
    display: none;
  }
}

.nav__hamburger {
  display: none;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lang-divider {
  color: rgba(17, 17, 17, 0.2);
  font-size: 0.8rem;
}

.lang-btn {
  font-size: 0.78rem;
  /* slightly larger language buttons */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  /* keep capslock only for language switcher */
  color: rgba(17, 17, 17, 0.6);
  transition: color 0.2s;
  position: relative;
}

.lang-btn::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #111111;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}

.lang-btn.active::after {
  transform: scaleX(1);
}

.lang-btn.active {
  color: #111111;
}

.lang-btn:hover {
  color: #111111;
}

/* ---------- STACKING SYSTEM ---------- */
.stack-wrapper {
  position: relative;
  width: 100%;
}

.stack-panel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--c-bg-light);
}

.stack-panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

.stack-panel:has(.section--hero),
.stack-panel:has(.section--about-new) {
  background: #111111;
}

.section {
  padding: 4.5rem 0;
  /* Standardized unified padding */
}

.section--hero {
  padding: 0;
}

/* ---------- HERO ---------- */
.section--hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #111;
  padding-top: 100px;
  /* Space for header */
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 11, 11, 0.88) 0%, rgba(11, 11, 11, 0.6) 40%, rgba(11, 11, 11, 0.15) 100%);
}

@media (max-width: 1024px) {
  .hero__video-wrap::after {
    background: linear-gradient(to right, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.6) 50%, rgba(11, 11, 11, 0.2) 100%);
  }
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay & minimal zoom in */

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  /* Horizontal only — header clearance is .section--hero's single padding-top
     above; a second vertical padding here just stacked on top of it, the
     same duplicate-spacing pattern .products-hero avoids elsewhere. */
  padding: 0 3rem;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__headline {
  color: white;
  font-size: var(--text-h1);
  font-family: var(--font-display);
}

.hero__headline .accent {
  font-style: normal;
  color: #ffffff;
  /* white headline as requested */
}

.hero__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 2rem;
}

.hero__ctas {
  margin-top: 3rem;
  display: flex;
  gap: 1rem;
}

/* ---------- HERO SCROLL DOWN ---------- */
.hero__scroll {
  position: absolute;
  bottom: 3.5rem;
  /* Positioned elegantly lower at the bottom of hero */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  animation: hero-bounce 2.4s ease-in-out infinite;
}

.hero__scroll svg path {
  stroke: #ffffff !important;
  stroke-width: 2px;
  stroke-opacity: 1 !important;
}

.hero__scroll svg path:nth-child(1) {
  animation: arrow-wave 1.8s infinite 0s;
}

.hero__scroll svg path:nth-child(2) {
  animation: arrow-wave 1.8s infinite 0.3s;
}

.hero__scroll svg path:nth-child(3) {
  animation: arrow-wave 1.8s infinite 0.6s;
}

@keyframes arrow-wave {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes hero-bounce {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 12px);
  }
}

/* ---------- ABOUT STATS GRID ---------- */
.about__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 2.2rem;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.about-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 0.3rem;
  color: #ffffff;
}

.about-stat-item .stat-num,
.about-stat-item .stat-plus {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  /* slightly reduced size */
  color: #ffffff;
  line-height: 1;
  font-weight: 400;
}

.about-stat-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  /* slightly reduced size */
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  line-height: 1.3;
}


/* ---------- PRODUKTI (Accordion) ---------- */
.section--products {
  background: var(--c-bg-light);
  padding-top: 0;
  /* Stats bar sits exactly at the top of 2nd section */
}

.products-hero {
  position: relative;
  width: 100%;
  height: 380px; /* Fixed height for absolute consistency across all pages */
  padding-top: 80px; /* Offset to center content below the fixed header */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: left;
  display: flex;
  align-items: center;
}

.products-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.72); /* same dark overlay as hero video */
  z-index: 1;
}

.products-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 3rem; /* aligns horizontally with navigation grid */
}

.products-hero .section-title {
  color: #FFFFFF !important;
  font-size: var(--text-h1);
  margin-bottom: 1rem;
}

.products-hero .about__body {
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 650px;
  margin-bottom: 0;
}


.products__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 7.5rem 3rem 0 3rem;
  /* Spacing aligned to unified 7.5rem */
}

.products-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
}

.p-acc__image {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  height: 100%;
  /* forces container to match accordion height */
}

.p-acc__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: 1;
}

.p-acc__image img.active {
  opacity: 1;
  z-index: 2;
}



.p-acc__list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-bg-alt);
}

.p-acc__item {
  flex: 1;
  /* collapsed elements take 1 share of flex space */
  padding: 1.3rem 2.5rem;
  /* slightly thicker collapsed padding as requested */
  border-bottom: 1px solid var(--c-border);
  border-left: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: flex 0.4s var(--ease), padding 0.4s var(--ease), background 0.3s, border-left-color 0.3s;
  overflow: hidden;
}

.p-acc__item:last-child {
  border-bottom: none;
}

.p-acc__item:hover {
  background: #FFFFFF;
}

.p-acc__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-acc__head h3 {
  font-size: 1.25rem;
  color: var(--c-text-body);
  transition: color 0.3s;
}

.p-acc__icon {
  font-size: 1.25rem;
  color: var(--c-text-muted);
  /* neutral icon instead of teal */
  transition: transform 0.3s;
}

.p-acc__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}

.p-acc__body p {
  padding-top: 0.5rem;
  /* tighter spacing for active description */
  color: var(--c-text-muted);
  line-height: 1.5;
}

.learn-more-link {
  position: relative;
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-teal);
  text-decoration: none;
  transition: color 0.3s;
}

.learn-more-link:hover {
  color: var(--c-teal-hover);
}

.p-acc__item.active {
  flex: 2;
  background: #FFFFFF;
  border-left-color: var(--c-teal);
  /* accent teal active border as requested */
  padding: 1.5rem 2.5rem;
}

.p-acc__item.active .p-acc__head h3 {
  color: var(--c-text-dark);
}

.p-acc__item.active .p-acc__icon {
  transform: rotate(45deg);
}

.p-acc__item.active .p-acc__body {
  max-height: 200px;
  opacity: 1;
}

/* Custom Accordion sizing for solution/detail pages to fit more content without shifting layouts */
.products-accordion--details {
  height: auto !important;
}

.products-accordion--details .p-acc__item {
  flex: none !important;
  height: 100px !important;
  padding: 2.1rem 2.5rem !important;
  justify-content: flex-start !important;
  transition: height 0.4s var(--ease), padding 0.4s var(--ease), background 0.3s, border-left-color 0.3s;
}

.products-accordion--details .p-acc__item.active {
  height: 310px !important;
  padding: 1.6rem 2.5rem 1.8rem 2.5rem !important;
}

.products-accordion--details .p-acc__item.active .p-acc__body {
  max-height: 220px !important;
  opacity: 1 !important;
}

.p-acc__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem; /* bottom padding/height buffer */
  padding: 0;
  list-style: none;
}

.p-acc__bullets li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--c-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.p-acc__bullets li::before {
  content: "—"; /* elegant custom dash instead of bullet dot */
  position: absolute;
  left: 0;
  color: var(--c-teal);
  font-weight: 400;
}

.mt-20 {
  margin-top: 4rem;
}

/* Reverse layout accordion styles */
.products-accordion--reverse .p-acc__item {
  border-left: none;
  border-right: 2px solid transparent;
}

.products-accordion--reverse .p-acc__item.active {
  border-left-color: transparent;
  border-right-color: var(--c-teal);
}


/* ---------- PROJEKTI (Portfolio) ---------- */
.section--portfolio {
  background: #ffffff;
  padding: 7.5rem 0;
  /* Aligned to standard 7.5rem section padding */
}

.portfolio__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

.portfolio__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2.5rem;
}

/* ---------- COMBOBOX PORTFOLIO FILTERS ---------- */
.combo-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  width: 290px;
  margin-top: 1.5rem;
  overflow: visible;
  z-index: 10;
}

.combo-box__input-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.combo-box__input-group .input {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  color: #111111;
  outline: none;
  padding: .75rem 1rem;
  padding-inline-end: 2.5rem;
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.combo-box__input-group .input:hover {
  border-color: #111111;
  background-color: #fafafa;
}

.combo-box__input-group .input:focus {
  border-color: #111111;
  box-shadow: none;
}

.combo-box__trigger {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  height: 100%;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #777777;
  cursor: pointer;
  outline: none;
}

.combo-box__trigger:hover {
  color: #111111;
}

.combo-box__trigger[data-open="true"] .chevron-icon {
  transform: rotate(180deg);
}

.combo-box__popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + .25rem);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  border-radius: calc(var(--radius) + 2px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 0.375rem;
  animation: combo-popover-in 150ms ease both;
  
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.combo-box__popover::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@keyframes combo-popover-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.list-box {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.list-box-item {
  position: relative;
  display: flex;
  min-height: 2.25rem;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #555555;
  padding: .5rem 2rem .5rem .75rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  text-align: left;
  outline: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.list-box-item:hover,
.list-box-item.active {
  background: #f4f4f5;
  color: #111111;
}

.list-box-item.active {
  font-weight: 400;
}

.list-box-item__indicator {
  position: absolute;
  inset-inline-end: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  opacity: 0;
  transition: opacity 150ms ease;
}

.list-box-item__indicator[data-visible="true"] {
  opacity: 1;
}

/* Solution-type picker (contact forms): small selection dot before the label,
   accent-colored when that option is the active/selected one, light gray otherwise. */
.solution-combo .list-box-item {
  gap: 0.6rem;
}

.solution-combo .list-box-item::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4d4d8;
  transition: background-color 150ms ease;
}

.solution-combo .list-box-item.active::before {
  background: var(--c-teal);
}

/* Dark Theme Combobox */
.combo-box--dark .combo-box__input-group .input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.combo-box--dark .combo-box__input-group .input:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.combo-box--dark .combo-box__input-group .input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.combo-box--dark .combo-box__trigger {
  color: rgba(255, 255, 255, 0.6);
}

.combo-box--dark .combo-box__trigger:hover {
  color: #ffffff;
}

.combo-box--dark .combo-box__popover {
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Inset bottom glow opacity is bound directly to the --scroll-glow-opacity custom property (which fades dynamically on scroll) */
  box-shadow: inset 0 -24px 20px -18px rgba(54, 192, 200, calc(0.55 * var(--scroll-glow-opacity, 0))), 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s linear; /* Short linear transition to smooth out JS scroll event rendering */
}

.combo-box--dark .list-box-item {
  color: rgba(255, 255, 255, 0.7);
}

.combo-box--dark .list-box-item:hover,
.combo-box--dark .list-box-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.combo-box--dark .list-box-item__indicator {
  color: #ffffff;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  /* shorter rows to make portfolio items look lower */
  gap: 1.25rem;
  /* narrow, but airy gap */
  margin-top: 1.5rem;
}

.portfolio-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.portfolio-item--wide {
  grid-column: span 2;
}

.portfolio-item {
  border-radius: var(--radius);
  /* Rounded clean corners */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #ddd;
  transition: opacity 0.3s var(--ease);
}

.portfolio-item__img-wrap {
  position: absolute;
  inset: 0;
}

.portfolio-item__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) {
  .portfolio-item:hover .portfolio-item__img-wrap img {
    transform: scale(1.06);
  }
}

.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  /* Softened dark overlay for gentler contrast */
  background: linear-gradient(to top, rgba(17, 17, 17, 0.8) 0%, rgba(17, 17, 17, 0.2) 50%, transparent 80%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  /* Hidden by default for clean look */
  pointer-events: none;
  /* Smoother, gentler transition and subtler translateY movement */
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(4px);
}

@media (hover: hover) {
  .portfolio-item:hover .portfolio-item__overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portfolio featured item hover logic */
.portfolio-item--featured .portfolio-item__overlay {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

@media (hover: hover) {
  .portfolio-item--featured:hover .portfolio-item__overlay {
    transition-delay: 0s;
  }

  .portfolio__grid:has(.portfolio-item:not(.portfolio-item--featured):hover) .portfolio-item--featured .portfolio-item__overlay {
    opacity: 0;
    transform: translateY(4px);
    transition-delay: 0s;
  }
}

.portfolio-item__overlay h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  /* Tiny bit smaller */
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.portfolio-item__overlay span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  /* neutral white instead of teal */
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- KO NOVĒRTĒ PARTNERI (Benefits with bg image) ---------- */
.section--benefits-bg {
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
}

.benefits-bg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.85);
  /* Dark overlay */
}

.benefits-bg__inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0;
  /* Align left */
  padding: 4rem 3rem 4rem 10%;
  /* More padding on the left */
}

.benefits-bg__inner .section-title {
  color: white;
}

.benefits-bg__lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 3rem;
}

.benefits-bg__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.benefits-bg__list li {
  display: flex;
  gap: 1.5rem;
}

.bg-list__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  /* muted white instead of teal */
  line-height: 1;
}

.bg-list__content h4 {
  color: white;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.bg-list__content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- PROCESS & ABOUT SPLIT LAYOUT ---------- */
.section--process-split {
  background: var(--c-bg-light);
  padding: 7.5rem 0 7.5rem 0;
  /* Aligned to standard 7.5rem section padding */
}

.process-split__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 6rem;
}

.process-split__left {
  position: relative;
  order: 2;
}

.process-split__right {
  order: 1;
  max-width: 520px;
  /* slightly wider text blocks as requested */
}

.process-split__sticky {
  position: sticky;
  top: 150px;
}

.process-split__sticky .section-title {
  font-size: var(--text-h2);
  margin-bottom: 2.5rem;
  /* unified title margin */
}

.about__body {
  color: var(--c-text-body);
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* ---------- PROCESS REWORK ---------- */
/* Homepage-only: headline+description sit full-width above the row, and
   only the steps list + video form the 2-column row below. `.process-split__inner`
   and `.process-header` are shared with the solution-page showcase (image +
   bullet list, different content shape), so these overrides are scoped to
   `.section--process-rework` instead of changing the shared rules. */
.section--process-rework .process-split__inner {
  display: block;
}

.section--process-rework .process-header {
  max-width: 700px;
}

.section--process-rework .process-split__row {
  display: grid;
  /* Equal columns so both sides narrow by the same amount as the row
     shrinks — the video's height is independently driven by
     `.process-video-container`'s own height/max-height (see below), so it
     doesn't shrink along with the column width. */
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

.section--process-rework .process-split__left {
  position: sticky;
  top: 160px;
  align-self: start;
  /* Prevent grid column stretch, allowing stickiness */
}

.process-video-container {
  position: sticky;
  top: 100px;
  align-self: start;
  /* Square, height-driven — width follows the (unchanged) height instead of
     stretching to fill the grid column. justify-self keeps it pinned to the
     column's right edge, so widening the viewport grows the gap to the text
     on the left instead of stretching the video wider than tall.
     max-height caps this on unusually tall viewports (4K/tall external
     displays): uncapped, calc(100vh - 200px) grew past 1700px there, and
     since width follows height via aspect-ratio, the square badly
     overflowed its ~700-800px grid column, leaving a huge dead-space gap
     next to the shorter text column. 760px matches what the calc already
     naturally produces on normal laptop-height viewports, so this is a
     no-op there and only kicks in above it. */
  aspect-ratio: 1 / 1;
  /* width is now the driving dimension (height:auto follows it via
     aspect-ratio) so the two always shrink together and stay square —
     with height as the explicit value and only width capped, the box
     stopped being square once the column got narrower than the
     height-driven width (width shrank, height didn't). min() picks
     whichever is smallest: the vh-based size, the 760px cap, or the
     column's own width. */
  width: min(calc(100vh - 200px), 760px, 100%);
  height: auto;
  justify-self: end;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.process-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.process-video-mute {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.process-video-mute:hover {
  background: #111111;
  color: #ffffff;
  transform: scale(1.05);
}

.process-video-mute svg {
  width: 1.15rem;
  height: 1.15rem;
}

.process-video-mute__icon-on {
  display: none;
}

.process-video-mute[aria-pressed="true"] .process-video-mute__icon-off {
  display: none;
}

.process-video-mute[aria-pressed="true"] .process-video-mute__icon-on {
  display: block;
}

.process-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-counter-badge {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(17, 17, 17, 0.75);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  z-index: 10;
  pointer-events: none;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.process-header {
  margin-bottom: 2.5rem;
  /* unified spacing */
}

/* ---------- SOLUTION SHOWCASE (single statement + hover-synced image) ---------- */
.section--solution-showcase #showcaseList .process-list__item--centered {
  cursor: pointer;
  padding: 1.25rem 0;
}

/* Trim the empty box padding at top/bottom of the list so the column's rendered
   height runs text-to-text — the image is matched to this height, not to the
   padded bullet boxes. */
#showcaseList .process-list__item--centered:first-child {
  padding-top: 0;
}

#showcaseList .process-list__item--centered:last-child {
  padding-bottom: 0;
}

@media (min-width: 1025px) {
  .section--solution-showcase .process-split__inner {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }
}

.section--solution-showcase .process-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 450px;
  /* stretches to match the left column's natural height (CSS grid row sizing) */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
}

.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.showcase-slide.active {
  opacity: 1;
  z-index: 2;
}

.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-slide__caption {
  display: none;
}

.showcase-arrow {
  position: absolute;
  bottom: 1.5rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.showcase-arrow svg {
  width: 1.15rem;
  height: 1.15rem;
}

.showcase-arrow:hover {
  background: #111111;
  color: #ffffff;
  transform: scale(1.05);
}

.showcase-arrow--prev {
  right: 4.75rem;
}

.showcase-arrow--next {
  right: 1.5rem;
}

/* On desktop (>1024px) the showcase image already switches via the numbered
   list on the right (hover/scroll-driven bullets) — the overlaid prev/next
   arrows and "1/4" counter are carousel controls only relevant once that
   list collapses into a swipeable single-column layout below 1024px, so
   they're redundant clutter on larger screens. */
@media (min-width: 1025px) {
  .showcase-arrow,
  .image-counter-badge {
    display: none;
  }
}

/* ---------- IEGUVUMI (benefit cards) ---------- */
.section--benefits {
  background: var(--c-bg-light);
  padding: 0 0 5rem 0;
}

/* ---------- BENEFIT CARD TILES (2x2, clearly "click to expand" — not a nav/gallery card) ---------- */
.benefit-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.benefit-card-tile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.benefit-card-tile:hover,
.benefit-card-tile:focus-visible {
  border-color: var(--c-teal);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  outline: none;
}

.benefit-card-tile__img-wrap {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  overflow: hidden;
}

.benefit-card-tile__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-card-tile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.benefit-card-tile__body h3 {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-text-dark);
}

/* Deliberately styled unlike a nav link (no arrow, no underline-on-hover elsewhere on
   the site) — the circled plus reads as "expand this", not "go to another page". */
.benefit-card-tile__cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.benefit-card-tile:hover .benefit-card-tile__cta,
.benefit-card-tile:focus-visible .benefit-card-tile__cta {
  color: var(--c-teal);
}

.benefit-card-tile__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.benefit-card-tile:hover .benefit-card-tile__plus,
.benefit-card-tile:focus-visible .benefit-card-tile__plus {
  border-color: var(--c-teal);
  background: var(--c-teal);
  color: #ffffff;
  transform: rotate(90deg);
}

@media (max-width: 700px) {
  .benefit-cards-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card-tile__body {
    flex-direction: row;
  }

  .benefit-card-tile__body h3 {
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .benefit-card-tile {
    gap: 1rem;
    padding: 1.1rem;
  }

  .benefit-card-tile__img-wrap {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .benefit-card-tile__cta span:not(.benefit-card-tile__plus) {
    display: none;
  }
}

/* ---------- MATERIALS LOGO BAND ---------- */
.section--materials-band {
  background: var(--c-bg-alt);
  padding: 4.5rem 0;
  /* equal top/bottom padding, independent of the shared .products__inner rule */
  text-align: left;
}

.section--materials-band .products__inner {
  padding: 0 3rem;
  /* override the top-heavy 7.5rem/0 padding inherited from .products__inner */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.materials-band__label {
  /* Exception to the sitewide --text-h3 scale: logo-band labels stay a
     fixed, small caption size regardless of viewport. */
  font-size: 25px;
  margin-bottom: 4rem;
  text-align: left;
}

.materials-band__track-wrap {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.materials-band__track {
  display: flex;
  width: max-content;
  animation: materials-band-scroll 32s linear infinite;
}

.materials-band__track:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .materials-band__track {
    animation: none;
  }
}

.materials-band__logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6rem;
  padding-right: 6rem;
}

.materials-band__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 50px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease);
}

.materials-band__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
}

.materials-band__logo:hover {
  opacity: 0.9;
}

@keyframes materials-band-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Shared "materials card" look (title | vertical divider | scrolling logos)
   — used both for the 3-card group on par-mums (#materiali) and the single
   card on each solution page. Elevated white surface, no shared background
   or divider lines between multiple cards like the old single-column layout. */
#materiali.materials-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 4rem;
  margin-bottom: 8rem;
}

.materials-card {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.04);
}

/* On par-mums this class sits on a <section> that ALSO carries
   `.section--materials-band` (padding: 2.5rem 0 !important elsewhere in this
   file) — same specificity as plain `.materials-card`, so whichever rule is
   later in the file would win. `section.materials-card, div.materials-card`
   outranks a single-class selector, so this reliably wins regardless of
   where either rule sits in the cascade. */
section.materials-card,
div.materials-card {
  /* Left padding matches .btn's own left padding (2.4rem) so the label
     text lines up with the "Skatīt vairāk" button text below it. */
  padding: 2.75rem 3rem 2.75rem 2.4rem !important;
}

.materials-card .materials-band__label {
  flex: 0 0 240px;
  width: 240px;
  margin-bottom: 0;
  font-size: 25px;
  line-height: 1.25;
}

.materials-card__divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.08);
}

.materials-card .materials-band__track-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Row 1 + 3 scroll right, row 2 scrolls left (the default keyframe direction
   already moves left-to-right visually reversed, so "reverse" here is what
   reads as rightward motion — see materials-band-scroll below). */
#materiali .materials-card:nth-of-type(1) .materials-band__track,
#materiali .materials-card:nth-of-type(3) .materials-band__track {
  animation-direction: reverse;
}

/* Band 3 (Sēdmēbeles) carries 4 logos against 6 in the other two bands, so
   the shared 32s/-50% animation moves fewer pixels per second there and
   reads as a different, slower speed. Scale its duration down by the same
   ratio (4/6) so all three bands travel at the same px/s pace. */
#materiali .materials-card:nth-of-type(3) .materials-band__track {
  animation-duration: 21.3s;
}

/* Solution pages' single band carries all 16 logos (vs. 6 in a par-mums
   band) in one track — same px/s pace as the 32s/6-logo baseline needs a
   proportionally longer duration, or 16 logos in the same 32s would scroll
   noticeably faster than par-mums. */
.materials-card--single .materials-band__track {
  animation-duration: 85.3s;
}

/* Laptop screens (<=1024px) get the compact/stacked card treatment too, not
   just phones — the fixed-width title column starts fighting the logos for
   room well before the old 700px cutoff. */
@media (max-width: 1024px) {
  section.materials-card,
  div.materials-card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 2rem 1.5rem 2rem 2rem !important;
  }

  .materials-card .materials-band__label {
    flex: none;
    width: 70%;
    font-size: 28px;
  }

  .materials-card__divider {
    flex: 0 0 1px;
    align-self: stretch;
    width: 100%;
    height: 1px;
  }
}


@media (max-width: 700px) {
  .materials-band__label {
    margin-bottom: 2.5rem;
  }

  .materials-band__logos {
    gap: 3rem;
    padding-right: 3rem;
  }

  .materials-band__logo {
    width: 80px;
    height: 36px;
  }
}

.process-header .section-title {
  font-size: var(--text-h2);
  margin-bottom: 1rem;
  /* spacing between label and description */
}

.process-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
  list-style: none; /* hide bullet dots */
}

.process-list__item {
  border-bottom: 1px solid var(--c-border);
  padding: 1.75rem 0 1.75rem 4rem;
  /* narrower, more compact process item padding */
  position: relative;
}

.process-list__item--centered {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  padding: 2.1rem 0; /* slightly reduced bullet spacing */
  position: relative;
  list-style: none;
}

.process-list__item--centered .process-list__num {
  position: static;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.process-list__item--centered .process-list__content {
  display: flex;
  align-items: center;
}

.process-list__item--centered .process-list__content h3 {
  margin: 0;
  font-size: 1.35rem;
}

.process-list__item:last-child,
.process-list__item--centered:last-child {
  border-bottom: none;
}

@media (min-width: 769px) {
  .process-list__item {
    min-height: auto;
    /* Removed old min-height constraint */
  }
}

.process-list__num {
  position: absolute;
  left: 0;
  top: 1.8rem;
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--c-text-body);
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.process-list__item.active .process-list__num,
.process-list__item--centered.active .process-list__num {
  background: #1e1e1e;
  /* matte dark — not pure black */
  color: rgba(255, 255, 255, 0.9);
  border-color: #2a2a2a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.process-list__content h3 {
  font-family: var(--font-body);
  font-size: 1.55rem;
  font-weight: 300;
  color: var(--c-text-body);
  transition: color 0.3s var(--ease);
}

.process-list__item.active .process-list__content h3,
.process-list__item--centered.active .process-list__content h3 {
  color: var(--c-text-dark);
}

/* Underline-on-hover is specific to the "Risinājumu veidi" showcase bullets
   on the solution pages (e.g. biroja-mebeles.html) — not homepage bullets or
   the benefit popup's bullet list, which reuse the same base classes. */
.section--solution-showcase .process-list__content h3 {
  position: relative;
  display: inline-block;
}

.section--solution-showcase .process-list__content h3::after {
  content: '';
  position: absolute;
  bottom: -0.4rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1);
}

.section--solution-showcase .process-list__item:hover .process-list__content h3::after,
.section--solution-showcase .process-list__item--centered:hover .process-list__content h3::after,
.section--solution-showcase .process-list__item.active .process-list__content h3::after,
.section--solution-showcase .process-list__item--centered.active .process-list__content h3::after {
  transform: scaleX(1);
}

.process-list__content p {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.7;
  margin-top: 0.75rem;
}

.process-ctas {
  display: flex;
  gap: 1rem;
  margin-left: 0;
  /* Align with the left edge of the column (headline) */
  margin-top: 1rem;
  /* Lifted buttons even higher up */
}


/* ---------- NEW ABOUT US SECTION ---------- */
.section--about-new {
  background: #111111;
  color: #ffffff;
  padding: 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.about-new__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  min-height: 100vh;
}

.about-new__left {
  padding: 7.5rem 0 7.5rem 3rem;
  /* top/bottom 7.5rem, left 3rem, no right padding */
}

@media (min-width: 1400px) {
  .about-new__left {
    padding-left: calc((100vw - 1400px) / 2 + 3rem);
  }
}



.about-new__left .section-title {
  color: #ffffff;
  font-size: var(--text-h2);
  margin-bottom: 2.5rem;
  /* Unified margin bottom */
}

.about-new__body {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}

.about-new__right {
  position: relative;
  overflow: visible;
  /* The grid cell itself stretches to full row height */
}

.about-new__img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.about-new__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about-new__map-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: #111111;
  position: relative;
  overflow: visible;
}

.interactive-europe-map {
  width: 100%;
  height: 100%;
  max-width: 80%;
  max-height: 80%;
  display: block;
  transform: translate3d(0, -25px, 0);
  will-change: transform;
}

/* Map Interactivity */
.interactive-europe-map .cd {
  fill: #243738;
  transition: fill 0.2s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.interactive-europe-map .cd:hover {
  fill: #1e2f30;
  cursor: pointer;
}

.interactive-europe-map .cc {
  fill: #41B6C4;
  transition: fill 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  transform-box: fill-box;
}

.interactive-europe-map .cc:hover {
  fill: #55c8d6;
  filter: drop-shadow(0 0 10px rgba(65, 182, 196, 0.75)) drop-shadow(0 0 3px rgba(65, 182, 196, 0.4));
  transform: translateY(-2px) scale(1.01);
  cursor: pointer;
}

/* Riga marker — pinpoints Latvia/HQ location on the map */
.map-pin {
  pointer-events: none;
}

.map-pin__dot {
  fill: #ffffff;
  stroke: #111111;
  stroke-width: 1.5;
}

.map-pin__pulse {
  fill: #ffffff;
  opacity: 0.55;
  transform-origin: center;
  transform-box: fill-box;
  animation: map-pin-pulse 2.2s ease-out infinite;
}

@keyframes map-pin-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* ---------- KONTAKTI (Free Layout) ---------- */
.section--contact {
  background: var(--c-bg-light);
}

.contact__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* Using free-contact layout directly without the box borders */
.free-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

/* Rekvizīti + Karte: explicit 2-column x 2-row grid so the map card's bottom
   lines up with the copy button, and the Maps/Waze buttons line up with the
   social icons row below it, regardless of content length. */
.rekviziti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 6rem;
  row-gap: 1.5rem;
  align-items: stretch;
}

.rekviziti-grid__left-top {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.rekviziti-grid__left-top .section-title {
  margin-bottom: 1.5rem;
}

.rekviziti-grid__socials {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.rekviziti-grid__map {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.rekviziti-grid__buttons {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
}

@media (max-width: 900px) {
  .rekviziti-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 2rem;
  }

  .rekviziti-grid__left-top,
  .rekviziti-grid__socials,
  .rekviziti-grid__map,
  .rekviziti-grid__buttons {
    grid-column: 1;
  }

  .rekviziti-grid__left-top { grid-row: 1; }
  .rekviziti-grid__socials { grid-row: 2; }
  .rekviziti-grid__map { grid-row: 3; }
  .rekviziti-grid__buttons { grid-row: 4; }

  .rekviziti-grid__map .map-card__frame {
    height: 500px !important;
  }
}


.contact-box__left .section-title {
  margin-bottom: 1.5rem;
}

.contact-box__left>p {
  color: var(--c-text-body);
  line-height: 1.7;
  margin-bottom: 3rem;
  max-width: 450px;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.c-method {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.c-method svg {
  width: 20px;
  height: 20px;
  color: var(--c-text-muted);
  /* soft icon color */
  margin-top: 0.2rem;
  transition: color 0.3s ease;
}

.c-method:hover svg {
  color: var(--c-text-dark);
}

.c-method>div>span {
  display: block;
  font-size: 0.72rem;
  color: var(--c-text-muted);
  margin-bottom: 0.3rem;
  text-transform: none;
  font-weight: 300;
  letter-spacing: 0;
}

.c-method a {
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--c-text-dark);
  transition: color 0.3s ease;
}

.c-method a:hover {
  color: var(--c-text-body);
}

.c-address-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.c-address-text {
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--c-text-dark);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.c-address-text:hover {
  color: var(--c-text-body);
}

.c-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.c-nav-link {
  font-weight: 300 !important;
  font-size: 0.88rem !important;
  color: var(--c-text-dark) !important;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.c-nav-link:hover {
  color: var(--c-text-body) !important;
}

.c-details-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--c-text-dark);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.c-details-text strong {
  font-weight: 300;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
}

/* Copy to clipboard elements */
.copyable-item {
  cursor: pointer;
  position: relative;
  transition: opacity 0.2s ease, color 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--c-text-dark);
}

.copyable-item:hover {
  opacity: 0.7;
}

.contact-socials {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-text-dark);
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-btn svg {
  width: 20px;
  height: 20px;
}

.social-btn:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}



.clean-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea {
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text-dark);
  transition: all 0.3s;
}

.form-group textarea {
  min-height: 110px;
  max-height: 110px;
  overflow-y: auto;
  resize: vertical;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus {
  border-color: var(--c-teal);
  /* neutral focus border instead of teal */
  background: #FFFFFF;
  outline: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  /* subtle depth on focus */
}

/* File upload — the native <input type="file"> is stretched invisibly over
   this styled box, so any click/drag on the box reaches the real input. */
.file-upload-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}

.file-upload-box:hover,
.file-upload-box.is-dragover {
  border-color: var(--c-teal);
  background: var(--c-accent-subtle);
}

.file-upload-box__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--c-text-muted);
}

.file-upload-box__icon svg {
  width: 20px;
  height: 20px;
}

.file-upload-box__btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text-dark);
}

.file-upload-box__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.file-upload-box.has-file .file-upload-box__filename {
  color: var(--c-text-dark);
}

.file-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* CF7 core sets .wpcf7-form-control-wrap to position:relative, which would
   otherwise become the input's absolute-positioning anchor instead of
   .file-upload-box, shrinking the clickable area to a sliver. */
.file-upload-box .wpcf7-form-control-wrap {
  position: static;
}

/* Checkbox styling to ensure they display properly and are on top of other elements */
.clean-form input[type="checkbox"],
.form-group input[type="checkbox"],
input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  padding: 0 !important;
  margin: 0 0.5rem 0 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  accent-color: var(--c-teal) !important;
}

.clean-form label:has(input[type="checkbox"]),
.form-group label:has(input[type="checkbox"]),
.clean-form .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  color: var(--c-text-body) !important;
  position: relative !important;
  z-index: 9998 !important;
}

.wpcf7-checkbox,
.wpcf7-acceptance,
.wpcf7-list-item,
.form-group-checkbox {
  position: relative !important;
  z-index: 9998 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.form-group .form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

.solution-combo.combo-box {
  width: 100%;
  margin-top: 0;
}

/* Real value carrier for the combo-box UI above it (JS-only, never shown). */
.solution-combo__hidden {
  display: none;
}

/* Match the plain form fields (gray fill, transparent border) instead of the
   white/bordered combo-box look meant for sitting on a hero background. */
.solution-combo .combo-box__input-group .input {
  border: 1px solid transparent;
  background: var(--c-bg-alt);
  padding: 1rem 1.25rem;
  padding-inline-end: 2.5rem;
  font-size: 1rem;
}

.solution-combo .combo-box__input-group .input:hover {
  border-color: transparent;
  background: var(--c-bg-alt);
}

.solution-combo .combo-box__input-group .input:focus {
  border-color: var(--c-teal);
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ---------- CONTACT FORM (Contact Form 7) ---------- */
.form-group input[type="file"].wpcf7-form-control {
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-text-dark);
  cursor: pointer;
}

.form-group--consent .wpcf7-form-control.wpcf7-acceptance {
  display: block;
}

.form-group--consent .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
}

.form-group--consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--c-text-muted);
  cursor: pointer;
}

.form-group--consent input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin-top: 0.2rem;
  accent-color: var(--c-teal);
  cursor: pointer;
}

.form-group--consent a {
  color: var(--c-teal);
  text-decoration: underline;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #e0453c;
  font-weight: 400;
}

.wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.wpcf7-spinner {
  display: none;
}

/* ---------- FOOTER ---------- */
.footer {
  background: #0d0d0d;
  padding: 7rem 0 4rem 0;
  color: white;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 10;
}

.footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
}

.footer__brand-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 420px;
}

.footer__logo img {
  height: 48px;
  width: auto;
  transition: transform 0.3s var(--ease);
}

.footer__logo img:hover {
  transform: translateY(-2px);
}

.footer__tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}

.footer__nav-box {
  display: flex;
  align-items: center;
}

.footer__nav {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.footer__nav a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.65);
  position: relative;
  transition: color 0.3s var(--ease);
  padding-bottom: 4px;
}

.footer__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  /* neutral white line instead of teal */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer__nav a:hover {
  color: #ffffff;
}

.footer__nav a:hover::after {
  transform: scaleX(1);
}

.footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  width: 100%;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__company-info,
.footer__copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.footer__company-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dot-separator {
  color: var(--c-text-muted);
  /* neutral separator dots */
  opacity: 0.5;
}

/* ---------- RESPONSIVE ---------- */

/* TABLET LAYOUT (1024px and down) */
@media (max-width: 1024px) {

  /* Navigation hamburger drawer system */
  .nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }

  .nav__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-text-dark);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .nav__hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav__hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 320px;
    max-width: 80%;
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 3rem;
    gap: 2rem;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s var(--ease);
    z-index: 1000;
  }

  /* Force all links in mobile drawer to be dark */
  .nav__links a,
  .nav--transparent .nav__links a,
  .nav--scrolled .nav__links a {
    color: var(--c-text-dark) !important;
  }

  /* Menu overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999; /* Below the nav (1000) */
  }

  .nav-overlay.active {
    display: block;
  }

  /* Hide header line when menu opens */
  .nav.menu-open {
    border-bottom-color: transparent !important;
  }

  .nav__links.open {
    transform: translateX(0);
  }

/* 2 columns for Tablet */
  .products-accordion {
    grid-template-columns: 1fr 1fr;
    height: 640px;
    /* taller than the old 440px — at ~1024px the narrower list column wraps
       category text onto more lines than desktop, so the fixed-height flex
       layout needs more room or the active item's content gets clipped */
    gap: 2rem;
  }

  .process-split__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .section--process-rework .process-split__row {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-split__left {
    order: 2;
    display: block;
    position: relative;
    top: 0;
    align-self: stretch;
  }

  .process-video-container {
    display: block;
    position: relative;
    top: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 500px;
    margin: 2rem auto 0 auto;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  }

  .process-split__right {
    order: 1;
    max-width: 100%;
  }

  .process-list__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-border);
  }

  .process-list__item p {
    display: none;
  }

  .process-list__num {
    position: static;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .process-list__content h3 {
    margin: 0;
    font-size: 1.1rem;
  }

  .about-new__inner {
    grid-template-columns: 5fr 7fr;
    gap: 0;
  }

  .about-new__left {
    padding: 6rem 3rem;
  }

  .free-contact {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 1.25rem;
  }

  .portfolio-item--featured,
  .portfolio-item--wide {
    grid-column: span 2;
  }

  .section--solution-showcase .process-split__right {
    display: none !important;
  }

  .section--solution-showcase .process-image-container {
    position: relative;
    height: auto;
    aspect-ratio: 4/3;
    width: 100%;
    overflow: hidden;
    display: block;
  }

  .showcase-slide {
    position: absolute;
    inset: 0;
    flex: none;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
    scroll-snap-align: none;
  }

  .showcase-slide.active {
    opacity: 1 !important;
    z-index: 2;
  }

  .showcase-slide__caption {
    display: block;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 5;
  }

  .showcase-arrow {
    position: absolute;
    bottom: 1.5rem;
    top: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #111111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.3s, transform 0.2s;
  }

  .showcase-arrow--prev {
    right: 5rem;
    left: auto;
  }

  .showcase-arrow--next {
    right: 1.5rem;
  }

  .showcase-arrow:hover {
    background: #ffffff;
    transform: scale(1.05);
    color: #111111;
  }

  .showcase-btn-group--desktop {
    display: none !important;
  }

  .showcase-btn-group--mobile {
    display: flex !important;
    margin-top: 0;
    gap: 1.25rem;
    align-items: center;
    justify-content: flex-start;
    order: 3;
  }
}

.showcase-btn-group--mobile {
  display: none;
}

/* MOBILE LAYOUT (768px and down) */
@media (max-width: 768px) {

  /* Fixed (non-fluid) type scale below tablet. Overriding the shared
     --text-h1/--text-h2 variables here — rather than each heading's own
     clamp() — is the single point every h1/.hero__headline and
     h2/.section-title (and its former duplicate clamp() copies, now
     consolidated to reference the same variable) picks this up from. */
  :root {
    --text-h1: 2.2rem;
    --text-h2: 1.8rem;
  }

  /* Mobile M/S only (not the tablet-ish end of this 768px block) */
  @media (max-width: 499px) {
    :root {
      --text-h1: 2.1rem;
    }
  }

  body {
    font-size: 1rem;
  }

  .about__body,
  .hero__sub {
    font-size: 1rem;
  }

  /* Side padding for mobile */
  .nav__inner,
  .hero__content,
  .products__inner,
  .portfolio__inner,
  .benefits-bg__inner,
  .process-split__inner,
  .contact__inner,
  .footer__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section {
    padding: 5rem 0;
  }

  /* Extra breathing room below the projects section specifically: panels
     are pinned only for their own height (pinSpacing: false, see the GSAP
     stacking setup above), so a short panel gets covered by the next one
     almost immediately after its content scrolls past — on mobile that was
     cutting the slider's prev/next arrows off-screen before they were
     noticed. More bottom padding here keeps the panel pinned/visible a bit
     longer without touching the stacking/pin logic itself. */
  .section--portfolio {
    padding-bottom: 8rem;
  }

  .nav__logo img {
    height: 34px;
    /* slightly smaller logo to fit small screens */
  }

  /* Solution pages: the showcase section's inline padding-top: 6rem is sized
     for desktop; against the mobile hero it reads as a huge gap between the
     headline and the image. Also tighten the image-to-buttons gap, which
     otherwise stacks a 3rem grid gap on top of the button group's own margin. */
  .section--solution-showcase {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
  }

  .section--solution-showcase .process-split__inner {
    gap: 1.5rem;
  }

  .nav__actions {
    gap: 1rem;
  }


  /* 1 column for Mobile */
  .products-accordion {
    grid-template-columns: 1fr;
    height: auto;
    gap: 1.5rem;
  }

  /* Extra breathing room below the accordion so the next stacked panel
     rides up later on scroll, instead of arriving right at its edge. */
  .products-accordion:last-of-type {
    margin-bottom: 6rem;
  }

  .products-accordion .p-acc__image {
    height: 250px;
    order: 1;
    /* image on top */
  }

  .products-accordion .p-acc__list {
    order: 2;
    /* list below */
  }

  .portfolio__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1.25rem;
  }

  .portfolio-item,
  .portfolio-item--featured,
  .portfolio-item--wide {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 4/3;
  }

  .process-split__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-split__left {
    order: 2;
    display: block;
  }

  .process-video-container {
    display: block;
  }

  .process-list {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  .process-list__item {
    padding-left: 0;
  }

  .about-new__inner {
    display: block;
    height: auto;
  }

  .about-new__left {
    padding: 2.5rem 1.5rem;
  }

  .about-new__right {
    display: block;
    height: 420px;
    overflow: visible;
  }
  .about-new__right .about-new__map-container {
    padding: 0.5rem;
    overflow: visible;
  }
  .about-new__right .interactive-europe-map {
    max-width: 98%;
    max-height: 98%;
  }

  .free-contact {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer stack */
  .footer {
    padding: 5rem 0 3rem 0;
  }

  .footer__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
  }

  .footer__brand-box {
    align-items: center;
  }

  .footer__nav {
    justify-content: center;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
}

/* SMALL VIEWPORT OPTIMIZATIONS (480px and down) */
@media (max-width: 480px) {

  .hero__ctas,
  .process-ctas {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .hero__ctas .btn,
  .process-ctas .btn {
    width: 100%;
  }

  /* About section mobile overrides */
  .about-new__left {
    padding: 5rem 1.5rem;
  }

}

/* ---------- PROJECT MODAL ---------- */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.project-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.project-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.project-modal__content {
  position: relative;
  width: 95%;
  max-width: 1200px;
  height: 90vh;
  max-height: 850px;
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transform: translateY(30px);
  transition: transform 0.4s var(--ease);
}

.project-modal.active .project-modal__content {
  transform: translateY(0);
}

.project-modal__close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--c-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
  transition: color 0.3s;
  z-index: 10;
}

.project-modal__close:hover {
  color: var(--c-text-dark);
}

.project-modal__body {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 4rem;
  padding: 4.5rem;
  height: 100%;
  overflow-y: auto;
}

.project-modal__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 1rem;
}

.project-modal__left-top {
  display: flex;
  flex-direction: column;
}

/* Grid items default to min-height: auto, so without this the column would
   grow past the modal's fixed height to fit a tall (portrait) source image
   instead of staying a fixed box that crops the image via object-fit. */
.project-modal__right {
  min-height: 0;
  height: 100%;
}

.project-modal__challenges {
  margin-top: 2rem;
}

.project-modal__challenges-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text-dark);
  margin-bottom: 1rem;
}

.project-modal__challenges-list.process-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Smaller variant of the numbered bullet — matches the compact style used
   in the benefits popup (.benefit-modal__list), not the larger showcase-list
   bullets, scaled down further for the tighter modal column. */
.project-modal__challenges-list .process-list__item--centered {
  border-bottom: none;
  padding: 0.55rem 0;
}

.project-modal__challenges-list .process-list__item--centered:first-child {
  padding-top: 0;
}

.project-modal__challenges-list .process-list__item--centered:last-child {
  padding-bottom: 0;
}

.project-modal__challenges-list .process-list__num {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  margin-right: 1.1rem;
}

.project-modal__challenges-list .process-list__content h3 {
  font-size: 1.1rem;
}

.project-modal__title {
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--c-text-dark);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.project-modal__category {
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  color: var(--c-text-muted);
  /* neutral instead of teal */
  letter-spacing: 0;
  margin-bottom: 2rem;
  display: inline-block;
}

.project-modal__desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-body);
  font-weight: 300;
}

.project-modal__gallery {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}

.project-modal__main-wrap {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #FAFAFA;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.project-modal__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.project-modal__thumbs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.project-modal__thumb {
  width: 80px;
  height: 55px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  background: #FAFAFA;
}

.project-modal__thumb:hover {
  opacity: 0.9;
}

.project-modal__thumb.active {
  opacity: 1;
  border-color: #111111;
  /* neutral dark border instead of teal */
}

.project-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hug-content modal variant: shrinks to fit its content instead of a fixed height,
   and centers that content vertically within itself (used by the benefit popup). */
.project-modal__content--hug {
  height: auto;
  max-height: 90vh;
}

.project-modal__content--hug .project-modal__body {
  height: auto;
  min-height: 0;
  align-items: center;
}

/* ---------- BENEFIT MODAL (no image, headline/desc left, bullets right) ---------- */
.project-modal__body.benefit-modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  align-content: start;
}

.benefit-modal__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.benefit-modal__left .project-modal__title {
  margin-bottom: 1rem;
  /* matches .process-header .section-title spacing used elsewhere for title->paragraph */
}

.benefit-modal__list {
  margin-bottom: 0;
}

.benefit-modal__list .process-list__item--centered {
  border-bottom: none;
  padding: 0.65rem 0;
  /* tighter, grouped bullets — no divider lines between them */
}

.benefit-modal__list .process-list__item--centered:first-child {
  padding-top: 0;
  /* aligns the first bullet's text with the headline's top, instead of the taller number-box top */
}

.benefit-modal__list .process-list__item--centered:last-child {
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  .project-modal__body.benefit-modal__body {
    grid-template-columns: 1fr;
  }

  .project-modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 1.5rem 0 !important;
  }

  .project-modal__content {
    height: auto !important;
    max-height: none !important;
    margin: 1.5rem auto !important;
    width: 92% !important;
  }

  .project-modal__body {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 3.5rem 2rem 2.5rem !important;
    height: auto !important;
    overflow-y: visible !important;
  }

  /* Single-column layout collapses the row's stretch height, so the image
     box needs an explicit height or a portrait source photo shows at its
     native tall aspect ratio instead of filling/cropping to the box. Tall
     enough to still leave room for the thumb row + prev/next nav below it. */
  .project-modal__right {
    height: auto !important;
    flex-shrink: 0 !important;
  }

  .project-modal__main-wrap {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .project-modal__category {
    margin-bottom: 1.5rem !important;
  }

  .project-modal__close {
    top: 1rem !important;
    right: 1.5rem !important;
    font-size: 2.2rem !important;
  }
}

/* Optimizations for Mobile L, M, S (520px and down) */
@media (max-width: 520px) {
  .project-modal {
    padding: 1rem 0 !important;
  }

  .project-modal__content {
    width: 94% !important;
    margin: 1rem auto !important;
  }

  .project-modal__body {
    padding: 3rem 1.25rem 2rem !important;
    gap: 1.75rem !important;
  }



  .project-modal__title {
    font-size: var(--text-h2) !important;
  }

  .project-modal__desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .project-modal__challenges-list .process-list__num {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.9rem !important;
    margin-right: 0.8rem !important;
  }

  .project-modal__challenges-list .process-list__content h3 {
    font-size: 1rem !important;
  }

  .project-modal__thumb {
    width: 60px !important;
    height: 42px !important;
  }

  .project-modal__thumbs {
    gap: 0.5rem !important;
  }

  .project-modal__thumbs--stretch .project-modal__thumb {
    height: 42px !important;
  }
}

/* Stacking buttons vertically on very narrow screens (480px and down) to prevent overflow */
@media (max-width: 480px) {
  .modal-bottom-nav--mobile {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
  }

  .modal-bottom-nav--mobile .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* ---------- TOAST NOTIFICATION ---------- */
.toast-notification {
  position: fixed;
  top: 6.5rem;
  left: 50%;
  transform: translate(-50%, -20px);
  background: #ffffff;
  border: 1px solid var(--c-teal);
  border-radius: 999px;
  /* button-like pill */
  padding: 0.75rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--c-text-dark);
  /* White button glow with teal outline styling */
  box-shadow: 0 8px 30px rgba(0, 206, 209, 0.22), 0 0 15px rgba(0, 206, 209, 0.1);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.active {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ---------- BACK TO TOP BUTTON ---------- */
.back-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #ffffff;
  color: var(--c-text-dark);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), visibility 0.4s var(--ease), background 0.3s, border-color 0.3s;
}

.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s var(--ease);
}

.back-to-top:hover {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}



/* ---------- EMPLOYEE CONTACT ROW ---------- */
.employee-contact-wrap {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 6.5rem;
  margin-bottom: 3rem;
}

.employee-contact-wrap img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.employee-contact-wrap .employee-contact-avatar.team-card__avatar--icon {
  width: 140px;
  height: 140px;
  font-size: 2.75rem;
  margin-bottom: 0;
  flex-shrink: 0;
}


.employee-contact-wrap .contact-methods {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .employee-contact-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ---------- RISINĀJUMU GRID STARPLAPA ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.solution-card {
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  position: relative;
  height: 400px;
}

.solution-card:hover {
  transform: translateY(-5px);
}


.sol-card__img-wrap {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.sol-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.solution-card:hover .sol-card__img-wrap img {
  transform: scale(1.05);
}

.sol-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.sol-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--c-text-dark);
  margin-bottom: 0.5rem;
}

.sol-card__desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.sol-card__link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}

.sol-card__link:hover {
  color: var(--c-teal-hover);
}

@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .solution-card {
    height: auto;
  }
}

/* ============================================
   OTHER SOLUTIONS CAROUSEL (Citi risinājumi)
   ============================================ */
.section--other-solutions {
  background: var(--c-surface);
}

.other-solutions-carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.oc-arrows-wrap {
  display: flex;
  gap: 0.5rem;
}

.oc-track-wrap {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.oc-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.oc-card {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
  min-width: 0;
  background: var(--c-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.3s;
}

.oc-card:hover {
  transform: translateY(-4px);
  box-shadow: none; /* No shadow */
}

.oc-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.oc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.oc-card:hover .oc-card__img img {
  transform: scale(1.05);
}

.oc-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.oc-card__body h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

/* Arrows: style like back-to-top button/bullet points, same size */
.oc-arrow {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--c-border);
  color: var(--c-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}

.oc-arrow:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  transform: scale(1.05);
}

.oc-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.oc-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

.oc-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.oc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #555; /* Gray for inactive */
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

.oc-dot.active {
  background: var(--c-teal); /* Blue/teal for active */
  transform: scale(1.2);
}

/* Equal 4-column portfolio grid (used in product pages) */
.portfolio__grid--equal {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
}

.portfolio__grid--equal .portfolio-item {
  grid-column: auto;
  grid-row: auto;
}

/* Always show overlay on the equal grid (no featured logic) */
.portfolio__grid--equal .portfolio-item__overlay {
  opacity: 0;
  transform: translateY(4px);
}

.portfolio__grid--equal .portfolio-item:hover .portfolio-item__overlay {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .oc-card {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
  .portfolio__grid--equal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .oc-card {
    flex: 0 0 calc(100% - 0rem);
  }
  .other-solutions-carousel {
    gap: 0.5rem;
  }
  .section--other-solutions {
    padding-bottom: 4rem !important;
  }
  .portfolio__grid--equal {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
}

/* ---------- PROJEKTU GRID STARPLAPA ---------- */
.projects-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.project-hub-card {
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  position: relative;
  height: 275px;
}

.project-hub-card:hover {
  transform: translateY(-5px);
}

.proj-hub-card__img-wrap {
  height: 190px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.proj-hub-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-hub-card:hover .proj-hub-card__img-wrap img {
  transform: scale(1.05);
}

.proj-hub-card__content {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.proj-hub-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--c-text-dark);
  margin-bottom: 0.5rem;
}

.proj-hub-card__link {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--c-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}

.proj-hub-card__link:hover {
  color: var(--c-teal-hover);
}

/* ---------- DINAMISKAIS PROJEKTU GRID (Collage Layout) ---------- */
.portfolio__grid--dynamic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 1.25rem;
  margin-top: 6.5rem;
  margin-bottom: 5rem;
}

.portfolio__grid--dynamic .portfolio-item {
  height: 100%;
  width: 100%;
  position: relative;
}

.portfolio-item--large-left .portfolio-item__overlay,
.portfolio-item--large-right .portfolio-item__overlay {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
  transition-delay: 0.2s;
}

.portfolio-item--large-left:hover .portfolio-item__overlay,
.portfolio-item--large-right:hover .portfolio-item__overlay {
  background: rgba(17, 17, 17, 0.85);
  transition-delay: 0s;
}

@media (max-width: 1024px) {
  .projects-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio__grid--dynamic {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 200px !important;
  }
  /* On tablets and mobile, remove explicit grid placements to let them flow naturally */
  .portfolio__grid--dynamic .portfolio-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .portfolio-item--large-left,
  .portfolio-item--large-right {
    grid-column: span 2 !important;
    grid-row: span 1 !important; /* Make large items fit into row width but not span height on mobile */
  }
}

@media (max-width: 600px) {
  .projects-hub-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .portfolio__grid--dynamic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 180px !important;
  }
  .portfolio-item--large-left,
  .portfolio-item--large-right {
    grid-column: span 1 !important;
  }
}

.slider-nav-wrap {
  display: none;
}

.category-block .section-title.category-block__title {
  font-size: var(--text-h2);
}

@media (min-width: 769px) {
  .category-block .section-title.category-block__title {
    font-size: clamp(2.2rem, 3.5vw, 3.2rem); /* slightly larger desktop group names */
  }
}

.category-block__desc {
  color: var(--c-text-body);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 620px;
  margin-top: 0.5rem;
}

/* ==========================================================================
   MOBILE SLIDER AND MODAL NAVIGATION (NEW PROJEKTI PAGE)
   ========================================================================== */

/* Category Block */
.category-block {
  margin-bottom: 5rem;
}

/* ---------- Expandable overflow gallery (projekti1 / projekti2) ---------- */
.cat-more {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #ffffff;
  color: var(--c-text-dark);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cat-more__btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.55s var(--ease);
  /* calm, unhurried morph between the down and up arrow states */
}

.cat-more__btn:hover {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: #ffffff;
}

.cat-more[data-collapsed="false"] .cat-more__btn svg {
  transform: rotate(180deg);
}

.cat-more__reveal {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  max-height: 70px;
  overflow: hidden;
  transition: max-height 0.6s var(--ease);
}

.cat-more[data-collapsed="false"] .cat-more__reveal {
  max-height: 30000px;
}

.cat-more__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 85%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.45s var(--ease);
}

.cat-more[data-collapsed="false"] .cat-more__fade {
  opacity: 0;
}

/* projekti2 only: once expanded, keep the toggle button on screen while
   scrolling through the long gallery so it's always reachable to collapse.
   projekti1 keeps the default in-flow button (scoped via the container id,
   since only projekti2.html renders into #projekti2Container).
   Uses position: fixed rather than sticky — body has overflow-x: hidden,
   which implicitly forces overflow-y: auto on it and breaks position:
   sticky's stick range across browsers; fixed sidesteps that entirely. */
#projekti2Container .cat-more[data-collapsed="false"] .cat-more__btn {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  animation: cat-more-btn-drop 0.6s var(--ease) both;
  /* a position jump (in-flow -> fixed) can't be transitioned directly, so this
     plays a gentle downward slide + fade the moment it becomes fixed */
}

@keyframes cat-more-btn-drop {
  from {
    transform: translate(-50%, -28px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.slider-wrapper {
  position: relative;
  width: 100%;
}

/* Slider Nav Arrows (Desktop hidden, shown via media queries or in modal) */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 50%;
  color: var(--c-primary);
  font-size: 1.25rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  cursor: pointer;
  z-index: 10;
  display: none; /* Hidden by default on desktop grids */
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
  user-select: none;
  -webkit-user-select: none;
}

.slider-nav:hover {
  background: var(--c-primary);
  color: var(--c-text-light);
}

.slider-nav.prev-btn { left: -23px; }
.slider-nav.next-btn { right: -23px; }

.slider-nav.nav-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Modal Nav Arrows */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000;
  display: none; /* Flex when active */
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
  backdrop-filter: blur(4px);
}

.modal-nav:hover {
  background: rgba(255,255,255,0.4);
}

.modal-nav.prev-btn { left: 20px; }
.modal-nav.next-btn { right: 20px; }

@media (max-width: 1024px) {
  .modal-nav.prev-btn { left: 10px; }
  .modal-nav.next-btn { right: 10px; }
}

/* Desktop featured gallery vs. the pre-redesign mobile slider: only one
   shows at a time, toggled by breakpoint (both are rendered into the DOM). */
.mobile-slider-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-featured-gallery {
    display: none !important;
  }

  .mobile-slider-only {
    display: block;
  }
}

@media (max-width: 768px) {
  /* Transform Desktop Grid into Mobile Slider */
  .slider-wrapper .slider-track {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden; 
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 10px 0 25px 0;
    
    /* Bleed out to edges */
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Without this, scroll-snap-align: start on the first slide snaps to the
       track's true edge (ignoring its own left padding), so a manual swipe
       past the padded position snaps right back to the flush/no-padding spot. */
    scroll-padding-left: 1.5rem;
    scroll-padding-right: 1.5rem;

    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;

    /* No explicit touch-action here on purpose: the default lets the
       browser disambiguate a touch gesture by its actual direction — a
       horizontal drag scrolls this track, a vertical drag bubbles to the
       page. Forcing touch-action:pan-x (a prior attempt) instead disabled
       vertical panning on this element outright, which is what made it
       hard to keep scrolling the page down once a finger landed on a slider. */
    -webkit-overflow-scrolling: touch;
  }

  .slider-wrapper .slider-track::-webkit-scrollbar {
    display: none;
  }
  
  .slider-wrapper .slider-track.active {
    cursor: grabbing;
  }

  .slider-wrapper .slider-track .mobile-slide {
    flex: 0 0 90% !important; /* Card takes 90% of screen width — same for every slide,
                       including the first, so it gets the same edge padding
                       and next-slide peek as the paired slides. */
    width: 90% !important;
    scroll-snap-align: center;
    height: 420px; /* was 520px — barely fit on a phone screen alongside nav/next section */
  }

  /* First slide can't actually be centered (nothing precedes it), so instead
     of relying on scroll-snap-align: center (which behaves inconsistently
     for the very first item across browsers), pin it to the left edge —
     matching the page's padding, and teasing the next slide on the right. */
  .slider-wrapper .slider-track .mobile-slide--first {
    scroll-snap-align: start;
  }

  .slider-wrapper .slider-track .mobile-slide .portfolio-item {
    width: 100%;
    height: 100%;
    transform: none !important; /* Disable hover lifts */
  }

  /* projekti2: every slide after the first stacks two projects top/bottom
     within the same slide height instead of one project per slide. */
  .slider-wrapper .slider-track .mobile-slide--pair {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .slider-wrapper .slider-track .mobile-slide--pair .portfolio-item {
    height: calc(50% - 6px);
  }

  /* Stacked pair cards are too small to rely on the "centered slide reveals
     caption" trick (both cards share the same horizontal center), so their
     captions stay visible all the time instead. */
  .slider-wrapper .slider-track .mobile-slide--pair .portfolio-item__overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .slider-nav-wrap {
    display: flex !important;
  }
  .slider-nav-wrap .slider-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
  }

  .products-hero {
    height: auto !important;
    min-height: 300px !important;
    padding-top: 95px !important; /* Offset for mobile header */
    padding-bottom: 2.5rem !important; /* Bottom padding so text never touches the bottom */
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
  }


  .products-hero__content {
    padding: 0 1.5rem !important;
  }

  /* The combo box's inline margin-top: 3rem is sized for the tall desktop
     hero; against the compact 300px mobile hero it reads as a huge gap
     between the description and the filter dropdown. */
  .products-hero #categoryComboBox {
    margin-top: 1.25rem !important;
  }

  /* On mobile sliders, hide default featured overlay since it should move dynamically */
  .slider-wrapper .slider-track .portfolio-item--featured:not(.active-slide) .portfolio-item__overlay {
    opacity: 0;
    transform: translateY(4px);
  }
  
  /* Show overlay on the active slide */
  .slider-wrapper .slider-track .portfolio-item.active-slide .portfolio-item__overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .slider-wrapper .slider-track .mobile-slide {
    flex: 0 0 90% !important; /* Card takes 90% of screen width */
    width: 90% !important;
    height: 380px; /* was 460px */
  }

  .slider-wrapper .slider-track .mobile-slide--pair .portfolio-item {
    height: calc(50% - 6px);
  }

  .slider-nav.prev-btn { left: 0px; }
  .slider-nav.next-btn { right: 0px; }
}


.filter-group {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .filter-group {
    flex-direction: column;
    width: 100%;
  }
}

.home-project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.home-project-filters .filter-btn {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius);
  padding: 0.65rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-project-filters .filter-btn:hover {
  border-color: #111111;
  background-color: #fafafa;
}

.home-project-filters .filter-btn.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.home-project-filters .filter-btn--cta {
  color: var(--c-teal);
  border-color: var(--c-teal);
}

.home-project-filters .filter-btn--cta:hover {
  background-color: var(--c-teal);
  color: #ffffff;
  border-color: var(--c-teal);
}


/* ============================================
   PAR MUMS — OWNER BLOCKS
   ============================================ */
.owner-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: stretch;
  margin-top: 2rem;
}

/* Text stays flush against the section's left edge regardless of which
   side the image sits on — swap grid order instead of using flex-reverse. */
.owner-block__media {
  order: 1;
}

.owner-block__body {
  order: 2;
}

.owner-block--reverse .owner-block__media {
  order: 2;
}

.owner-block--reverse .owner-block__body {
  order: 1;
}

.owner-block__media {
  position: relative;
  /* No explicit height: the grid's align-items:stretch already sizes this box
     to match the row height, which the text column (left side) determines. */
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0ee;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.owner-block__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.owner-block__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.owner-block:hover .owner-block__media img {
  transform: scale(1.03);
}

.owner-block__body {
  max-width: 480px;
}

.owner-block--reverse .owner-block__body {
  justify-self: start;
}

.owner-block__role {
  display: block;
  color: var(--c-teal);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.owner-block__name {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 300;
  margin-bottom: 0.5rem;
  color: var(--c-text-dark);
}

.owner-block__body p {
  color: var(--c-text-body);
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.owner-block__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .owner-block,
  .owner-block--reverse {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
  }

  .owner-block__media,
  .owner-block--reverse .owner-block__media,
  .owner-block__body,
  .owner-block--reverse .owner-block__body {
    order: initial;
  }

  .owner-block__media {
    aspect-ratio: 16/10;
    min-height: 0;
  }

  .owner-block__body {
    max-width: none;
  }
}

/* ============================================
   PAR MUMS — STATS SECTION (like homepage map section, no map, light bg)
   ============================================ */
.pm-stats-section {
  background: var(--c-bg-alt);
  padding: 4.5rem 0 3rem;
}

.pm-stats__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

.pm-stats__left .section-title {
  margin-bottom: 1.5rem;
}

.pm-stats__right {
  display: flex;
  justify-content: flex-start;
}

.pm-stats-section .about__stats-grid {
  max-width: 800px;
  gap: 2rem 4.5rem;
  margin-bottom: 0;
}

.pm-stats-section .about-stat-value,
.pm-stats-section .stat-num,
.pm-stats-section .stat-plus {
  color: var(--c-text-dark);
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
}

.pm-stats-section .about-stat-label {
  color: var(--c-teal);
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .pm-stats__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ============================================
   PAR MUMS — DECADE TIMELINE
   ============================================ */
.timeline-intro {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 3rem 1rem;
  text-align: center;
  background: #ffffff;
}

.timeline-track {
  position: relative;
}

.timeline-decade {
  padding: 2.5rem 0;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.timeline-decade__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 4rem;
  align-items: center;
}

.timeline-decade__spacer {
  height: 100%;
  min-height: 120px;
}

/* One continuous spine spans the whole track, behind all 3 decades */
.timeline-track__spine {
  position: absolute;
  top: 0;
  /* extends past the track's own bottom edge, so the final marker lands
     right where the outro's "Šodien" label starts, not stranded at the seam */
  bottom: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  max-width: calc(50% - 3rem);
  z-index: 0;
  pointer-events: none;
}

.timeline-line {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.timeline-line__dash {
  stroke: currentColor;
  opacity: 0.2;
}

.timeline-line__solid {
  stroke: var(--c-teal);
  fill: none;
}

.timeline-track__marker {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  background: var(--c-teal);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.timeline-track__marker--final {
  width: 72px;
  height: 72px;
  font-size: 0.95rem;
  background: #ffffff;
  color: var(--c-teal);
  border: 3px solid var(--c-teal);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.timeline-decade__years {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-teal);
  font-weight: 400;
  margin-bottom: 1.25rem;
  text-transform: none;
}

.timeline-decade__title {
  font-size: var(--text-h3);
  margin-bottom: 0.5rem;
  font-weight: 300;
}

.timeline-decade__content p {
  line-height: 1.7;
  margin-bottom: 1rem;
  color: inherit;
  opacity: 0.8;
  max-width: 640px;
}

.timeline-decade__content p:last-child {
  margin-bottom: 0;
}

.timeline-decade__empty {
  display: block;
}

@media (max-width: 768px) {
  .timeline-decade__inner {
    grid-template-columns: 48px 1fr !important;
    gap: 1.75rem;
  }

  .timeline-decade__empty {
    display: none !important;
  }

  .timeline-decade__content {
    grid-column: 2 !important;
  }

  .timeline-decade__spacer {
    grid-column: 1 !important;
    min-height: 320px;
  }

  .timeline-track__spine {
    left: 24px;
    transform: none;
    width: 48px;
    max-width: 48px;
  }

  .timeline-track__marker {
    width: 50px;
    height: 50px;
    font-size: 0.8rem;
  }

  .timeline-track__marker--final {
    width: 60px;
    height: 60px;
    font-size: 0.82rem;
  }

  .timeline-decade__years {
    font-size: 0.85rem;
  }
}

/* ============================================
   PAR MUMS — TIMELINE OUTRO (white, follows the 3rd/white decade)
   ============================================ */
.timeline-outro {
  background: transparent;
  padding: 3rem 0 7.5rem;
  text-align: center;
}

.timeline-outro__inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 3rem;
}

.timeline-outro .section-title {
  font-size: var(--text-h2);
  margin-bottom: 1.5rem;
}

.timeline-intro .section-title {
  font-size: var(--text-h2);
}

/* ============================================
   KONTAKTI — TEAM
   ============================================ */
.team-group {
  margin-top: 4rem;
}

.team-group:first-of-type {
  margin-top: 0;
}

.team-group__title {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-text-dark);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.25rem 2rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 206, 209, 0.2);
}

.team-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s var(--ease);
}

.team-card:hover .team-card__avatar {
  transform: scale(1.05);
}

.team-card__avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #243738;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.team-card__name {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-text-dark);
  margin-bottom: 0.35rem;
}

.team-card__role {
  display: block;
  font-size: 0.85rem;
  color: var(--c-teal);
  font-weight: 400;
  margin-bottom: 1.5rem;
  text-transform: none;
}

.team-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.team-card__contact {
  font-size: 0.88rem;
  color: var(--c-text-body);
  transition: color 0.3s ease, padding-left 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.team-card__contact:hover {
  color: var(--c-teal);
  padding-left: 4px;
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .team-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1.25rem;
    padding: 0.5rem 0 1.25rem 0;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }
  
  .team-grid::-webkit-scrollbar {
    display: none;
  }
  
  .team-grid .team-card {
    flex: 0 0 82%; /* Card takes 82% of screen width */
    scroll-snap-align: center;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  }

  .team-group {
    margin-top: 6rem !important;
  }

  .slider-nav-wrap .oc-arrow {
    display: flex !important;
  }
}

/* Panel is now short (single-row team cards, no group heading below) —
   don't force it to fill the viewport, or it leaves a large empty gap
   before the next stacked panel. */
.stack-panel:has(.section--team-grid) {
  min-height: unset;
}

/* Kontakti team row: always a single row of 4, never 2x2. Above 1024px the
   cards just shrink to fit. At/below 1024px, once they'd start getting
   cramped, switch to a horizontally scrollable/swipeable strip instead of
   wrapping, with prev/next buttons underneath (same pattern as the mobile
   "realizētie projekti" slider). */
@media (max-width: 1200px) and (min-width: 1025px) {
  #komanda .team-grid {
    gap: 1rem;
  }

  #komanda .team-card {
    padding: 1.15rem 1rem;
  }
}

@media (max-width: 1024px) {
  #komanda .slider-nav-wrap {
    display: flex !important;
  }

  #komanda .team-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
  }

  #komanda .team-grid::-webkit-scrollbar {
    display: none;
  }

  #komanda .team-card {
    flex: 0 0 45%;
    /* "start" (not "center") so the next/prev button JS — which scrolls to
       align a slide's left edge with the track's left edge — lands exactly
       on the intended card instead of the browser's snap re-centering
       pulling the scroll position onto a different one. */
    scroll-snap-align: start;
    padding: 1.15rem 1rem;
  }
}

@media (max-width: 560px) {
  #komanda .team-card {
    flex: 0 0 70%;
  }
}

/* ============================================
   KONTAKTI — MAP
   ============================================ */
.section--map {
  padding-top: 7.5rem;
}

.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.map-card__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: #111111;
  color: #ffffff;
}

.map-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(0, 206, 209, 0.2);
}

.map-card__label strong {
  display: block;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

.map-card__label span {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.map-card__frame {
  width: 100%;
  aspect-ratio: 21/9;
}

.map-card__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.3) contrast(1.05);
}

@media (max-width: 768px) {
  .map-card__frame {
    aspect-ratio: 4/3;
  }
}

/* ============================================
   KONTAKTI — CONTACT COLUMNS (phone/email + rekvizīti)
   ============================================ */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-methods--rekviziti .c-method {
  cursor: pointer;
}

.contact-methods--rekviziti .c-method a {
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .contact-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================
   PAR MUMS — MŪSU PIEEJA (reduced top padding, less empty space above)
   ============================================ */
.section--values {
  padding-top: 0;
}

/* VALUE CARDS — styled like the risinajumi.html solution cards, each with its own image,
   image and text half sized evenly instead of a fixed 200px image slot */
.solutions-grid--values {
  margin-bottom: 0;
  margin-top: 4rem;
}

.solution-card--plain {
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.solution-card--plain .sol-card__img-wrap {
  height: 220px;
  flex: 0 0 auto;
}

.solution-card--plain .sol-card__content {
  flex: 1 1 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.solution-card--plain .sol-card__desc {
  margin-bottom: 0;
}

.solutions-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Ieguvumi cards ("Kas garantē projekta unikalitāti") get a taller image
   and a narrower description column than the default value-card layout. */
.section--benefits .solution-card {
  height: auto;
  overflow: visible;
}

.section--benefits .sol-card__img-wrap {
  height: 256px; /* 80% of the original 320px — card/text spacing unchanged */
}

.section--benefits .sol-card__desc {
  max-width: 60%;
}

@media (max-width: 700px) {
  .section--benefits .sol-card__img-wrap {
    height: 176px; /* 80% of the original 220px */
  }

  .section--benefits .sol-card__desc {
    max-width: 100%;
  }
}

.solution-card--plain.benefit-open {
  cursor: pointer;
}

.solution-card--plain .sol-card__content {
  gap: 1.25rem;
}

.sol-card__more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--c-text-muted);
  transition: color 0.25s var(--ease);
}

.solution-card--plain.benefit-open:hover .sol-card__more,
.solution-card--plain.benefit-open:focus-visible .sol-card__more {
  color: var(--c-teal);
}

.sol-card__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.solution-card--plain.benefit-open:hover .sol-card__more-icon,
.solution-card--plain.benefit-open:focus-visible .sol-card__more-icon {
  border-color: var(--c-teal);
  background: var(--c-teal);
  color: #ffffff;
  transform: rotate(90deg);
}

@media (max-width: 700px) {
  .solutions-grid--2col {
    grid-template-columns: 1fr;
  }
}



/* --- REKVIZĪTI: single block, one "copy all" button --- */
.requisites-box--single {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
  /* no padding/background — flush with the headline's left edge like the rest of the page */
}

.requisites-box__line {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-body);
  line-height: 1.5;
}

.requisites-box__line--gap-before {
  margin-top: 0.85rem;
  /* extra breathing room between the legal address and the bank details group */
}

.requisites-box__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
  text-transform: none;
}

.requisites-box__value {
  font-size: 1.02rem;
  color: var(--c-text-dark);
}

.requisites-box__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 1.05rem 1.5rem;
  /* matches .btn's vertical padding so it's the same height as the Maps/Waze buttons */
  border-radius: var(--radius-btn);
  border: 1px solid var(--c-border);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-text-dark);
  background: #ffffff;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.requisites-box__copy-btn:hover {
  background: var(--c-text-dark);
  border-color: var(--c-text-dark);
  color: #ffffff;
  opacity: 1;
}

.requisites-box__copy-btn .copy-icon {
  width: 15px;
  height: 15px;
}

.contact-socials--requisites {
  margin-top: 1.5rem;
}

/* --- MAP DIRECTIONS BUTTONS --- */
.map-directions-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.map-directions-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.map-directions-btn img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .map-directions-buttons {
    flex-direction: column;
  }
}

.section--contact#contact {
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}

/* Ensure the contact stack panel sits above the footer so dropdowns are not cropped */
.stack-panel:has(.section--contact),
.stack-panel:has(#contact) {
  z-index: 20 !important;
}

/* Card link standardizations */
a.oc-card, a.solution-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
a.oc-card:hover, a.solution-card:hover {
  text-decoration: none;
  color: inherit;
}
span.learn-more-link, span.sol-card__link {
  position: relative;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-teal);
  transition: color 0.3s;
  display: inline-block;
}
a.oc-card:hover span.learn-more-link, a.solution-card:hover span.sol-card__link {
  color: var(--c-teal-dark);
}

/* Spacing and layout refinements */
.section--materials-band {
  padding: 2.5rem 0 !important;
}
.section--other-solutions {
  padding-top: 1.5rem !important;
}

/* Project modal thumbnails stretch layout */
.project-modal__thumbs--stretch {
  flex-wrap: nowrap !important;
}
.project-modal__thumbs--stretch .project-modal__thumb {
  flex: 1 1 0% !important;
  width: 0 !important;
  height: 55px !important;
}

/* Project modal bottom navigation responsive states */
.modal-bottom-nav--mobile {
  display: none !important;
}
.modal-bottom-nav--desktop {
  display: flex !important;
}

@media (max-width: 1024px) {
  .modal-bottom-nav--desktop {
    display: none !important;
  }
  .modal-bottom-nav--mobile {
    display: flex !important;
    margin-top: 2rem !important;
    justify-content: flex-start !important;
  }
}

/* Footer policy link hover color */
.footer__policy-link:hover {
  color: #ffffff !important;
}

/* Requisites anchor scroll offset for fixed header and background transparent */
#rekviziti {
  scroll-margin-top: 90px !important;
  background: transparent !important;
}


/* Solution Showcase Caption Gradient */
.showcase-slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}
.showcase-slide__caption {
  z-index: 5; /* Ensure text is above the gradient */
}

/* Mobile Accordion, Timeline & Showcase Adjustments */
@media (max-width: 768px) {
  /* Accordion height fix: make items stack naturally and hug content on mobile */
  .products-accordion .p-acc__item {
    flex: none !important;
    height: auto !important;
    padding: 1.5rem 1.5rem !important;
  }
  .products-accordion .p-acc__item .p-acc__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
  }
  .products-accordion .p-acc__item.active .p-acc__body {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-top: 1rem;
  }

  /* Solution Showcase: Keep the section headline visible at the top */
  .section--solution-showcase .process-split__right {
    display: block !important;
    order: 1 !important;
    margin-bottom: 0;
  }
  .section--solution-showcase .process-split__right .process-list {
    display: none !important;
  }
  /* Headline's own inline margin-bottom (3.5rem, sized for the desktop list
     below it) is what was actually causing the big gap before the image. */
  .section--solution-showcase .process-header {
    margin-bottom: 1rem !important;
  }
  .section--solution-showcase .process-image-container {
    order: 2 !important;
  }
  .section--solution-showcase .showcase-btn-group--mobile {
    order: 3 !important;
  }

  /* Narrow left spine alignment */
  .timeline-track__spine {
    left: 24px !important;
    width: 48px !important;
    max-width: 48px !important;
    transform: none !important;
  }

  /* Center all markers horizontally on the spine line */
  .timeline-track__marker {
    left: 50% !important;
  }

  /* Shift the first three markers much higher to align with description headlines */
  .timeline-track__marker:not(.timeline-track__marker--final) {
    transform: translate(-50%, calc(-50% - 130px)) !important;
  }

  /* Position Today ball slightly lower so it aligns correctly */
  .timeline-track__marker--final {
    top: 96% !important;
    transform: translate(-50%, -50%) !important;
  }

  .timeline-decade {
    padding: 1rem 0 !important;
  }

  /* Increase gap between 2008 and 2018 descriptions to match 1998-2008 gap */
  #decade-2 {
    padding-bottom: 3.5rem !important;
  }

  .timeline-decade__spacer {
    min-height: 100px !important;
  }
  
  /* Lower descriptions for decade 1 and 3 to line up with their balls */
  #decade-1 .timeline-decade__content {
    transform: translateY(120px) !important;
  }
  #decade-2 .timeline-decade__content {
    transform: translateY(80px) !important;
  }
  #decade-3 .timeline-decade__content {
    transform: translateY(120px) !important;
  }

  /* Both intro and outro headlines align to the left margin on mobile
     (desktop keeps them centered) */
  .timeline-intro {
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    /* pushed down and tucked closer to the track below it */
    padding-top: 3.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .timeline-outro {
    padding-top: 11.5rem !important;
    text-align: left !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    position: relative;
  }
  .timeline-outro__inner {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* avoid stacking with .timeline-outro's own 1.5rem padding, so the final
       headline sits exactly as close to the edge as the first headline */
  }
}