/* ============================================================
   EIFFEL — shared site styles (components + layout)
   Requires tokens.css loaded first.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; }

::selection { background: var(--navy-900); color: #fff; }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--s8) 0; }
.section--soft { background: var(--bg-soft); }
.section--mist { background: var(--bg-mist); }

.kicker {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.h1 { font-size: var(--h1); font-weight: 800; line-height: 1.08; letter-spacing: var(--track-tight); text-wrap: balance; }
.h2 { font-size: var(--h2); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.h3 { font-size: var(--h3); font-weight: 700; line-height: 1.25; letter-spacing: var(--track-snug); }
.h4 { font-size: var(--h4); font-weight: 700; line-height: 1.3; letter-spacing: var(--track-snug); }
.h5 { font-size: var(--h5); font-weight: 700; line-height: 1.35; letter-spacing: var(--track-snug); }
.lead { font-size: var(--body-lg); color: var(--text-muted); line-height: 1.65; text-wrap: pretty; }
.muted { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--r-lg);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(157, 67, 0, 0.4); }
.btn--secondary { background: transparent; color: var(--navy-900); border: 1.5px solid var(--border-strong); }
.btn--secondary:hover { border-color: var(--navy-900); transform: translateY(-2px); }
.btn--on-dark { background: transparent; color: var(--on-dark); border: 1.5px solid var(--dark-line); }
.btn--on-dark:hover { border-color: var(--on-dark); transform: translateY(-2px); }
.btn--sm { height: 44px; padding: 0 22px; font-size: 0.9375rem; border-radius: var(--r-md); }
.btn .arr { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--body-sm); font-weight: 600; letter-spacing: 0.02em;
  color: var(--navy-900); text-decoration: none;
}
.link-arrow .arr { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: 76px;
  display: flex; align-items: center;
}
.site-header .container { display: flex; align-items: center; gap: 40px; width: 100%; }
.site-header--navy { background: var(--navy-900); color: var(--on-dark); }
.site-header--light { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); color: var(--text); border-bottom: 1px solid var(--border); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; }
.brand svg { display: block; }

.main-nav { display: flex; align-items: center; gap: 6px; flex: 1; }
.main-nav > .nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  border-radius: var(--r);
  color: inherit;
  opacity: 0.84;
  transition: opacity var(--dur-fast), background var(--dur-fast);
  background: none; border: none; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { opacity: 1; }
.site-header--navy .nav-link:hover, .site-header--navy .nav-link[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.site-header--light .nav-link:hover, .site-header--light .nav-link[aria-expanded="true"] { background: var(--bg-soft); }
.nav-link .chev { transition: transform var(--dur-fast) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-link.is-active { opacity: 1; box-shadow: inset 0 -2px 0 var(--navy-900); border-radius: var(--r) var(--r) 0 0; }
.site-header--navy .nav-link.is-active { box-shadow: inset 0 -2px 0 var(--on-dark); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  display: inline-flex; border: 1px solid; border-radius: var(--r-full); overflow: hidden;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
}
.site-header--navy .lang-toggle { border-color: var(--dark-line); }
.site-header--light .lang-toggle { border-color: var(--border); }
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  padding: 6px 12px; color: inherit; opacity: 0.55; letter-spacing: inherit; font: inherit;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.lang-toggle button.is-on { opacity: 1; }
.site-header--navy .lang-toggle button.is-on { background: rgba(255, 255, 255, 0.12); }
.site-header--light .lang-toggle button.is-on { background: var(--navy-900); color: #fff; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 10px; color: inherit; }

/* ---------- Mega menu ---------- */
.mega {
  position: absolute; top: calc(100% + 10px); left: -12px;
  min-width: 560px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.985);
  transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring), visibility 0s linear var(--dur-fast);
  z-index: 70;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega--narrow { min-width: 320px; grid-template-columns: 1fr; }
/* AA-contrast fix (WINDOWS #3): --text-faint measures 3.11:1 on light
   grounds, below the 4.5:1 floor — every light-ground usage below swapped to
   --text-muted (5.50-5.85:1, verified). Token definition unchanged (frozen);
   same precedent as .chapter__mark above. */
.mega-head { grid-column: 1 / -1; font-size: var(--label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); padding: 4px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.mega a {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  column-gap: 10px; row-gap: 2px;
  padding: 12px; border-radius: var(--r-md); text-decoration: none;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.mega a:hover { background: var(--bg-soft); }
.mega a:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--navy-900); }
.mega a .i { grid-row: 1 / span 2; align-self: center; width: 24px; height: 24px; color: var(--accent); display: grid; place-items: center; }
.mega a .i svg { width: 22px; height: 22px; }
.mega a .t { grid-column: 2; font-weight: 600; font-size: 0.9375rem; color: var(--navy-900); }
.mega a .d { grid-column: 2; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; }

