/* ==========================================================================
   init — demo mājaslapa
   Dizaina sistēma: krāsas, tipogrāfija, komponentes
   ========================================================================== */

:root {
  /* Krāsas */
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-alt: #f1f0ea;
  --surface-dark: #11140f;
  --ink: #171a14;
  --ink-soft: #4b5147;
  --ink-muted: #696c5f; /* darkened from #8a8c7f -- the old value was ~3.0-3.4:1 on bg/surface/surface-alt, failing WCAG AA (4.5:1) at the small sizes it's used at (nav, labels, hero stats); this hits ~4.7-5.4:1 */
  --line: #e3e1d6;
  --line-strong: #c9c6b6;

  --primary: #1f6b4f;
  --primary-strong: #164e3a;
  --primary-soft: #e7f0ea;
  --primary-soft-line: #c3dccc;
  --cursor: #2fae63;

  --status-good: #1f7a1f;
  --status-warning: #a3650a;
  --status-serious: #a34a1f;
  --status-critical: #a3301f;
  --status-good-soft: #e5f1e1;
  --status-warning-soft: #f6ead3;
  --status-serious-soft: #f3ddce;
  --status-critical-soft: #f3d9d3;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 1px rgba(23, 26, 20, 0.05);
  --shadow-md: 0 4px 14px rgba(23, 26, 20, 0.07);
  --shadow-lg: 0 10px 28px rgba(23, 26, 20, 0.1);

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 0.5em; line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code { font-family: var(--font-mono); }

h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 600; } /* was capped at 3.1rem (49.6px), under the brief's own 48-60px desktop target */
h2 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.2rem); font-weight: 600; }
h3 { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); font-weight: 600; }
.lede { font-size: 1.12rem; color: var(--ink-soft); font-family: var(--font-body); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 760px; }
.section { padding: 80px 0; }
.section--tight { padding: 52px 0; }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--surface-dark); color: #fff; }
.section-head { max-width: 680px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Kicker label — plain tracked small-caps text with a short rule, no pill/badge */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-strong);
  margin-bottom: 14px;
}
.kicker::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--primary); }
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::before { display: none; }
/* legacy alias kept so existing markup referencing .eyebrow still renders sensibly */
.eyebrow { all: unset; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-strong); margin-bottom: 14px; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--primary); vertical-align: middle; }
.section-head.center .eyebrow { justify-content: center; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.96rem;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-on-dark { background: #fff; color: var(--primary-strong); }
.btn-on-dark:hover { background: var(--primary-soft); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 9px 16px; font-size: 0.86rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.92);
  /* No backdrop-filter here on purpose: it creates a new containing block for
     any position:fixed descendant (the mobile .nav-links panel below), so the
     panel ends up fixed relative to this header box instead of the viewport
     -- its "top: 64px" then measures from the header's own top instead of the
     page's, collapsing the open panel to the very top of the page. */
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* top/bottom only -- "padding: 16px 0" shorthand would also zero out
     left/right, clobbering .container's 0 24px and pinning the logo/nav
     flush to the screen edge instead of lining up with page content. */
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.logo .logo-underscore { color: var(--cursor); animation: blink 1.1s steps(1) infinite; }
.heading-cursor { color: var(--cursor); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo .logo-underscore { animation: none; } }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* --- Nav items: mono/uppercase "system" treatment + bottom-border accent --- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-item:hover > a, .nav-item > a.active { color: var(--ink); border-color: var(--primary); }
.nav-caret { display: inline-flex; color: var(--ink-muted); transition: transform 0.15s ease; pointer-events: none; }
.nav-caret svg { width: 12px; height: 12px; }
.has-submenu:hover .nav-caret, .has-submenu:focus-within .nav-caret { transform: rotate(180deg); }

/* --- Mega-menu panel: service list (left) + CTA rail (right), B2B-style --- */
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(860px, 94vw);
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(23, 26, 20, 0.14);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
.has-submenu:hover .nav-panel, .has-submenu:focus-within .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Bridges the gap between the parent link and the panel so the hover state doesn't drop on the way down. */
.has-submenu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

.submenu {
  list-style: none;
  margin: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6px;
  padding: 14px;
  min-width: 0;
}
.submenu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 0.87rem; font-family: var(--font-body); text-transform: none; letter-spacing: normal; color: var(--ink); }
.submenu a:hover { background: var(--surface-alt); }
.submenu-icon { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--primary); }
.submenu-icon svg { width: 100%; height: 100%; }
.submenu-label { flex: 1; }

