/* ============================================================================
   Webmasters — "04 Geometric W" design system, ported from the original
   Claude-Design React/inline-styles build to plain CSS (no Tailwind, no Node).
   ========================================================================== */

:root {
  --teal: #19B0C4;
  --teal-deep: #0f8a99;
  --teal-ink: #08454f;
  --lime: #C9DA1F;
  --lime-deep: #a3b212;
  --ink: #0e0f12;
  --paper: #fbfaf6;
  --cream: #f3efe5;
  --slate: #1a1d24;
  --line: #e6dfcd;
  --muted: #7a6f57;
  --body: #3a3530;
  --maxw: 1280px;

  --sans: 'Manrope', -apple-system, system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
::selection { background: var(--lime); color: var(--ink); }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--cream); border-radius: 999px; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 90px 0; position: relative; }
.section--tight { padding: 60px 0; }
.section--lg { padding: 110px 0; }
.section--white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.relative { position: relative; }
.z1 { position: relative; z-index: 1; }

/* isolate page bg-shapes behind content */
.page { position: relative; isolation: isolate; }

/* ── typography ─────────────────────────────────────────────────────────── */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.display { font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; }
.mono { font-family: var(--mono); }

.h1 {
  font-family: var(--sans); font-weight: 800;
  /* 1.04, not the design's 0.94: Latvian stacks a macron on the next line
     under a descender — "Rīgā" sits below "Mājaslapu" and the ī touched the j.
     Same collision waits in German (Größe) and in any Ā/Ū that follows a g. */
  font-size: clamp(52px, 8vw, 100px); line-height: 1.04; letter-spacing: -0.05em; margin: 0;
}
/* The home hero. Its four fields used to be separated by hard <br>, which set
   the shape for Latvian and let every longer language overflow into extra
   lines. Balancing lets each language find its own break points and keeps them
   even, so none ends on a single orphaned word. */
.h1--hero { text-wrap: balance; }
.h2 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px); line-height: 0.98; letter-spacing: -0.04em; margin: 0;
}
.h3 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.035em; margin: 0;
}
/* A word longer than the line has nowhere to go and pushes the whole page
   sideways: "Datenschutzerklärung" at the 52px floor is 520px wide on a 390px
   phone, and the German About and privacy pages scrolled by 136px and 109px.
   break-word only acts when the word cannot fit at all, so normal wrapping and
   the balanced hero are untouched. */
.h1, .h2, .h3 { overflow-wrap: break-word; }

/* On a phone a long word has to break somewhere, so let it break at a syllable
   with a hyphen rather than mid-word. Scoped to narrow screens: at desktop
   widths the words fit and headings should stay unhyphenated. The browser uses
   the document's lang, which is per-locale, so German hyphenates as German. */