/* ---------- Mobile overlay ---------- */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy-900); color: var(--on-dark);
  display: flex; flex-direction: column;
  padding: 20px 24px 40px;
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  overflow-y: auto;
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-overlay .mo-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.mobile-overlay .btn--primary { width: 100%; margin-bottom: var(--s4); }
.mo-group { border-bottom: 1px solid var(--dark-line); }
.mo-group > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  padding: 18px 0;
}
.mo-group > button .chev { transition: transform var(--dur-fast) var(--ease-out); }
.mo-group.is-open > button .chev { transform: rotate(180deg); }
.mo-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.mo-group.is-open .mo-sub { grid-template-rows: 1fr; }
.mo-sub > div { overflow: hidden; }
.mo-sub a { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 0 10px 8px; color: var(--on-dark-muted); text-decoration: none; font-size: 1rem; }
.mo-sub a:last-child { padding-bottom: 20px; }
.mo-sub a .i { grid-row: 1 / span 2; align-self: center; width: 24px; height: 24px; color: var(--on-dark); display: grid; place-items: center; }
.mo-sub a .i svg { width: 22px; height: 22px; }
.mo-sub a .t { grid-column: 2; font-weight: 600; }
/* AA-contrast fix (WINDOWS #5): --on-dark-faint measures 3.05:1 on
   --ink-950 / 2.83:1 on --navy-900, below the 4.5:1 floor — every
   normal-text usage below swapped to --on-dark-muted (5.34-6.07:1,
   verified). Token definition unchanged (frozen); same precedent as
   WINDOWS #3's --text-faint fix. */
.mo-sub a .d { grid-column: 2; font-size: 0.8125rem; color: var(--on-dark-muted); line-height: 1.4; }
.mo-link { display: block; padding: 18px 0; font-size: 1.25rem; font-weight: 700; color: inherit; text-decoration: none; border-bottom: 1px solid var(--dark-line); }

/* ---------- Hero (navy) ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--on-dark);
  overflow: hidden;
}
.hero__veil {
  position: absolute; inset: 0;
  /* Text column (left) stays protected; right side opens up so the
     constellation canvas reads clearly. Bottom fade hands off to navy-900. */
  background:
    linear-gradient(to bottom, rgba(38, 63, 94, 0) 62%, rgba(38, 63, 94, 0.9) 100%),
    linear-gradient(97deg, rgba(38, 63, 94, 0.92) 0%, rgba(38, 63, 94, 0.78) 40%, rgba(38, 63, 94, 0.32) 68%, rgba(38, 63, 94, 0.06) 100%);
}
.hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; padding-top: var(--s8); padding-bottom: var(--s8); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  border: 1px solid var(--dark-line); border-radius: var(--r-full);
  padding: 7px 16px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: var(--s3);
}
.hero__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero p.lead { color: var(--on-dark-muted); max-width: 56ch; margin-top: var(--s3); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--s4); }

.stat-stack { display: flex; flex-direction: column; gap: 14px; }
.stat-card {
  display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease-out), background var(--dur);
}
.stat-card:hover { transform: translateX(-6px); background: rgba(255, 255, 255, 0.085); }
.stat-card .num { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; min-width: 118px; font-variant-numeric: tabular-nums; }
.stat-card .lbl { font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-muted); line-height: 1.5; }

/* ---------- Logo row ---------- */
.logo-row { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: var(--s4) 0; }
.logo-row .container { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.logo-row .cap { font-size: var(--label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.logo-row .logos { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.ph-logo {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; color: #B6BDC6;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  filter: grayscale(1);
}
.ph-logo .mark { width: 18px; height: 18px; border: 2px solid #B6BDC6; border-radius: 4px; display: inline-block; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.svc-card { padding: var(--s4); display: flex; flex-direction: column; gap: 14px; text-decoration: none; position: relative; text-align: center; }
.svc-card .icon {
  width: 112px; height: 112px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin: 0 auto;
  transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-spring);
}
.svc-card .h5 { color: var(--navy-900); }
.svc-card p { font-size: var(--body-sm); color: var(--text); flex: 1; }

/* small static metadata tag chip (homepage service cards, item 8) */
.tag {
  display: inline-flex;
  font-size: 0.75rem; font-weight: 600;
  color: var(--text-muted); background: var(--bg-mist);
  border-radius: var(--r-full); padding: 4px 10px;
}

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.testi-card { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.testi-card .fact {
  font-size: 1.75rem; font-weight: 400; letter-spacing: -0.03em; color: var(--navy-900); line-height: 1.15;
}
.testi-card .fact em { font-style: normal; color: var(--accent); }
.testi-card blockquote { margin: 0; font-size: var(--body-sm); color: var(--text); line-height: 1.65; flex: 1; }
.testi-card .who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: var(--s2); }
.testi-card .who .ava { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-mist); color: var(--text-muted); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; object-fit: cover; border: 1px solid var(--border); }
.testi-card .who .nm { font-size: 0.875rem; font-weight: 600; color: var(--navy-900); }
.testi-card .who .rl { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 22px 4px;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-900);
  transition: color var(--dur-fast);
}
.faq-item > button:hover { color: var(--navy-700); }
.faq-item .pm {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
  transition: transform var(--dur) var(--ease-spring), background var(--dur), border-color var(--dur), color var(--dur);
  color: var(--text-muted);
}
.faq-item.is-open .pm { transform: rotate(45deg); background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }
.faq-body p { padding: 0 44px 24px 4px; color: var(--text); font-size: var(--body-sm); line-height: 1.7; max-width: 70ch; }

/* FAQ split layout: heading column + accordion column.
   Was inline per-page (Avaleht/Hinnad/SDS) with no breakpoint — collapses at 1080. */
.faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s6); }

/* on-dark variant */
.faq--dark, .faq--dark .faq-item { border-color: var(--dark-line); }
.faq--dark .faq-item > button { color: var(--on-dark); }
.faq--dark .faq-item .pm { border-color: var(--dark-line); color: var(--on-dark-muted); }
.faq--dark .faq-item.is-open .pm { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy-900); }
.faq--dark .faq-body p { color: var(--on-dark-muted); }