.nav-cta {
  flex: none;
  width: 200px;
  background: var(--primary-soft);
  border-left: 1px solid var(--primary-soft-line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.nav-cta h4 { font-family: var(--font-heading); font-size: 1.02rem; margin: 0; color: var(--primary-strong); line-height: 1.3; }
.nav-cta p { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.nav-cta a { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--primary-strong); display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: normal; border: none; padding: 0; }

.lang-switch { display: flex; gap: 2px; background: var(--surface-alt); border-radius: var(--radius-pill); padding: 3px; font-family: var(--font-mono); font-size: 0.8rem; }
.lang-switch a { padding: 5px 11px; border-radius: var(--radius-pill); color: var(--ink-muted); }
.lang-switch a.active { background: var(--surface); color: var(--ink); }

.nav-toggle { display: none; background: none; border: none; padding: 8px; }
.nav-toggle svg { width: 24px; height: 24px; }

/* Wider than the other 860px breakpoints below on purpose: the desktop nav's
   mono/uppercase, letter-spaced labels (Pakalpojumi / IT Pilots / IT
   pašnovērtējums / Par mums / Kontakti) plus the CTA button need more room
   than 860px to fit without wrapping or overflowing -- below 1024px they'd
   overlap/overflow with no hamburger fallback yet, since that only existed
   at <=860px. Mobile nav now kicks in before that squeeze zone. */
@media (max-width: 1024px) {
  /* Longhand top/right/bottom/left, not the "inset" shorthand -- inset needs
     Safari 14.1+/iOS 14.5+ (Apr 2021); without it position:fixed still
     applies but with no offsets, so the panel stays near its in-flow size
     instead of becoming a full-screen overlay. Longhand works everywhere. */
  .nav-links { position: fixed; top: 64px; right: 0; bottom: 0; left: 0; background: var(--bg); flex-direction: column; align-items: flex-start; padding: 24px; gap: 4px; transform: translateY(-110%); transition: transform 0.25s ease; overflow-y: auto; }
  .nav-item { width: 100%; }
  .nav-item > a { width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-links.is-open { transform: translateY(0); }
  .nav-toggle { display: inline-flex; }
  /* Mobile header bar is just logo (left) and hamburger (right). The CTA
     button was supposed to hide here already, but the old selector
     (.btn-secondary.only-desktop) no longer matched the actual .btn-primary
     button, so it was showing up and crowding the bar -- fixed below. The
     language switch (when a page has an EN counterpart set) hides here too
     and is reachable from inside the open nav panel instead. */
  .nav-actions .only-desktop { display: none; }
  .nav-actions .lang-switch { display: none; }

  /* No hover on touch: the panel is just always expanded, nested under its parent. */
  .nav-item { flex-direction: column; align-items: stretch; }
  .nav-caret { display: none; }
  .nav-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    width: auto; flex-direction: column;
  }
  .submenu { grid-template-columns: 1fr; padding: 0 0 0 16px; gap: 0; }
  .submenu a { border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-muted); }
  .nav-cta { display: none; }
  .has-submenu::after { display: none; }
}

/* ---------- Tech carousel ---------- */
.tech-strip { border-bottom: 1px solid var(--line); background: var(--surface); padding: 26px 0; overflow: hidden; }
.tech-strip-label { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 18px; }
.tech-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tech-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: tech-scroll 32s linear infinite; }
.tech-strip:hover .tech-track, .tech-strip:focus-within .tech-track { animation-play-state: paused; }
@keyframes tech-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tech-track { animation: none; } }