@media (max-width: 700px) {
  .h1, .h2, .h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Grid and flex children are min-width:auto by default — their minimum is the
   widest word inside them. One long service title then makes the card wider
   than the screen. */
.grid > *, .card-hover, .card-hover > * { min-width: 0; }
.card-hover { overflow-wrap: break-word; }

.lead { font-size: 19px; line-height: 1.55; color: var(--body); }
.dot { color: var(--teal); }
.dot-lime { color: var(--lime); }

/* squiggle underline */
.squiggle { position: relative; display: inline-block; white-space: nowrap; }
.squiggle > svg {
  position: absolute; left: -6px; right: -6px; bottom: -0.08em;
  width: calc(100% + 12px); height: 12px; overflow: visible; pointer-events: none;
}

/* eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.eyebrow--dark { border-color: rgba(255,255,255,.6); color: #fff; }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--teal); }

.section-head { margin-bottom: 48px; }
.section-head--center { text-align: center; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  transition: transform .14s ease, opacity .14s, background .14s, color .14s;
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 10px 16px; font-size: 13px; }
.btn--lg { padding: 15px 26px; font-size: 14px; }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--lime { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.btn--teal { background: var(--teal); color: var(--ink); border-color: var(--ink); }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--lime-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ── header ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50; padding: 18px 24px 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.header.is-hidden { transform: translateY(-130%); }
.header__bar {
  max-width: var(--maxw); margin: 0 auto; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 20px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 999px;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.header.is-scrolled .header__bar {
  background: rgba(255,255,255,0.92); border-color: var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav a:hover { background: #e9e4d6; }
.nav a.is-active { color: #fff; background: var(--ink); }

/* Services mega-dropdown */
.nav-mega { position: relative; display: flex; align-items: center; }
.nav-mega__toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-mega__toggle:hover { background: #e9e4d6; }
.nav-mega__toggle.is-active { color: #fff; background: var(--ink); }
.nav-mega__chev { transition: transform .18s; margin-top: 1px; }
.nav-mega__chev.is-open { transform: rotate(180deg); }
.nav-mega__panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: 720px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
  padding: 14px; z-index: 60;
  /* translateX(-50%) is identical in both states, so only opacity and the
     small vertical slide animate — the panel never shifts sideways. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
}
.nav-mega__panel.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease;
}
/* Invisible bridge so the pointer can cross the gap without the panel closing */
.nav-mega__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-mega__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 2px; }
.megaitem {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 14px; border-radius: 14px; transition: background .13s;
}
.megaitem:hover { background: var(--cream); }
.megaitem__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #eef4f0; color: var(--teal-deep);
  transition: background .13s, color .13s;
}
.megaitem:hover .megaitem__icon { background: var(--ink); color: var(--lime); }
.megaitem__title {
  font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25;
  min-width: 0; overflow: hidden;
  /* Wrap to a second line rather than cut a service name with an ellipsis */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nav-mega__all {
  display: block; margin-top: 8px; padding: 11px 12px;
  border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
  font-size: 13px; font-weight: 700; color: var(--teal-deep); text-align: center;
}
.nav-mega__all:hover { color: var(--ink); background: var(--cream); }

/* Services submenu inside the mobile drawer */
.mlink--toggle { width: 100%; border: none; cursor: pointer; font: inherit; text-align: left; }
.mobile-sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px 8px; }
.mobile-sub .msub {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #3a3530;
}
.mobile-sub .msub:hover { background: #e9e4d6; }
.mobile-sub .msub--all { color: var(--teal-deep); font-weight: 700; }
.header__actions { display: flex; align-items: center; gap: 12px; }

.langswitch { display: inline-flex; gap: 2px; }
.langswitch a {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em; transition: all .14s;
}
.langswitch a:hover { background: rgba(0,0,0,.07); }
.langswitch a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.burger {
  display: none; width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); background: transparent;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0;
  transition: background .14s;
}
.burger:hover { background: rgba(0,0,0,.06); }
.burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .18s, opacity .18s, background .18s; }
.burger.is-open { background: var(--ink); }
.burger.is-open span { background: var(--lime); }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  pointer-events: auto; max-width: var(--maxw); margin: 10px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12); padding: 14px;
  /* With the services list expanded the panel is taller than the screen, and it
     had nowhere to scroll — so the swipe went to the page behind it. It scrolls
     itself now, and overscroll-behavior stops the gesture chaining onward when
     it reaches either end. dvh, not vh, because the iOS toolbars come and go. */
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* No overflow:hidden on html/body while the menu is open, tempting as it is:
   the header is position:sticky, and hiding the document's overflow takes away
   the scrolling ancestor sticky depends on. The header then scrolled away with
   the page and took the whole panel off-screen. The panel scrolling itself,
   with overscroll-behavior above, is what the fix rests on. */
.mobile-menu__links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu .mlink {
  padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 700;
  background: var(--cream); display: flex; justify-content: space-between; align-items: center;
  transition: background .14s;
}
.mobile-menu .mlink:hover { background: #e9e4d6; }
.mobile-menu .mlink.is-active { color: #fff; background: var(--ink); }
.mobile-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ── background W shapes ─────────────────────────────────────────────────── */
.bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .5; z-index: 0; }
.bg-shapes .shape { position: absolute; }

/* ── cards / grids ──────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.card-hover { transition: transform .15s, box-shadow .15s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.1); }

/* service card */
.svc-card {
  border-radius: 20px; padding: 24px; min-height: 210px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink); transition: transform .15s;
}
.svc-card:hover { transform: translateY(-4px); }
.svc-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.badge { padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; }

/* project card */
.proj-card { display: block; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.1); }
.proj-card__band { height: 160px; position: relative; overflow: hidden; }
.proj-card__band--tall { height: 200px; }
.proj-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }

/* blog card */
.blog-card { background: var(--cream); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-height: 290px; color: var(--ink); transition: transform .15s; }
.blog-card:hover { transform: translateY(-4px); }
.imgslot--image { padding: 0; overflow: hidden; background: var(--cream); }
.imgslot--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgslot {
  display: flex; align-items: flex-end; padding: 10px; height: 120px; border-radius: 12px;
  font-family: var(--mono); font-size: 10px; color: rgba(0,0,0,.35);
  letter-spacing: .04em; text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg, #e7e2d6 0 14px, rgba(25,176,196,.14) 14px 28px);
}

/* pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s;
}
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-on:hover { opacity: .88; }

/* faq accordion */
.faq { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 700; color: var(--ink); text-align: left; transition: background .14s;
}
.faq__q:hover { background: rgba(0,0,0,.028); }
.faq__plus {
  width: 30px; height: 30px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
  transition: transform .15s, background .14s; flex: none;
}
.faq.is-open .faq__plus { background: var(--lime); border-color: var(--ink); transform: rotate(45deg); }
.faq__a { padding: 0 24px 22px; font-size: 15px; line-height: 1.6; color: var(--body); }

/* forms */
.field { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: block; cursor: text; }
.field--dark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.field__label { font-size: 11px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.field input, .field textarea {
  width: 100%; border: none; outline: none; margin-top: 6px; font-size: 15px; color: var(--ink);
  font-family: inherit; background: transparent;
}
.field textarea { resize: vertical; min-height: 80px; }
.field--dark .field__label { color: #8b96a5; }
.field--dark input, .field--dark textarea { color: #fff; }

/* footer */
.footer { position: relative; margin-top: 120px; background: var(--ink); color: #fff; overflow: hidden; }
.footer a.flink { transition: color .14s; }
.footer a.flink:hover { color: var(--lime); }
.foot-col-title { font-size: 12px; color: var(--lime); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }

/* misc */
.rule { width: 1px; height: 14px; background: #d9d2c2; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; animation: wmPulse 1.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(25,176,196,.4); }
@keyframes wmPulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav, .header__actions { display: none !important; }
  .burger { display: flex !important; }
}
@media (min-width: 1001px) {
  .mobile-menu { display: none !important; }
}
@media (max-width: 1024px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-12 { grid-template-columns: repeat(6, 1fr) !important; }
  .split, .split-rev { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .section { padding: 56px 0; }
  .section--lg { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-12 { grid-template-columns: 1fr !important; }
  .h1 { font-size: clamp(34px, 11vw, 54px) !important; letter-spacing: -0.04em; }
  .h2 { font-size: clamp(28px, 8.5vw, 40px) !important; }
  .h3 { font-size: clamp(22px, 6.5vw, 32px) !important; }
  .hide-mobile { display: none !important; }
}

[x-cloak] { display: none !important; }

/* service grid with span-2 feature cards */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-grid .span2 { grid-column: span 2; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .svc-grid { grid-template-columns: 1fr; } .svc-grid .span2 { grid-column: auto; } }

/* clients block */
.clients { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.clients-col { border-right: 1px solid var(--line); padding-right: 48px; display: flex; flex-direction: column; }
.clients-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.gov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gov-tile { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.gov-tile__mark { height: 80px; display: flex; align-items: center; justify-content: center; }
.gov-tile__mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gov-tile__name { font-size: 11px; font-weight: 700; line-height: 1.25; color: #2d2926; text-align: center; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; align-content: start; }
.logo-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px; display: flex; align-items: center; justify-content: center; }
.logo-tile__inner { height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; }
.logo-tile__inner img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* <picture> is a layout-free wrapper: let the <img> stay the flex item. */
picture { display: contents; }
.logo-tile__ph { font-family: var(--mono); font-size: 11px; font-weight: 600; color: #9a927c; text-align: center; line-height: 1.2; }
@media (max-width: 1024px) {
  .clients { grid-template-columns: 1fr !important; gap: 34px; }
  .clients-col { border-right: none; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 30px; }
}
@media (max-width: 680px) {
  .gov-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* article prose */
.prose {
  font-size: 20px; line-height: 1.7; color: #2a2520;
  /* Justified, as the owner asked. Justification without hyphenation opens
     rivers of white space, and Latvian words are long — so hyphens: auto is
     part of the same decision, not a nicety. The document's lang attribute is
     what tells the browser which dictionary to use. */
  hyphens: auto; -webkit-hyphens: auto;
}
/* Justified at every width, as the owner asked. On a phone a line holds six or
   seven Latvian words, which is where justification usually opens gaps — the
   hyphenation above is what closes them, so the two settings belong together. */
.prose p, .prose li { text-align: justify; text-justify: inter-word; }

/* On a narrow column the browser's default hyphenation is too cautious: it
   refuses to split unless a good chunk is left on each side, so a long Latvian
   word jumps to the next line whole and the line it left behind stretches.
   Allowing shorter fragments gives it more places to break. */
@media (max-width: 700px) {
  .prose p, .prose li, .justified {
    hyphenate-limit-chars: 5 2 2;
    -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2;
  }
}

/* The same treatment for body text that is not inside .prose — the paragraph
   under "Ko Jūs saņemsiet" on every service page, and anywhere else a block of
   running text should sit flush. Hyphenation comes with it for the same reason
   it does above, and it stays ragged on a phone for the same reason too. */
.justified { hyphens: auto; -webkit-hyphens: auto; text-align: justify; text-justify: inter-word; }
/* Headings and the pull-quote stay ragged — justifying a short line stretches
   it into something that reads as a mistake. */
/* Headings inside an article body carry no class, so the .h1/.h2/.h3 rules do
   not reach them. hyphens: manual keeps them unhyphenated where they fit — but
   "Wiederherstellungsprozess" does not fit a phone at 30px, and the German
   guide scrolled sideways by 27px. Below 700px they may break. */
.prose h2, .prose h3, .prose blockquote { text-align: left; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 700px) {
  .prose h2, .prose h3 { hyphens: auto; -webkit-hyphens: auto; }
}
.prose h2 { font-family: var(--sans); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 36px 0 14px; }
.prose h3 { font-family: var(--sans); font-weight: 800; font-size: 21px; letter-spacing: -.01em; margin: 28px 0 10px; }
.prose p { margin: 0 0 18px; }
/* Links inside an article have to be findable while reading, not only on hover */
/* FAQ answers carry the same authored links as the body, so they get the
   same treatment — they sit outside .prose and would otherwise be plain. */
.prose a, .faq-answer a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(25,176,196,.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color .12s, text-decoration-color .12s, background-color .12s;
}
.prose a:hover, .prose a:focus-visible,
.faq-answer a:hover, .faq-answer a:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--lime);
  background: rgba(201,218,31,.22);
}
.prose ul { padding-left: 22px; line-height: 1.7; margin: 0 0 18px; }
.prose li { margin-bottom: 6px; }
/* pull-quote box — matches the design's mid-article quote */
.prose blockquote {
  margin: 40px 0; padding: 26px 30px;
  background: var(--cream); border-left: 3px solid var(--teal);
  border-radius: 0 14px 14px 0;
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.45;
}

/* contact map */
.map-card { display: grid; grid-template-columns: 1fr 1.4fr; min-height: 380px; }
.blog-featured { display: grid; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; } }

/* multi-column cards that must stack on small screens */
@media (max-width: 900px) {
  .owner-card { grid-template-columns: 1fr !important; }
  .owner-card > div:first-child { aspect-ratio: auto !important; min-height: 340px !important; max-height: 70vh; }
  /* the owner's bio: two columns of prose, and the competences grid */
  .owner-prose, .owner-skills { grid-template-columns: 1fr !important; }
  .cta-card { grid-template-columns: 1fr !important; padding: 40px 28px !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 34px !important; }
  .map-card { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr !important; }
}

/* stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 680px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat__n { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat__l { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: .04em; text-transform: uppercase; }

/* service detail: includes split, meta + pricing grids */
.includes-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.includes-grid--pinned { grid-template-columns: 1fr calc(50% - 8px); }
@media (max-width: 1024px) { .includes-grid, .includes-grid--pinned { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 680px) { .includes-grid, .includes-grid--pinned { grid-template-columns: 1fr; gap: 28px; } }
.meta-tiles, .pricing-grid { display: grid; gap: 16px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 680px) { .meta-tiles { grid-template-columns: 1fr !important; } }

/* two-column splits used across pages */
.split { display: grid; gap: 60px; align-items: start; }
.split--1-1 { grid-template-columns: 1fr 1fr; }
.split--1-15 { grid-template-columns: 1fr 1.5fr; }
.split--15-1 { grid-template-columns: 1.5fr 1fr; }
.split--11-1 { grid-template-columns: 1.1fr 1fr; }
.split--12-1 { grid-template-columns: 1.2fr 1fr; }
.split--14-1 { grid-template-columns: 1.4fr 1fr; }
.split--16-1 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1024px) {
  .split--1-1, .split--1-15, .split--15-1, .split--11-1, .split--12-1, .split--14-1, .split--16-1 { grid-template-columns: 1fr !important; gap: 40px; }
}


/* ── project cover band ─────────────────────────────────────────────────────
   The service pills sat inside the image, bottom-left. With five services they
   wrapped to three rows and covered the screenshot on a phone. They now sit
   under the image by default and only overlay it where there is room. */
.cover-wrap { position: relative; }
.cover-band {
  height: clamp(200px, 52vw, 360px);
  border-radius: 28px; position: relative; overflow: hidden;
}
.cover-tags {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px;
}
@media (min-width: 900px) {
  .cover-tags {
    position: absolute; left: 64px; right: 64px; bottom: 60px;
    gap: 10px; margin-top: 0;
  }
}