/* ---------- Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.blog-card { overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.blog-card .thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.blog-card .thumb > .ph { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .thumb > .ph { transform: scale(1.04); }
.blog-card .body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card .meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.blog-card .meta span { white-space: nowrap; }
.blog-card .meta .cat { color: var(--navy-900); }
.blog-card .h5 { color: var(--navy-900); }
.blog-card p { font-size: var(--body-sm); color: var(--text-muted); flex: 1; }

/* image placeholder (striped, per design guidance) */
.ph {
  background: repeating-linear-gradient(-45deg, #E8ECF0 0 14px, #EFF2F5 14px 28px);
  display: grid; place-items: center;
}
/* was color:#9AA3AD (2.56:1 on --bg-mist, fails AA) — replaced with the
   frozen --text-muted token (5.50-10.74:1, verified via contrast.mjs). */
.ph span { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 4px; }

/* ---------- Dark science section ---------- */
.dark-section { background: var(--ink-950); color: var(--on-dark); }
.dark-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  padding: var(--s4);
}
.dark-card--solid { background: #fff; color: var(--navy-900); border: none; }
.dark-card--accent { background: var(--accent); color: #fff; border: none; }

/* Trust cards — 4 equal cards, 2x2 (item 14, service-template dark block, FLAG 3) */
.trust-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.trust-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dark-line); border-radius: var(--r-lg); padding: var(--s4); }
.trust-card h3 { font-size: var(--h5); font-weight: 700; margin-bottom: 8px; }
.trust-card p { font-size: var(--body-sm); color: var(--on-dark-muted); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); counter-reset: step; }
.step { position: relative; padding: var(--s4); }
.step .n {
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.125rem;
  margin-bottom: var(--s3);
  background: #fff;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.step:hover .n { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.step .h5 { margin-bottom: 8px; }
.step p { font-size: var(--body-sm); color: var(--text); }
.step::after {
  content: '→';
  position: absolute; top: 50%; right: -19px; transform: translateY(-50%);
  color: var(--accent); font-size: 1.75rem; font-weight: 800;
  transition: transform var(--dur) var(--ease-spring);
}
.step:hover::after { transform: translateY(-50%) translateX(4px); }
.step:last-child::after { content: none; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 0.8125rem; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy-900); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--label); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-900); }
.field label .opt { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px 16px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-900);
  box-shadow: 0 0 0 1.5px var(--navy-900);
}
.field.has-error input, .field.has-error select { border-color: #BA1A1A; box-shadow: 0 0 0 1.5px #BA1A1A; }
.field .err { display: none; font-size: 0.8125rem; color: #BA1A1A; }
.field.has-error .err { display: block; }
.field .ok-mark { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.form-grid .span2 { grid-column: 1 / -1; }

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--body-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--navy-900); background: var(--bg-soft); }
.dropzone strong { color: var(--navy-900); }
.dropzone .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
.file-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 14px;
  font-size: 0.875rem; font-weight: 600; color: var(--navy-900);
}
.file-chip button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; padding: 2px 6px; }
.file-chip button:hover { color: #BA1A1A; }

.form-assure { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-muted); }
.form-assure span { display: inline-flex; gap: 7px; align-items: center; }

/* ---------- Modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; visibility: hidden; }
.modal-root.is-open { visibility: visible; }
.modal-back { position: absolute; inset: 0; background: rgba(10, 14, 20, 0.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.modal-root.is-open .modal-back { opacity: 1; }
.modal-card {
  position: relative;
  background: #fff; border-radius: var(--r-xl);
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: var(--s5);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(22px) scale(0.97);
  transition: opacity var(--dur) var(--ease-out), transform 380ms var(--ease-spring);
}
.modal-root.is-open .modal-card { opacity: 1; transform: none; }
.modal-x {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-soft); border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.modal-x:hover { background: var(--bg-mist); color: var(--navy-900); transform: rotate(90deg); }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed; right: 28px; top: 96px; z-index: 50;
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sticky-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta .btn { box-shadow: var(--shadow-3), var(--shadow-cta); }

/* ---------- Footer ---------- */
.footer { color: var(--on-dark); padding: var(--s7) 0 var(--s4); }
.footer--navy { background: var(--navy-900); }
.footer--ink { background: var(--ink-950); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--dark-line); }
.footer .about { font-size: var(--body-sm); color: var(--on-dark-muted); max-width: 34ch; margin-top: var(--s2); }
.footer h4 { font-size: var(--label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: var(--s2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--on-dark-muted); text-decoration: none; font-size: var(--body-sm); transition: color var(--dur-fast); }
.footer ul a:hover { color: var(--on-dark); }
.footer .base { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); font-size: 0.8125rem; color: var(--on-dark-muted); flex-wrap: wrap; }
.footer .base a { color: inherit; text-decoration: none; }
.footer .base a:hover { color: var(--on-dark-muted); }
.iso-chips { display: flex; gap: 10px; margin-top: var(--s3); }
.iso-chip { border: 1px solid var(--dark-line); border-radius: var(--r); padding: 8px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--on-dark-muted); }
.iso-chip small { display: block; font-weight: 500; color: var(--on-dark-muted); letter-spacing: 0.02em; }

/* ---------- Service/sub-page hero (light) ---------- */
.svc-hero { position: relative; overflow: hidden; min-height: clamp(480px, 56vh, 640px); background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.svc-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding-top: var(--s6); padding-bottom: var(--s7); }
.svc-hero .ph { aspect-ratio: 4 / 3; border-radius: var(--r-xl); border: 1px solid var(--border); }

/* R4 fix (Kaarel 2026-09-04, "Hero fade similar to www.transperfect.com"):
   the hero figure is a SIBLING of `.container` (moved out of the grid in the
   markup, mirrors `.hero`/`.hero__photo` below) and pinned full-bleed to the
   section's right edge — no card, no radius, spans the section's full
   height (touches top/right/bottom of `.svc-hero`, not `.container`, so it
   is not constrained by the container's max-width or vertical padding, and
   `.container` staying out of its ancestor chain keeps `.svc-hero` as its
   containing block). `.container`'s z-index:1 (above the figure's z-index:0)
   is load-bearing: without it, the two column tracks can end up close enough
   at some viewports that the ABSOLUTELY POSITIONED figure — which paints
   above static in-flow content regardless of DOM order — visually covers the
   tail of the lead paragraph instead of sitting behind it. Reset back to the
   original grid-cell / 4:3 layout on mobile — see the ≤760px media query
   below. */
.svc-hero .figure--bleed {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(420px, 50vw, 760px);
  margin: 0;
  z-index: 0;
}
.svc-hero .figure--bleed .hero-img-wrap { height: 100%; }
.svc-hero .figure--bleed img.hero-img--fade { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image gradient-to-background overlay (cross-cutting, Transperfect pattern).
   R4 fix (Kaarel 2026-09-04): replaces the R4 45%-mask-stop fade with
   TransPerfect's actual pattern — a solid overlay in the SECTION's own
   background colour (--section-bg, set inline per hero; defaults to
   navy-900) dissolving across the WHOLE image via a long gradient on
   `.hero-img-wrap::before` (2% / 10% / 20% / 32% stops, fully clear by
   100%) rather than a hard cutoff at a fixed percentage. Same at all
   widths — no separate mobile fade rule needed. */
.hero-img-wrap { position: relative; }
.hero-img-wrap::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right,
    var(--section-bg, var(--navy-900)) 2%,
    color-mix(in srgb, var(--section-bg, var(--navy-900)) 88%, transparent) 10%,
    color-mix(in srgb, var(--section-bg, var(--navy-900)) 74%, transparent) 20%,
    color-mix(in srgb, var(--section-bg, var(--navy-900)) 47%, transparent) 32%,
    transparent 100%);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-full); padding: 7px 16px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  margin-bottom: var(--s3);
}

/* ---------- Q-blocks (AEO answer blocks) ---------- */
.qa-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--border); }
.qa-block:first-of-type { border-top: none; padding-top: 0; }
.qa-block h2 { font-size: var(--h3); font-weight: 700; letter-spacing: var(--track-snug); line-height: 1.3; }
.qa-block p { color: var(--text); max-width: 64ch; }
.qa-block p + p { margin-top: var(--s2); }
.qa-block .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.qa-chip { border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 6px 14px; font-size: 0.8125rem; font-weight: 600; color: var(--navy-900); }

/* ---------- Filter chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  white-space: nowrap;
  border: 1px solid var(--border-strong); background: #fff;
  border-radius: var(--r-full); padding: 9px 18px;
  font-size: 0.875rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--navy-900); color: var(--navy-900); transform: translateY(-1px); }
.chip.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

@media (max-width: 1080px) {
  .svc-hero .container { grid-template-columns: 1fr; }
  .qa-block { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ---------- Reveal animations ----------
   Base state is VISIBLE. .anim-armed is added on <html> only once the
   rendering loop is verifiably live (first rAF), so screenshots, print and
   stalled iframes always show content. */
[data-reveal] {
  transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.anim-armed [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(26px); transition: none; }
/* settle fallback: ~2s after arming everything snaps visible — no-op in live
   browsers (entrance already finished), rescues rendering-stalled contexts */
html.anim-settled [data-reveal], html.anim-settled .hero [data-hero-seq] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html[data-anim="subtle"] [data-reveal] { transition-duration: 400ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* hero entrance choreography — same armed pattern: visible by default */
.hero [data-hero-seq] {
  transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out);
  transition-delay: calc(var(--hs, 0) * 130ms + 60ms);
}
html.hero-pre .hero [data-hero-seq] { opacity: 0; transform: translateY(30px); transition: none; }
@media (prefers-reduced-motion: reduce) { .hero [data-hero-seq] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 80px);
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-md); padding: 14px 22px;
  font-size: 0.9375rem; font-weight: 600;
  box-shadow: var(--shadow-3);
  opacity: 0; transition: transform 380ms var(--ease-spring), opacity var(--dur);
  z-index: 120;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .container { padding: 0 24px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .faq-split { grid-template-columns: 1fr; gap: var(--s3); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { content: none; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .stat-stack { flex-direction: row; flex-wrap: wrap; }
  .stat-card { flex: 1 1 240px; }
  /* tighten the still-horizontal nav (960–1080px) so it doesn't crowd the CTA */
  .site-header .container { gap: 20px; }
  .main-nav { gap: 2px; }
  .nav-link { padding: 10px 10px; }
}

/* Collapse to the hamburger before the horizontal nav overflows.
   Brand + 6 links + 2 mega chevrons + lang toggle + CTA need ~960px of row
   width; below that (iPad portrait 768, small laptops) the old 760px
   breakpoint let the nav push the CTA off-screen. */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .hamburger { display: block; }
  .header-actions .btn { display: none; }
  /* item 3: group lang-switcher + hamburger right, space away from brand */
  .site-header .container { justify-content: space-between; }
}
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .section { padding: var(--s6) 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  /* R4: Teenused and Ettevõte columns sit side by side; brand block and
     Kontakt column span both columns. */
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .footer .cols > :first-child, .footer .cols > :last-child { grid-column: 1 / -1; }
  .sticky-cta { right: 16px; left: 16px; top: auto; bottom: 16px; transform: translateY(12px); }
  .sticky-cta .btn { width: 100%; height: 52px; backdrop-filter: blur(8px); }
  .hero .container { padding-top: var(--s6); padding-bottom: var(--s6); }
  .hero__photo { display: none; }
  /* R4 fix: undo the desktop full-bleed absolute layer — service-page hero
     photos keep their CURRENT stacked mobile behaviour (figure below the
     text, back in normal grid flow). The image's own height/aspect-ratio
     fall back to the existing `.figure--4x3 img` / `.figure img` rules once
     the figure no longer has an explicit height to hand down. */
  .svc-hero { min-height: auto; overflow: visible; }
  .svc-hero .figure--bleed { position: static; width: 100%; margin: 0; }
  .stat-stack { flex-direction: column; }
  .modal-card { padding: var(--s4) var(--s3); }
  /* R4: client logos lay out three per row at reduced size, ready to absorb
     the 3x3 set (9 logos) without further CSS. */
  .logo-row .logos { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; }
  .client-logo { height: 20px; max-width: 100px; }
}

/* ============================================================
   R2 — CHAPTERED EDITORIAL
   The page is a dossier. Chapters are the unit. Grounds change
   hard at chapter boundaries (never interpolated). Media sits in
   its own column with a caption and never bleeds under type.
   ============================================================ */

/* ---------- Chapter ---------- */
.chapter { padding: var(--s8) 0; position: relative; }
.chapter--soft { background: var(--bg-soft); }
.chapter--mist { background: var(--bg-mist); }
.chapter--ink { background: var(--ink-950); color: var(--on-dark); }
.chapter--tight { padding: var(--s6) 0; }

/* chapter opener: § number as a rule, then the heading. Replaces the
   kicker-above-every-heading tell — the section number IS the eyebrow, and it
   is structural rather than decorative. */
.chapter__open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--s6); align-items: end; margin-bottom: var(--s6); }
.chapter__mark {
  font-size: 0.78rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  /* --text-faint measures 3.11:1 on a light ground (--bg-mist), below the
     4.5:1 AA floor — fixed to --text-muted (5.50-10.74:1, verified via
     contrast.mjs). Dark-ground instances (below) were a separate defect
     (--on-dark-faint, WINDOWS #5) — now also fixed to --on-dark-muted. */
  color: var(--text-muted);
  display: flex; align-items: center; gap: 14px;
}
.chapter__mark::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chapter--ink .chapter__mark { color: var(--on-dark-muted); }
.chapter--ink .chapter__mark::after { background: var(--dark-line); }
.chapter__open h2 { margin-top: var(--s2); }
.chapter__open .lead { max-width: 58ch; }
.chapter--ink .lead, .chapter--ink .muted { color: var(--on-dark-muted); }

/* opener variant: single column, used where the spread would crowd */
.chapter__open--stack { grid-template-columns: minmax(0, 62ch); }

/* ---------- Figure (media in its own column, always captioned) ---------- */
.figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.figure img, .figure .ph { border-radius: var(--r-lg); border: 1px solid var(--border); width: 100%; }
/* height:auto is load-bearing — without it the intrinsic height attribute wins
   over the aspect-ratio classes below and the figure renders at full pixel
   height. */
.figure img { object-fit: cover; height: auto; }
/* R4: faded hero figures bleed to the edge instead of sitting in the bordered
   rounded box above — overrides .figure img at :685. */
.figure--bleed img { border: none; border-radius: 0; }
.chapter--ink .figure img, .chapter--ink .figure .ph { border-color: var(--dark-line); }
.figure figcaption {
  font-size: 0.78rem; line-height: 1.5; color: var(--text-muted);
  padding-left: 14px; border-left: 2px solid var(--border-strong);
  max-width: 44ch;
}
.chapter--ink .figure figcaption { color: var(--on-dark-muted); border-left-color: var(--dark-line); }
.figure--4x3 img, .figure--4x3 .ph { aspect-ratio: 4 / 3; }
.figure--16x9 img, .figure--16x9 .ph { aspect-ratio: 16 / 9; }
.figure--21x9 img, .figure--21x9 .ph { aspect-ratio: 21 / 9; }

/* ---------- Plate: the wordless bridge between chapters ----------
   Authored silence. One ground, one image, no copy competing with it. */
.plate { position: relative; overflow: hidden; background: var(--ink-950); }
.plate img, .plate .ph { width: 100%; height: clamp(240px, 34vh, 380px); object-fit: cover; display: block; opacity: 0.62; }
.plate .ph { height: clamp(240px, 34vh, 380px); }

/* ---------- Spread: asymmetric editorial pairing ----------
   Replaces the three-equal-cards skeleton. Alternating .is-flip keeps two
   consecutive spreads from reading as the same block. */
.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.spread + .spread { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--border); }
.chapter--ink .spread + .spread { border-top-color: var(--dark-line); }
.spread__body { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.spread__body h3 { color: var(--navy-900); }
.chapter--ink .spread__body h3 { color: var(--on-dark); }
.spread__body p { color: var(--text); }
.chapter--ink .spread__body p { color: var(--on-dark-muted); }
.spread.is-flip .figure { order: -1; }
.spread--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.spread--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

/* ---------- Ledger rows: fact left, figure right, one rhythm ----------
   Used for the peak chapter's evidence and (as .price-row) for Näidishinnad. */
.ledger { border-top: 1px solid var(--border); }
.chapter--ink .ledger { border-top-color: var(--dark-line); }
.ledger__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.chapter--ink .ledger__row { border-bottom-color: var(--dark-line); }
.ledger__row .i { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.ledger__row .i svg { width: 22px; height: 22px; }
.chapter--ink .ledger__row .i { background: rgba(255, 255, 255, 0.06); color: var(--on-dark); }
.ledger__row .nm { font-weight: 700; color: var(--navy-900); letter-spacing: var(--track-snug); }
.chapter--ink .ledger__row .nm { color: var(--on-dark); }
.ledger__row .vol { grid-column: 2; font-size: var(--body-sm); color: var(--text-muted); }
.chapter--ink .ledger__row .vol { color: var(--on-dark-muted); }
.ledger__row .amt {
  grid-row: 1 / span 2; grid-column: 3;
  font-weight: 800; font-size: 1.375rem; letter-spacing: var(--track-snug);
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: right;
}
.ledger__row .amt small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.chapter--ink .ledger__row .amt small { color: var(--on-dark-muted); }

/* ---------- Quote form: one column, one rhythm ----------
   Kaarel R2 point 7. The two-column .form-grid made six fields read as a dense
   admin panel; a single column reads as a short list, which is what the current
   site's form does well. Ettevõte stays out of the markup. Tähtaeg (deadline)
   was restored to the modal in Design Revision R4 (01.3-01, 2026-09-04) — this
   comment previously claimed both fields were gone; only Ettevõte still is. */
.m-fields { display: flex; flex-direction: column; gap: var(--s3); }
.m-fields .dropzone { padding: var(--s3); }

/* ---------- Quiet card: everything that must not compete ----------
   Kaarel R2 point 3 — the calculator is the only loud block on Hinnad. */
.card--quiet { background: transparent; border-color: var(--border); box-shadow: none; }
.card--quiet:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }

/* ---------- Calculator figure: the largest numeral on its page ---------- */
.calc-figure {
  font-size: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 0.95;
  font-variant-numeric: tabular-nums;
  display: block;
}
.calc-figure em { font-style: normal; color: var(--accent); }
.chapter--ink .calc-figure em { color: var(--accent-on-dark); }
/* the separator and the unit stay quiet so the two figures carry the block.
   .sep inherits .calc-figure's clamp(3.5rem,...) size, so it is always
   large text (>=56px) and technically already clears the 3:1 large-text AA
   floor at 3.05:1 on --ink-950 — swapped to --on-dark-muted anyway (WINDOWS
   #5) for margin safety and to match .cur's existing weight, not because it
   was failing. */
.calc-figure .sep { color: var(--on-dark-muted); font-weight: 400; margin: 0 0.06em; }
.calc-figure .cur { font-size: 0.42em; letter-spacing: -0.02em; vertical-align: baseline; color: var(--on-dark-muted); }
/* paired number input beside the slider (Kaarel R2 point 2) */
.words-pair { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--s3); align-items: end; }
.words-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Sticky result bar (mobile decision moment) ---------- */
.sticky-result {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none;
  align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--navy-900); color: var(--on-dark);
  border-top: 1px solid var(--dark-line);
  box-shadow: 0 -6px 24px rgba(14, 27, 44, 0.24);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.sticky-result.is-on { transform: none; }
.sticky-result .sr-val { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticky-result .sr-val em { font-style: normal; color: var(--accent-on-dark); }
.sticky-result .sr-lbl { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-muted); }
.sticky-result .btn { height: 46px; padding: 0 18px; font-size: 0.9375rem; border-radius: var(--r-md); flex: none; }
@media (max-width: 760px) { .sticky-result { display: flex; } }

/* ---------- Index: one lead item, the rest as compact entries ----------
   The printed-feature skeleton. Replaces three equal cards, and because it is
   neither a grid of equals nor an image/text zigzag it does not repeat any
   other skeleton on the page. */
.index { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.index__lead { display: flex; flex-direction: column; gap: var(--s3); text-decoration: none; }
.index__lead h3 { color: var(--navy-900); }
.index__lead p { color: var(--text); }
.index__rest { display: flex; flex-direction: column; }
.index__row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s3); align-items: start;
  padding: var(--s4) 0; text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.index__rest > .index__row:first-child { padding-top: 0; }
.index__row img, .index__row .ph { width: 104px; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-md); border: 1px solid var(--border); object-fit: cover; }
.index__row .body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.index__row h3 { color: var(--navy-900); }
.index__row p { font-size: var(--body-sm); color: var(--text-muted); }
.index__lead:hover h3, .index__row:hover h3 { color: var(--navy-700); }
.index__lead:hover .arr, .index__row:hover .arr { transform: translateX(4px); }

/* ---------- Evidence list: the peak chapter's proof, stacked on ink ----------
   Not three cards. Three entries in a register, each led by its own figure. */
.evid { display: flex; flex-direction: column; }
.evid__row { padding: var(--s4) 0; border-bottom: 1px solid var(--dark-line); }
.evid__row:first-child { padding-top: 0; }
.evid__row:last-child { border-bottom: none; }
.evid__fact { font-size: 1.75rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; color: var(--on-dark); }
.evid__fact span { color: var(--accent-on-dark); font-weight: 800; }
.evid__row blockquote { margin: var(--s2) 0 0; font-size: var(--body-sm); color: var(--on-dark-muted); line-height: 1.7; max-width: 54ch; }
.evid__who { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); }
.evid__who img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--dark-line); }
.evid__who .nm { font-size: 0.875rem; font-weight: 600; color: var(--on-dark); }
.evid__who .rl { font-size: 0.78rem; color: var(--on-dark-muted); }

/* ---------- CTA band: headline + one sentence + one button ----------
   Promoted from Kvaliteet.html's page-scoped <style> block in R4 because
   SDS, Teenused and Meist now reuse it (D7). */
.cta-band { background: var(--ink-950); color: var(--on-dark); }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s6); padding-bottom: var(--s6); }

@media (max-width: 1080px) {
  .chapter__open { grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
  .spread { grid-template-columns: 1fr; gap: var(--s4); }
  .spread--wide, .spread--narrow { grid-template-columns: 1fr; }
  .spread.is-flip .figure { order: 0; }
  .index { grid-template-columns: 1fr; gap: var(--s5); }
  .index__rest > .index__row:first-child { padding-top: var(--s4); border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .chapter { padding: var(--s6) 0; }
  .words-pair { grid-template-columns: 1fr; gap: var(--s2); }
  .words-num { text-align: left; }
  .ledger__row { grid-template-columns: 38px minmax(0, 1fr); row-gap: 4px; }
  .ledger__row .i { width: 38px; height: 38px; }
  .ledger__row .amt { grid-row: 3; grid-column: 1 / -1; text-align: left; margin-top: 6px; }
  .ledger__row .amt small { display: inline; margin-right: 8px; }
  /* the sticky result bar owns the bottom edge on Hinnad */
  body[data-sticky-result] .sticky-cta { display: none; }
  .index__row { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s2); }
  .index__row img, .index__row .ph { width: 76px; }
  .evid__fact { font-size: 1.375rem; }
}

/* reduced motion: the sticky result bar still updates, it just does not animate */
@media (prefers-reduced-motion: reduce) {
  .sticky-result { transition: none !important; }
}

/* ============================================================
   R3/R4 — HERO PHOTO LAYER
   A documentary photo layered into the hero's right side, dissolving
   into the navy ground on the left via the shared fade pattern. The
   canvas that used to sit above this layer is gone (R4); the photo
   and veil form the hero's whole visual layer now.
   R4 fix (Kaarel 2026-09-04): widened from clamp(360px, 44vw, 620px) to
   match the Transperfect-scale full-bleed photo on the .svc-hero pages;
   uses the same long-dissolve overlay (site.css:539-547) as those heroes.
   ============================================================ */
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(420px, 50vw, 720px); z-index: 0; overflow: hidden; }
.hero__photo .hero-img-wrap { height: 100%; }
.hero__photo img.hero-img--fade { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__veil { z-index: 1; }
.hero .container { z-index: 3; }

/* ============================================================
   R3 — CLIENT LOGO ROW
   Real grayscale client logos replace the .ph-logo text
   placeholders. The .ph-logo rules stay in the file — the
   design-system pages still reference them.
   ============================================================ */
.client-logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity var(--dur-fast); }
.client-logo:hover { opacity: .85; }

/* ============================================================
   R3 — ARTICLE (LONG-FORM)
   Long-form editorial layout: sticky TOC rail + measured body
   column. The legal-text template (Tingimused.html) reuses this
   family wholesale — no parallel type scale.
   ============================================================ */
.article-layout { display: grid; grid-template-columns: minmax(0,220px) minmax(0,680px); gap: var(--s6); justify-content: center; }
@media (max-width: 1080px) { .article-layout { grid-template-columns: minmax(0,680px); justify-content: center; } }

.article h2 { font-size: var(--h3); font-weight: 700; line-height: 1.3; margin-top: var(--s6); }
.article h3 { font-size: var(--h5); font-weight: 700; line-height: 1.35; margin-top: var(--s4); }
/* 1.7 line-height is the one deliberate deviation from the global 1.5
   UI body line-height — justified by reading comfort across
   multi-paragraph long-form prose. Do not "fix" this back to 1.5. */
.article p { font-size: var(--body); font-weight: 400; line-height: 1.7; color: var(--text); }

/* .toc's mobile-hide rule MUST be declared after this unconditional rule —
   same specificity, so source order decides. Getting this backwards is the
   exact bug logged in WINDOWS.md #1: the unconditional display:flex below
   silently wins at every viewport width if the media query precedes it. */
.toc { position: sticky; top: var(--s6); border-left: 2px solid var(--border); padding-left: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.toc a { font-size: var(--body-sm); color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc a.is-active { color: var(--navy-900); font-weight: 700; border-left: 2px solid var(--accent); margin-left: -14px; padding-left: 12px; }
@media (max-width: 1080px) { .toc { display: none; } }

.byline { display: flex; align-items: center; gap: 12px; margin: var(--s3) 0 var(--s5); }
.byline img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.byline .nm { font-size: var(--body-sm); font-weight: 600; color: var(--navy-900); }
.byline .meta { font-size: var(--body-sm); color: var(--text-muted); }

/* ============================================================
   R3 — TOP-5 DIGEST
   Numbered digest list. Rank numerals are produced by a CSS
   counter on the row list, not hardcoded digits, so 3 entries or
   8 entries number correctly with no authoring change.
   ============================================================ */
.top5 { display: flex; flex-direction: column; counter-reset: top5-rank; }
.top5__row { display: grid; grid-template-columns: 64px 104px minmax(0,1fr); gap: var(--s3); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--border); counter-increment: top5-rank; }
.top5__row:first-child { padding-top: 0; }
.top5__rank { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.top5__rank::before { content: counter(top5-rank); }
.top5__row img { width: 104px; height: 104px; border-radius: var(--r-md); border: 1px solid var(--border); object-fit: cover; }
.top5__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 760px) { .top5__row { grid-template-columns: 40px 76px minmax(0,1fr); gap: var(--s2); } .top5__rank { font-size: 1.75rem; } .top5__row img { width: 76px; height: 76px; } }

/* ============================================================
   R3 — WIZARD CHROME
   Kalkulaator's 5-step progress indicator: rounded tick,
   currentColor border, filled-when-done.
   ============================================================ */
.wizard-steps { display: flex; align-items: center; gap: 4px; }
.wizard-step { display: flex; align-items: center; gap: 8px; font-size: var(--label); font-weight: 600; color: var(--text-muted); }
.wizard-step .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 11px; }
.wizard-step + .wizard-step::before { content: ''; flex: 1; min-width: 24px; height: 1px; background: var(--border); margin: 0 4px; }
.wizard-step.is-done { color: var(--navy-900); }
.wizard-step.is-done .tick { background: var(--navy-900); border-color: var(--navy-900); color: var(--bg); }
.wizard-step.is-current { color: var(--accent); }
.wizard-step.is-current .tick { border-color: var(--accent); color: var(--accent); }
/* mobile: labelled row is replaced by a compact progress bar — the
   fill uses transform: scaleX() (not a width transition), keeping
   the animated property inside the transform/opacity/clip-path
   allow-list. Base scaleX(0) is the empty-progress default; the
   wizard's own JS (a later plan) sets the live scaleX() value per
   step via an inline style, mirroring how .calc-figure values are
   already written per-render rather than baked into this stylesheet. */
.wizard-steps--compact { display: none; }
@media (max-width: 760px) {
  .wizard-steps { display: none; }
  .wizard-steps--compact { display: block; }
  .wizard-bar { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-top: 8px; }
  .wizard-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
}
.skip-link-calc { font-size: var(--body-sm); color: var(--text-muted); text-decoration: underline; white-space: nowrap; }

/* ============================================================
   R3 — MOTION
   Four motivated motions, all transform/opacity/clip-path only,
   plus the extended prefers-reduced-motion parallel covering every
   R3 transition-bearing selector added this phase.
   ============================================================ */

/* 1. Clip-path figure reveal — media enters as if a photograph is
   being uncovered, echoing the "evidence" register. Additive to
   the existing opacity/transform fade on [data-reveal]. Base state
   (no arming class) is the fully-revealed value — an element the
   observer never sees renders visible, not stranded. */
.figure[data-reveal] {
  clip-path: inset(0 0 0% 0);
  transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out), clip-path var(--dur-entrance) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.anim-armed .figure[data-reveal]:not(.is-revealed) { clip-path: inset(0 0 100% 0); }
/* settle fallback must cover clip-path too — the pre-existing settle rule
   (html.anim-settled [data-reveal] {...}) only resets opacity/transform, so
   an element whose IntersectionObserver never fires (stalled render loop,
   backgrounded tab, etc.) would otherwise stay clipped to zero height
   forever. Additive: does not edit the pre-existing settle rule. */
html.anim-settled .figure[data-reveal] { clip-path: none !important; }

/* 3. Calculator numeral pulse on repaint — NOT a count-up (removed
   2026-07-05, stays removed). The numeral value updates instantly;
   this class is toggled once by the page's own repaint() function. */
@keyframes r3-numeral-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .85; } 100% { transform: scale(1); opacity: 1; } }
.calc-figure.is-pulsing { animation: r3-numeral-pulse var(--dur-fast) var(--ease-out); }

/* 4. Richer hover states — transform+border-color-only language for
   the TOP-5 row and the wizard step tick. */
.top5__row { transition: border-color var(--dur-fast); }
.top5__row:hover { border-color: var(--border-strong); }
.wizard-step .tick { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.wizard-step:hover .tick { border-color: var(--navy-900); transform: translateY(-1px); }

/* ---------- Extended prefers-reduced-motion parallel ----------
   Every R3 transition-bearing selector this phase adds. Reduced
   motion removes the transition/animation only — the end state
   never changes. */
@media (prefers-reduced-motion: reduce) {
  .wizard-step .tick,
  .wizard-bar span,
  .top5__row,
  .toc a,
  .toc a.is-active,
  .figure[data-reveal],
  .calc-figure.is-pulsing {
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
  }
}