.tech-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; padding: 4px 2px; }
.tech-item img { height: 38px; width: auto; max-width: 120px; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; }
.tech-item:hover img, .tech-item:focus-visible img { filter: grayscale(0); opacity: 1; }
.tech-item span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 32px; max-width: 540px; color: var(--ink); font-weight: 500; } /* darker + one step heavier than the default .lede (--ink-soft/400 -- 500 is an actually-loaded weight, see the Google Fonts URL in functions.php) so it holds up visually next to the large hero photo */
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-trust { display: flex; gap: 28px; flex-wrap: nowrap; color: var(--ink-muted); font-size: 0.86rem; border-top: 1px solid var(--line); padding-top: 20px; }
/* Equal flexible share per item (not a fixed px width) so all 4 always stay
   on one row and are exactly the same width, however narrow the container
   gets -- min-width:0 overrides flex's default "never shrink below content
   width", which would otherwise force the row to wrap once the longest
   label ("veiksmīgi realizēti projekti") didn't fit. Labels wrap to a
   second line inside their own column instead of pushing the row to wrap. */
.hero-trust > div { flex: 1 1 0; min-width: 0; }
.hero-trust strong { color: var(--ink); font-family: var(--font-heading); font-size: 1.25rem; display: block; font-weight: 600; }
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.hero-badge {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(17,20,15,0.85); color: #fff;
  font-family: var(--font-mono); font-size: 0.78rem;
  padding: 9px 13px; border-radius: var(--radius-sm);
}

/* ---------- Homepage hero: full-bleed photo behind the transparent header ---------- */
.hero--photo { position: relative; padding-top: 72px; }
.hero--photo .hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
}
.hero--photo .hero-photo picture { display: block; height: 100%; }
.hero--photo .hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The "init_" sign/plant sit in the upper-right of the source photo -- as
     the viewport narrows, this box gets taller/narrower and object-fit:cover
     crops more off the left/right equally around the default 50% center,
     eventually cropping the sign out entirely. Anchoring well to the right
     keeps it in frame at any width (the box's full height always fits,
     cover never crops top/bottom here, so no vertical loss either). */
  object-position: 78% 22%;
  /* Fades the photo's own left edge into the section's plain background
     instead of a hard rectangular cut, so it reads as one continuous
     surface with the text column rather than a pasted-on card. */
  mask-image: linear-gradient(to right, transparent 0, #000 160px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 160px);
}
.hero--photo .container { position: relative; }
.hero--photo .hero-copy { max-width: 600px; padding-bottom: 72px; }
@media (max-width: 960px) {
  .hero--photo { padding-top: 40px; }
  /* No room for a side-by-side photo at this width, and a full-width stacked
     photo just pushed the actual hero text further down the page for no
     real benefit -- simplest is to not show it here at all. */
  .hero--photo .hero-photo { display: none; }
  .hero--photo .hero-copy { max-width: none; padding-bottom: 0; }
}

/* ---------- Sample / placeholder badges ---------- */
.sample-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--status-serious);
  border: 1px dashed var(--status-serious);
  padding: 4px 10px; border-radius: var(--radius-sm);
}
.placeholder-note {
  font-size: 0.85rem; color: var(--ink-muted); font-style: italic;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin-bottom: 16px;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.card .card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary-strong); font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid var(--primary-soft-line); padding-bottom: 1px; }

/* ---------- Numbered list (used for Problems + Why sections) ---------- */
.num-list { border-top: 1px solid var(--line); }
.num-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.num-item .n { font-family: var(--font-heading); font-size: 1.6rem; color: var(--line-strong); font-weight: 600; line-height: 1; }
.num-item h3 { margin-bottom: 6px; font-size: 1.05rem; }
.num-item p { color: var(--ink-soft); margin: 0; }
.num-item .solution { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.num-item .solution strong { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-strong); margin-bottom: 4px; }
@media (max-width: 640px) { .num-item { grid-template-columns: 40px 1fr; } .num-item .n { font-size: 1.2rem; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step-num {
  font-family: var(--font-heading); font-size: 1.7rem; color: var(--primary);
  font-weight: 600; display: block; margin-bottom: 14px; line-height: 1;
}
.step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ---------- Why section (shares .num-list / .num-item) ---------- */

/* ---------- Testimonials ---------- */
.testimonial-list { border-top: 1px solid var(--line); }
.testimonial { padding: 32px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
@media (max-width: 640px) { .testimonial { grid-template-columns: 1fr; } }
.testimonial .mark { font-family: var(--font-heading); font-size: 2.6rem; color: var(--primary-soft-line); line-height: 1; }
.testimonial blockquote { margin: 0 0 14px; font-size: 1.1rem; color: var(--ink); font-family: var(--font-heading); font-weight: 500; }
.testimonial-foot { display: flex; align-items: center; gap: 12px; }
.testimonial-person { font-size: 0.85rem; color: var(--ink-muted); font-family: var(--font-mono); }
.testimonial-person strong { color: var(--ink); font-family: var(--font-body); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.faq-q svg { flex: none; width: 18px; height: 18px; transition: transform 0.2s ease; color: var(--primary); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a-inner { padding: 0 2px 20px; color: var(--ink-soft); }
.faq-item.is-open .faq-a { max-height: 2000px; } /* generous cap, not a real height -- avoids clipping longer answers while still animating open/close */

/* ---------- Contact form ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; } }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--primary); }
.form-success { display: none; background: var(--status-good-soft); border: 1px solid var(--status-good); color: #163816; padding: 20px; border-radius: var(--radius-md); }
.form-success.is-visible { display: block; }
.form-success h3 { margin-bottom: 6px; color: #163816; }
.contact-info-item { display: flex; gap: 14px; margin-bottom: 20px; }
.contact-info-item .ico { flex: none; width: 34px; height: 34px; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.contact-info-item .ico svg { width: 20px; height: 20px; }
.contact-photo { margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden; }
.contact-photo picture { display: block; }
.contact-photo img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* ---------- Pricing / pilots ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.price-card { background: var(--surface); padding: 32px; display: flex; flex-direction: column; position: relative; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); z-index: 1; }
.price-card.is-featured { background: var(--primary-soft); }
.price-card.is-featured .tier-name::after { content: "Ieteicamākais"; margin-left: 10px; font-size: 0.68rem; color: var(--primary-strong); border: 1px solid var(--primary-soft-line); padding: 2px 7px; border-radius: var(--radius-sm); vertical-align: middle; }
.price-card .tier-name { font-family: var(--font-mono); color: var(--primary-strong); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.price-card .tier-price { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 4px; font-weight: 600; }
.price-card .tier-price span { font-size: 0.92rem; color: var(--ink-muted); font-family: var(--font-body); font-weight: 400; }
.price-card .tier-desc { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 22px; min-height: 44px; }
.price-card ul { margin-bottom: 26px; flex: 1; }
.price-card li { display: flex; gap: 10px; padding: 8px 0; font-size: 0.92rem; color: var(--ink); align-items: flex-start; }
.price-card li svg { flex: none; width: 16px; height: 16px; color: var(--primary); margin-top: 3px; }
.price-card li.is-muted { color: var(--ink-muted); }
.price-card li.is-muted svg { color: var(--line-strong); }

.compare-table-wrap { overflow-x: auto; margin-top: 60px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.92rem; }
.compare-table th { font-family: var(--font-heading); font-weight: 600; border-bottom: 2px solid var(--ink); }
.compare-table td.yes { color: var(--primary-strong); font-weight: 600; }
.compare-table td.no { color: var(--ink-muted); }
.compare-table tr td:first-child { color: var(--ink-soft); }

/* ---------- Simple price table (service subpages) ---------- */
.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.price-table th, .price-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.93rem; vertical-align: top; }
.price-table th { font-family: var(--font-heading); font-weight: 600; border-bottom: 2px solid var(--ink); }
.price-table td.price-cell { font-family: var(--font-mono); white-space: nowrap; font-weight: 600; color: var(--primary-strong); }

/* ---------- Service detail blocks ---------- */
/* align-items: stretch (grid's own default, set explicitly here since it's
   easy to assume "center" like the hero was) -- the photo fills the row's
   full height (set by whichever column is taller, usually the text), rather
   than keeping its own fixed 4:3 aspect-ratio and leaving empty space above
   and below the shorter column once the two don't match. */
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; padding: 56px 0; border-bottom: 1px solid var(--line); }
.service-block:last-child { border-bottom: none; }
.service-block.is-reverse .service-media { order: 2; }
@media (max-width: 860px) { .service-block, .service-block.is-reverse .service-media { grid-template-columns: 1fr; order: 0; } .service-block { grid-template-columns: 1fr; } }
.service-media picture { display: block; height: 100%; }
.service-media img { border-radius: var(--radius-lg); object-fit: cover; width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  /* height:100% needs an explicit-height ancestor -- stacked single-column
     on mobile, .service-media has no such height to fill, so fall back to a
     fixed aspect-ratio there instead of collapsing to 0. */
  .service-media img { height: auto; aspect-ratio: 4/3; }
}
.service-list { margin-top: 18px; }
.service-list li { display: flex; gap: 10px; padding: 7px 0; color: var(--ink-soft); font-size: 0.95rem; }
.service-list li svg { flex: none; width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { font-family: var(--font-mono); font-size: 0.74rem; border: 1px solid var(--line-strong); padding: 4px 10px; border-radius: var(--radius-sm); color: var(--ink-soft); }

/* ---------- Service groups (pakalpojumi overview split) ---------- */
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.group-head h2 { margin: 0; }
.group-head .group-note { color: var(--ink-muted); font-size: 0.92rem; font-family: var(--font-mono); }

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 1px; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-card { background: var(--surface); padding: 26px; display: flex; flex-direction: column; }
.tech-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.tech-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 16px; flex: 1; }
.tech-card .card-link { font-size: 0.88rem; }
.tech-card .tag { align-self: flex-start; margin-bottom: 12px; }

/* ---------- Pakalpojumi overview: hero choice cards + sticky group subnav ---------- */
/* Two equal-weight entry points into the two service groups below, so neither
   group depends on the user already having scrolled past the other to know
   it exists. Links to the groups' own anchors, not a tab switch -- both
   groups stay fully in the DOM and visible either way. */
.svc-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 40px; }
@media (max-width: 640px) { .svc-choice-row { grid-template-columns: 1fr; } }
.svc-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 22px 48px 22px 24px;
  transition: border-color 0.15s ease;
}
.svc-choice:hover, .svc-choice:focus-visible { border-color: var(--primary); }
.svc-choice-label { font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.svc-choice-desc { color: var(--ink-soft); font-size: 0.88rem; }
.svc-choice-arrow { position: absolute; top: 24px; right: 22px; color: var(--primary); font-size: 1.2rem; transition: transform 0.15s ease; }
.svc-choice:hover .svc-choice-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .svc-choice, .svc-choice-arrow { transition: none; } }
@media (prefers-reduced-motion: reduce) { .btn, .card, .price-card { transition: none; } }

/* Sticky under the site header (which is ~64px tall) so both stay visible
   while scrolling through either service group. */
.svc-subnav { position: sticky; top: 64px; z-index: 40; display: flex; gap: 8px; background: var(--bg); padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.svc-subnav-item {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.svc-subnav-item:hover { color: var(--ink); border-color: var(--primary); }
.svc-subnav-item.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }

/* Anchor targets land below both the sticky site header and the sticky
   subnav instead of right under the browser's top edge. */
#konsultacijas, #tehniskie { scroll-margin-top: 128px; }

/* Unified service card: same shell for both groups (icon, optional tag,
   title, description, CTA pinned to the bottom via margin-top:auto on
   .svc-foot) so card height/button position never depends on how long a
   given description happens to be. */
.svc-subgroup-head { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 16px; }
.svc-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .svc-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-card-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.svc-icon {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-strong);
  margin-bottom: 18px;
}
.svc-icon svg { width: 22px; height: 22px; }
/* Group A ("mūsu galvenais piedāvājums") gets the stronger, filled icon
   treatment; group B keeps the softer tint -- same card shell, a visual
   accent instead of a different component. */
.svc-card.is-primary .svc-icon { background: var(--primary); color: #fff; }
.svc-card .tag-row { margin-bottom: 12px; }
.svc-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.svc-card .svc-desc { color: var(--ink-soft); font-size: 0.92rem; flex: 1; margin-bottom: 20px; }
.svc-card .svc-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.svc-card .svc-price { font-family: var(--font-heading); font-weight: 600; color: var(--ink); }
.svc-card .svc-foot .btn { width: 100%; justify-content: center; }

/* ---------- Process steps (used in service subpages) ---------- */
.process-list { counter-reset: proc; border-top: 1px solid var(--line); }
/* Explicit grid placement, not auto-flow: .process-item has three grid items
   (the ::before counter, <h4>, <p>) going into a 2-column template -- left to
   auto-placement, the 3rd item (<p>) wraps to a new row in the narrow 48px
   column instead of staying in the 1fr text column, which word-wraps it down
   to one word per line. */
.process-item { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); counter-increment: proc; }
.process-item::before { content: counter(proc, decimal-leading-zero); grid-column: 1; grid-row: 1 / -1; font-family: var(--font-mono); color: var(--primary); font-size: 0.95rem; }
.process-item h4 { grid-column: 2; grid-row: 1; margin: 0 0 4px; font-size: 1rem; }
.process-item p { grid-column: 2; grid-row: 2; margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--surface-dark); color: #fff; border-radius: var(--radius-lg); padding: 52px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
/* .cta-band is shared across every service subpage -- this modifier (instead
   of changing .cta-band itself) swaps the flat near-black for a dark
   gradient over a photo on just the "Pakalpojumi" overview page's IT vadība
   band, without touching the other 12 pages that reuse the same component.
   The gradient stays strong enough (80-92% opaque) to keep the white text at
   WCAG-AA contrast regardless of the photo's own tones. */
.cta-band--photo {
  background: linear-gradient(135deg, rgba(17, 20, 15, 0.88), rgba(17, 20, 15, 0.72)), url("../img/server-room.jpg");
  /* image-set() support is what gates this -- unsupported browsers fail to
     parse the whole declaration and keep the JPEG fallback above. */
  background: linear-gradient(135deg, rgba(17, 20, 15, 0.88), rgba(17, 20, 15, 0.72)), image-set(url("../img/server-room.webp") type("image/webp"), url("../img/server-room.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,0.7); margin: 0; }
.cta-band .cta-price { display: block; margin-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-dark); color: rgba(255,255,255,0.72); padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); margin-bottom: 16px; font-weight: 500; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a:hover { color: #fff; }
.footer-logo { font-family: var(--font-mono); font-size: 1.15rem; color: #fff; margin-bottom: 14px; display: inline-block; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.footer-bottom a:hover { color: #fff; }

/* ---------- About page ---------- */
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-num { font-family: var(--font-heading); font-size: 1.3rem; color: var(--primary); font-weight: 600; flex: none; width: 34px; }

/* ---------- Redirect stub pages ---------- */
.redirect-note { max-width: 520px; margin: 120px auto; text-align: center; padding: 0 24px; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: none; margin: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: #fff; padding: 10px 18px; z-index: 200; border-radius: var(--radius-sm); }
.skip-link:focus { left: 16px; top: 16px; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }