/* Loaded last: keep production fixes independent of generated bundles. */

.content-brief {
  background: #ffffff !important;
  border: 1px solid rgba(28, 27, 24, 0.18) !important;
  box-shadow: 0 2px 12px rgba(28, 27, 24, 0.05) !important;
  color: #1C1B18 !important;
  isolation: isolate;
  opacity: 1 !important;
  position: relative;
}

.content-brief::before,
.content-brief::after {
  content: none !important;
}

.content-brief__eyebrow,
.content-brief__title,
.content-brief__text,
.content-brief__meta,
.content-brief__badge {
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

.content-brief__eyebrow {
  color: #2E5E4E !important;
}

.content-brief__title {
  color: #1C1B18 !important;
  letter-spacing: -0.025em;
}

.content-brief__text {
  color: #3A3833 !important;
  font-weight: 500;
}

.content-brief__badge {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(28, 27, 24, 0.12) !important;
  color: #1C1B18 !important;
}

.content-brief__badge--category {
  background: #EFEDE8 !important;
  color: #1C1B18 !important;
}

.page-header,
.blog-header,
.facet-header {
  background: #F7F6F3 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(28, 27, 24, 0.12) !important;
  color: #1C1B18 !important;
  overflow-x: clip;
}

.page-header::before,
.page-header::after,
.blog-header::before,
.blog-header::after,
.facet-header::before,
.facet-header::after {
  content: none !important;
}

.page-title,
.blog-title,
.facet-title {
  color: #1C1B18 !important;
  letter-spacing: 0;
  text-shadow: none;
  text-wrap: balance;
}

.page-excerpt,
.blog-header .lead,
.facet-count {
  color: #55534B !important;
  text-wrap: pretty;
}

.page-header .breadcrumb-item a,
.blog-header .breadcrumb-item a,
.facet-header .breadcrumb-item a {
  color: #2E5E4E !important;
}

.page-header .breadcrumb-item a:hover,
.page-header .breadcrumb-item a:focus,
.blog-header .breadcrumb-item a:hover,
.blog-header .breadcrumb-item a:focus,
.facet-header .breadcrumb-item a:hover,
.facet-header .breadcrumb-item a:focus {
  color: #234A3D !important;
}

.page-header .breadcrumb-item.active,
.blog-header .breadcrumb-item.active,
.facet-header .breadcrumb-item.active,
.page-header .breadcrumb-item + .breadcrumb-item::before,
.blog-header .breadcrumb-item + .breadcrumb-item::before,
.facet-header .breadcrumb-item + .breadcrumb-item::before,
.page-meta,
.blog-meta {
  color: #55534B !important;
}

.content-detail-card,
.content-side-card {
  border-color: rgba(28, 27, 24, 0.14) !important;
}

.content-detail-card {
  background: #ffffff !important;
}

.page-body,
.blog-content {
  color: #3A3833;
  text-wrap: pretty;
}

.page-body :where(h2, h3),
.blog-content :where(h2, h3) {
  color: #1C1B18;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-body :where(h2, h3)::before,
.blog-content :where(h2, h3)::before {
  background: #2E5E4E;
}

.content-side-title {
  letter-spacing: 0;
}

@media (max-width: 575.98px) {
  .page-body :where(h2, h3),
  .blog-content :where(h2, h3) {
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
}

@media (min-width: 1200px) {
  .navbar-collapse {
    min-width: 0;
  }

  .avoimet-nav-shell {
    gap: 0.65rem;
    min-width: 0;
  }

  .avoimet-primary-nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  .avoimet-header-tools {
    flex: 1 1 20rem;
    gap: 0.55rem;
    min-width: 0;
  }

  .avoimet-header-search {
    flex: 1 1 16rem;
    max-width: 22rem;
    min-width: 12rem;
  }

  .avoimet-secondary-nav {
    flex: 0 1 auto;
    min-width: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
  .avoimet-brand-context {
    max-width: 11.5rem;
  }

  .navbar-nav .nav-link {
    padding-left: 0.48rem !important;
    padding-right: 0.48rem !important;
  }
}

@media (max-width: 767.98px) {
  .page-header,
  .blog-header {
    padding-block: 3.25rem 2.75rem !important;
  }

  .content-detail-card,
  .content-side-card,
  .content-brief {
    border-radius: 20px !important;
  }
}

/* Worker 5 usability/accessibility polish. Keep this last-layer only. */
:root {
  --avoimet-reading-max: 68ch;
}

.site-main-inner,
.navbar,
.footer,
.article-shell-body,
.search-results-shell,
.utility-page {
  min-width: 0;
}

.btn,
.nav-link,
.page-link,
.quick-link-row,
.avoimet-topic-pill,
.avoimet-link-card,
.utility-link-tile,
.search-result-link,
.content-item-cta,
.facet-link-cta {
  overflow-wrap: break-word;
}

.btn {
  white-space: normal;
}

.navbar .nav-link {
  text-align: left;
}

.navbar-toggler:focus-visible {
  box-shadow: 0 0 0 0.22rem rgba(46, 94, 78, 0.18);
}

.search-result-link:focus-visible,
.quick-link-row:focus-visible,
.avoimet-link-card:focus-visible,
.utility-link-tile:focus-visible,
.facet-link:focus-visible,
.content-item-card:focus-within {
  outline-offset: -4px !important;
}

:where(.breadcrumb-item, .page-item, span, strong)[aria-current="page"]::after {
  content: none !important;
}

.page-body,
.blog-content,
.prose,
.article-rich-content {
  hyphens: auto;
  overflow-wrap: break-word;
}

.page-body :where(p, ul, ol, dl, blockquote),
.blog-content :where(p, ul, ol, dl, blockquote),
.prose :where(p, ul, ol, dl, blockquote),
.article-rich-content :where(p, ul, ol, dl, blockquote) {
  max-width: min(100%, var(--avoimet-reading-max));
}

.page-body :where(li),
.blog-content :where(li),
.prose :where(li),
.article-rich-content :where(li) {
  max-width: min(100%, calc(var(--avoimet-reading-max) - 2rem));
}

.page-body :where(h2, h3, h4),
.blog-content :where(h2, h3, h4),
.prose :where(h2, h3, h4),
.article-rich-content :where(h2, h3, h4) {
  max-width: min(100%, 34ch) !important;
  overflow-wrap: break-word;
}

.page-body :where(pre, table),
.blog-content :where(pre, table),
.prose :where(pre, table),
.article-rich-content :where(pre, table) {
  max-width: 100%;
}

.page-body :where(pre),
.blog-content :where(pre),
.prose :where(pre),
.article-rich-content :where(pre) {
  overflow-x: auto;
}

.page-body :where(img, iframe, video),
.blog-content :where(img, iframe, video),
.prose :where(img, iframe, video),
.article-rich-content :where(img, iframe, video) {
  height: auto;
  max-width: 100%;
}

.footer .list-inline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.95rem;
  justify-content: flex-end;
}

/* Mobile release-audit hardening: let long Finnish headings and Markdown tables
   wrap inside the content card instead of creating horizontal overflow warnings. */
.page-body :where(h1, h2, h3, h4, h5, h6),
.blog-content :where(h1, h2, h3, h4, h5, h6),
.prose :where(h1, h2, h3, h4, h5, h6),
.article-rich-content :where(h1, h2, h3, h4, h5, h6),
.facet-page :where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.page-body :where(h1, h2, h3, h4, h5, h6) a,
.blog-content :where(h1, h2, h3, h4, h5, h6) a,
.prose :where(h1, h2, h3, h4, h5, h6) a,
.article-rich-content :where(h1, h2, h3, h4, h5, h6) a,
.facet-page :where(h1, h2, h3, h4, h5, h6) a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Plain selectors (0-1-1): brand.css's `.prose table { display: block }`
   was outscoring the old :where() form and re-breaking table wrapping. */
.page-body table,
.blog-content table,
.prose table,
.article-rich-content table {
  display: table;
  overflow-x: visible;
  table-layout: fixed;
  width: 100%;
}

.page-body :where(th, td),
.blog-content :where(th, td),
.prose :where(th, td),
.article-rich-content :where(th, td) {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 480px) {
  .page-body :where(h3),
  .blog-content :where(h3),
  .prose :where(h3),
  .article-rich-content :where(h3) {
    font-size: 18px !important;
  }

  .page-body :where(h3) a,
  .blog-content :where(h3) a,
  .prose :where(h3) a,
  .article-rich-content :where(h3) a {
    font-size: inherit !important;
  }
}

.footer .list-inline-item {
  margin-right: 0;
}

@media (pointer: coarse) {
  .btn,
  .nav-link,
  .form-check-input {
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .avoimet-primary-nav,
  .avoimet-secondary-nav {
    align-items: stretch !important;
  }

  /* The navbar collapses below 992px, but brand.css only bumps the link
     touch target inside its ≤767.98px block — 768-991px got 40.8px rows. */
  .navbar-nav .nav-link {
    display: flex;
    min-height: 2.9rem;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .footer .list-inline {
    justify-content: flex-start;
  }

  .search-results-form .input-group,
  .search-suggestion .input-group,
  .avoimet-search-card .input-group,
  .avoimet-header-search .input-group {
    min-width: 0;
  }

  .search-result-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Part 4 final pass: practical surfaces, lighter depth, no mobile spillover. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.navbar,
.avoimet-search-card,
.avoimet-quick-panel,
.feature-card,
.avoimet-link-card,
.utility-page-panel,
.search-result-card,
.search-empty-state,
.cookie-option-card,
.content-item-card,
.facet-card,
.content-detail-card,
.content-side-card,
.related-post-card,
.avoimet-action-card,
.salary-card,
.ops-panel,
.ops-stat-card,
.account-stat-card,
.error-panel {
  backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(28, 27, 24, 0.05) !important;
}

.feature-card:hover,
.feature-card:focus-within,
.avoimet-link-card:hover,
.avoimet-link-card:focus,
.content-item-card:hover,
.content-item-card:focus-within,
.facet-card:hover,
.facet-card:focus-within,
.search-result-card:hover,
.search-result-card:focus-within,
.related-post-card:hover,
.related-post-card:focus-within,
.avoimet-action-card:hover,
.avoimet-action-card:focus-within {
  box-shadow: 0 6px 18px rgba(28, 27, 24, 0.08) !important;
  transform: translateY(-1px) !important;
}

.salary-card {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(28, 27, 24, 0.16) !important;
}

.salary-card__cell,
.salary-card__cell--primary {
  background: #EFEDE8 !important;
  border-color: rgba(28, 27, 24, 0.12) !important;
}

.salary-card__label {
  /* var(--muted) #6B7280 hit 4.2:1 on the warm cell; needs 4.5 (WCAG). */
  color: #55534B !important;
}

.directory-filter {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  max-width: 100%;
  min-width: 0;
}

.directory-filter > *,
.facet-alpha > * {
  min-width: 0;
}

.directory-filter :where(input, select, button) {
  max-width: 100%;
  min-width: 0;
}

.facet-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 100%;
}

.facet-alpha :where(a, button) {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(28, 27, 24, 0.14);
  border-radius: 8px;
  color: #2E5E4E;
  display: inline-flex;
  font-weight: 650;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  overflow-wrap: anywhere;
  padding: 0.35rem 0.55rem;
  text-decoration: none;
}

.facet-alpha :where(a, button):hover,
.facet-alpha :where(a, button):focus {
  background: #EFEDE8;
  border-color: rgba(46, 94, 78, 0.5);
  color: #234A3D;
}

/* Related links / next steps: the shared list markup shipped without component
   styles, so browsers rendered raw bullets and the tile styling only wrapped the
   anchor while the description floated outside it. Make each list item the card. */
.related-links,
.next-step-links {
  display: block;
  margin-top: 2rem;
  max-width: 100%;
  min-width: 0;
}

.related-links__title {
  color: #1C1B18;
  font-family: var(--avoimet-display-font);
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.related-links__list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-links__item {
  align-content: start;
  background: #ffffff;
  border: 1px solid rgba(28, 27, 24, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.95rem 1.1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.related-links__item:hover,
.related-links__item:focus-within {
  background: #EFEDE8;
  border-color: rgba(46, 94, 78, 0.45);
}

.related-links__link,
.next-step-links a {
  background: none;
  border: 0;
  color: #2E5E4E;
  display: inline;
  font-weight: 650;
  overflow-wrap: anywhere;
  padding: 0;
  text-decoration: none;
}

.related-links__item .related-links__link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.related-links__item {
  position: relative;
}

.related-links__link:hover,
.related-links__link:focus {
  color: #234A3D;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.related-links__description {
  color: #55534B;
  font-size: 0.92rem;
}

@media (max-width: 767.98px) {
  .site-main,
  .site-main-inner,
  .container,
  .container-fluid,
  .content-detail-layout,
  .article-shell-body,
  .search-results-shell,
  .utility-page,
  .ops-shell,
  .ops-body {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .facet-grid,
  .content-list-grid,
  .related-posts-grid,
  .avoimet-action-grid,
  .directory-filter,
  .related-links__list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Production visual pass
   ---------------------
   The site ships light-only: brand.css forces a light layout in dark mode, but the
   template layers (theme.css, site.css, nav.css, accessibility.css) still switch
   tokens and form controls to dark values. That left dark inputs and alerts on an
   otherwise light page. Reset every dark-mode token and control back to the light
   brand palette here, in the last-loaded layer. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: #F7F6F3;
    --surface: #EFEDE8;
    --text: #3A3833;
    --muted: #55534B;
    --border: rgba(28, 27, 24, 0.16);
    --link: #2E5E4E;
    --link-hover: #234A3D;
    --brand-surface: #ffffff;
    --text-strong: #1C1B18;
    --text-muted: #55534B;
    --color-text-primary: #3A3833;
    --color-text-secondary: #55534B;
    --color-link: #2E5E4E;
    --color-link-hover: #234A3D;
    --focus-color: #2E5E4E;
  }

  html {
    background: #F7F6F3;
  }

  body {
    background: #F7F6F3;
    color: #3A3833;
  }

  .navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--avoimet-border) !important;
  }

  .navbar .navbar-toggler-icon {
    filter: none;
  }

  .footer {
    background: #EFEDE8 !important;
    border-color: var(--avoimet-border) !important;
  }

  .card,
  .feature-card {
    background-color: #ffffff !important;
    border-color: rgba(28, 27, 24, 0.12) !important;
    color: var(--avoimet-text) !important;
  }

  .form-control,
  .form-select {
    background-color: #ffffff !important;
    border-color: rgba(28, 27, 24, 0.2) !important;
    color: #3A3833 !important;
  }

  .form-control::placeholder {
    color: #55534B !important;
    opacity: 1 !important;
  }

  .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23203c37' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  }

  .form-control:focus,
  .form-select:focus {
    background-color: #ffffff !important;
    border-color: rgba(46, 94, 78, 0.52) !important;
    color: #3A3833 !important;
  }

  .form-check-input {
    background-color: #ffffff !important;
    border-color: rgba(28, 27, 24, 0.32) !important;
  }

  .form-check-input:checked {
    background-color: #2E5E4E !important;
    border-color: #2E5E4E !important;
  }

  .input-group-text {
    background: #f6f2e6 !important;
    border-color: rgba(28, 27, 24, 0.2) !important;
    color: #2E5E4E !important;
  }

  .alert-info {
    background-color: #eaf4f8 !important;
    border-color: rgba(37, 91, 143, 0.24) !important;
    color: #1d4568 !important;
  }

  .alert-warning {
    background-color: #fdf6e7 !important;
    border-color: rgba(46, 94, 78, 0.32) !important;
    color: #6d4e14 !important;
  }
}

/* Search groups: `form .form-control { margin-bottom: 0.75rem }` leaks into
   input-groups, leaving the text field 12px shorter than its addon and button. */
.input-group > .form-control,
.input-group > .form-select {
  margin-bottom: 0 !important;
}

/* Blockquotes: replace the template's blue panel with the brand's green/gold
   editorial treatment. */
.prose blockquote,
.page-body blockquote,
.blog-content blockquote,
.article-rich-content blockquote {
  background: #EFEDE8 !important;
  border-left: 4px solid #2E5E4E !important;
  border-radius: 0 8px 8px 0;
  color: #3A3833 !important;
  font-weight: 500 !important;
  padding: 0.85rem 1.1rem;
}

/* Body links: 700 read as shouting inside long Finnish paragraphs. */
.prose a,
.page-body a,
.blog-content a,
.article-rich-content a {
  font-weight: 620;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

/* Data typography: salary and comparison tables align on tabular figures. */
.page-body :where(td, th),
.blog-content :where(td, th),
.prose :where(td, th),
.salary-card,
.stats-value {
  font-variant-numeric: tabular-nums;
}

.page-body :where(thead th),
.blog-content :where(thead th),
.prose :where(thead th) {
  background: #EFEDE8;
  color: #1C1B18;
}

::selection {
  background: #2E5E4E;
  color: #F7F6F3;
}

/* =========================================================================
   FACELIFT — "Maltillinen" (V4)
   Calm Scandinavian re-skin from the approved mockup: paper #F7F6F3, ink
   #1C1B18, green accent #2E5E4E, white 16px-radius cards, hairline rules,
   light header and footer. Typefaces (self-hosted, OFL): Schibsted Grotesk
   for text and display, IBM Plex Mono for kickers and index numbers.
   Loaded last on purpose; !important only where an earlier layer used it.
   ========================================================================= */
@font-face {
  font-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/schibsted-grotesk-latin-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/schibsted-grotesk-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/schibsted-grotesk-latin-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/schibsted-grotesk-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

:root {
  --alm-ink: #1C1B18;
  --alm-ink-deep: #141311;
  --alm-ink-soft: #234A3D;
  --alm-cream: #EFEDE8;
  --alm-cream-dim: rgba(28, 27, 24, 0.65);
  --alm-gold: #2E5E4E;
  --alm-gold-deep: #2E5E4E;
  --alm-gold-pale: #A8D5B2;
  --alm-paper: #F7F6F3;
  --alm-paper-deep: #EFEDE8;
  --alm-text: #3A3833;
  --alm-muted: #55534B;
  --alm-hairline: rgba(28, 27, 24, 0.12);
  --avoimet-display-font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --alm-body-font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --alm-mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background: var(--alm-paper);
  color: var(--alm-text);
  font-family: var(--alm-body-font);
  line-height: 1.62;
}

/* ------- Light header (site-wide) ------- */
.navbar {
  background: var(--alm-paper) !important;
  border-bottom: 1px solid var(--alm-hairline) !important;
  box-shadow: none !important;
}

.navbar-brand-text {
  color: var(--alm-ink) !important;
  font-family: var(--avoimet-display-font);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Green brand dot from the mockup's logo lockup. */
.navbar-brand-text::before {
  background: var(--alm-gold);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.72rem;
  margin-right: 0.55rem;
  width: 0.72rem;
}

.navbar-brand:hover .navbar-brand-text,
.navbar-brand:focus .navbar-brand-text {
  color: var(--alm-gold) !important;
}

.avoimet-brand-context {
  color: var(--alm-muted) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--alm-ink) !important;
  font-weight: 500;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  background: #EFEDE8 !important;
  color: var(--alm-gold) !important;
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--alm-gold) !important;
  color: var(--alm-gold) !important;
  font-weight: 600;
}

.navbar-toggler {
  border-color: rgba(28, 27, 24, 0.3) !important;
}

.navbar .navbar-toggler-icon {
  filter: none !important;
}

.navbar .input-group-text {
  background: #ffffff !important;
  border-color: rgba(28, 27, 24, 0.15) !important;
  color: var(--alm-muted) !important;
}

.navbar .form-control {
  background: #ffffff !important;
  border-color: rgba(28, 27, 24, 0.15) !important;
  color: var(--alm-ink) !important;
}

.navbar .form-control::placeholder {
  color: #55534B !important;
  opacity: 1 !important;
}

.navbar .form-control:focus {
  background: #ffffff !important;
  border-color: rgba(46, 94, 78, 0.6) !important;
  box-shadow: 0 0 0 0.2rem rgba(46, 94, 78, 0.15) !important;
  color: var(--alm-ink) !important;
}

.navbar .btn-primary,
.navbar .avoimet-candidate-nav-link {
  background: var(--alm-gold) !important;
  border-color: var(--alm-gold) !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  color: #F7F6F3 !important;
  font-weight: 600;
}

.navbar .btn-primary:hover,
.navbar .btn-primary:focus,
.navbar .avoimet-candidate-nav-link:hover,
.navbar .avoimet-candidate-nav-link:focus {
  background: var(--alm-ink) !important;
  border-color: var(--alm-ink) !important;
  color: #F7F6F3 !important;
}

.navbar .avoimet-candidate-nav-link--neutral {
  background: transparent !important;
  border-color: rgba(28, 27, 24, 0.25) !important;
  border-radius: 99px !important;
  color: var(--alm-ink) !important;
}

.navbar .avoimet-candidate-nav-link--neutral:hover,
.navbar .avoimet-candidate-nav-link--neutral:focus {
  background: #EFEDE8 !important;
  border-color: rgba(28, 27, 24, 0.45) !important;
  color: var(--alm-ink) !important;
}

.navbar :focus-visible {
  outline-color: var(--alm-gold) !important;
}

@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: #ffffff !important;
    border: 1px solid var(--alm-hairline) !important;
    box-shadow: 0 24px 48px rgba(28, 27, 24, 0.12) !important;
  }
}

/* ------- Light footer (site-wide) ------- */
.footer {
  background: var(--alm-paper) !important;
  border-top: 1px solid var(--alm-hairline) !important;
  color: var(--alm-muted) !important;
}

.footer .h6 {
  color: var(--alm-gold) !important;
  font-family: var(--alm-mono-font);
  letter-spacing: 0.14em;
}

.footer p,
.footer small,
.footer .small,
.footer .text-muted {
  color: var(--alm-muted) !important;
}

.footer a,
.footer a:visited,
.footer a.text-muted {
  color: var(--alm-ink) !important;
}

.footer a:hover,
.footer a:focus,
.footer a.text-muted:hover,
.footer a.text-muted:focus {
  color: var(--alm-gold) !important;
}

.footer hr {
  border-color: var(--alm-hairline);
  opacity: 1;
}

.footer .avoimet-footer-cta {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(46, 94, 78, 0.4);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.footer .avoimet-footer-cta__eyebrow {
  color: var(--alm-gold) !important;
  font-family: var(--alm-mono-font);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer .btn-primary,
.footer .btn-outline-primary {
  background: var(--alm-gold) !important;
  border-color: var(--alm-gold) !important;
  border-radius: 99px !important;
  color: #F7F6F3 !important;
  font-weight: 600;
}

.footer .btn-primary:hover,
.footer .btn-primary:focus,
.footer .btn-outline-primary:hover,
.footer .btn-outline-primary:focus {
  background: var(--alm-ink) !important;
  border-color: var(--alm-ink) !important;
  color: #F7F6F3 !important;
}

.footer :focus-visible {
  outline-color: var(--alm-gold) !important;
}

/* ------- Kickers (mono voice from the mockup) & section titles ------- */
.avoimet-kicker,
.avoimet-section-kicker {
  align-items: center;
  color: var(--alm-gold);
  display: flex;
  font-family: var(--alm-mono-font);
  font-weight: 500;
  gap: 0.7rem;
  letter-spacing: 0.18em;
}

.avoimet-kicker::after,
.avoimet-section-kicker::after {
  content: none;
}

.avoimet-panel-kicker,
.avoimet-link-eyebrow {
  color: var(--alm-gold);
  font-family: var(--alm-mono-font);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.avoimet-three-ways-section h2,
.feature-section h2,
.avoimet-cross-discovery h2,
.avoimet-home-links h2,
.avoimet-about-strip h2 {
  color: #1C1B18;
  font-family: var(--avoimet-display-font);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ------- Hero (light paper, V4) ------- */
.avoimet-home-hero {
  background: transparent;
  border-bottom: 0;
  border-top: 0;
  margin-top: -1.2rem;
}

.avoimet-hero-title {
  color: var(--alm-ink);
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Two-tone headline: the closing phrase turns accent green (mockup). */
.avoimet-hero-title .hero-accent {
  color: var(--alm-gold);
}

.avoimet-hero-lead {
  font-size: 1.06rem;
  line-height: 1.65;
}

.avoimet-home-hero .avoimet-search-card {
  border: 1px solid rgba(28, 27, 24, 0.15);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(28, 27, 24, 0.07) !important;
  padding: 1.3rem 1.4rem 1.15rem;
}

.avoimet-home-hero .avoimet-search-card .form-label {
  color: var(--alm-ink);
  font-family: var(--avoimet-display-font);
  font-size: 1.08rem;
  font-weight: 600;
}

.avoimet-home-hero .avoimet-search-card .input-group-text {
  background: #ffffff;
  border-color: rgba(28, 27, 24, 0.18);
  border-right: 0;
  color: var(--alm-gold);
}

.avoimet-home-hero .avoimet-search-card .form-control {
  border-color: rgba(28, 27, 24, 0.18);
  border-left: 0;
}

.avoimet-home-hero .avoimet-search-card .btn-primary {
  background: var(--alm-gold);
  border-color: var(--alm-gold);
  border-radius: 10px;
  font-weight: 600;
}

.avoimet-home-hero .avoimet-search-card .btn-primary:hover,
.avoimet-home-hero .avoimet-search-card .btn-primary:focus {
  background: var(--alm-ink);
  border-color: var(--alm-ink);
}

/* Topic pills -> numbered index entries */
.avoimet-topic-grid {
  counter-reset: topic;
  gap: 0 1.9rem;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  margin-top: 0.5rem;
}

.avoimet-topic-pill {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--alm-hairline);
  border-radius: 0;
  counter-increment: topic;
  font-size: 0.84rem;
  font-weight: 600;
  gap: 0.65rem;
  letter-spacing: 0.06em;
  min-height: 2.75rem;
  padding: 0.65rem 0.1rem;
  text-transform: uppercase;
}

.avoimet-topic-pill::before {
  color: var(--alm-gold);
  content: counter(topic, decimal-leading-zero);
  font-family: var(--alm-mono-font);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
}

.avoimet-topic-pill > i {
  display: none;
}

.avoimet-topic-pill:hover,
.avoimet-topic-pill:focus {
  background: transparent;
  border-color: var(--alm-gold);
  box-shadow: none;
  color: var(--alm-ink);
  text-decoration: none;
}

/* Hero stats -> almanac figures */
.avoimet-hero-stats {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 1rem 2.4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2.3rem 0 0;
  padding: 0;
}

@media (max-width: 575.98px) {
  .avoimet-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.avoimet-stat {
  border-top: 2px solid var(--alm-ink);
  gap: 0.1rem;
  min-width: 0;
  padding-top: 0.5rem;
}

.avoimet-stat-number {
  font-family: var(--avoimet-display-font);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  hyphens: auto;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* Quick panel -> numbered start-here ledger (light card, V4) */
.avoimet-quick-panel {
  border: 1px solid var(--alm-hairline);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(28, 27, 24, 0.07) !important;
  counter-reset: quick;
}

.avoimet-quick-panel .avoimet-panel-header {
  background: #ffffff;
  border-bottom: 1px solid var(--alm-hairline);
}

.avoimet-quick-panel .avoimet-panel-kicker {
  color: var(--alm-gold) !important;
}

.avoimet-quick-panel .avoimet-panel-header h2 {
  color: var(--alm-ink) !important;
  font-family: var(--avoimet-display-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.quick-link-row {
  gap: 0.9rem;
  justify-content: flex-start;
}

.quick-link-row::before {
  color: var(--alm-gold);
  content: counter(quick, decimal-leading-zero);
  counter-increment: quick;
  flex: 0 0 auto;
  font-family: var(--alm-mono-font);
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 1.6rem;
}

.quick-link-row .bi {
  color: var(--alm-gold);
  margin-left: auto;
}

.quick-link-row-featured {
  background: #EFEDE8;
  border-left: 3px solid var(--alm-gold);
}

.quick-link-row:hover,
.quick-link-row:focus {
  background: #EFEDE8;
  color: var(--alm-ink);
}

/* ------- Three ways -> numbered editorial columns ------- */
.avoimet-three-ways-section {
  counter-reset: ways;
}

.three-ways-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0 0.15rem;
}

.three-ways-card:hover {
  box-shadow: none !important;
  transform: none;
}

/* Green number square from the mockup (1 / 2 / 3). */
.three-ways-card::before {
  align-items: center;
  background: var(--alm-gold);
  border-radius: 12px;
  color: #F7F6F3;
  content: counter(ways);
  counter-increment: ways;
  display: flex;
  font-family: var(--avoimet-display-font);
  font-size: 1rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  margin-bottom: 0.9rem;
  width: 2.5rem;
}

.three-ways-icon {
  display: none;
}

.three-ways-card h3 {
  font-family: var(--avoimet-display-font);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------- Feature cards -> flat directory tiles ------- */
.feature-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--alm-hairline) !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 1.1rem 0.15rem 0 !important;
}

.feature-card::before {
  content: none !important;
}

.feature-card:hover,
.feature-card:focus-within {
  border-top-color: var(--alm-gold) !important;
  box-shadow: none !important;
  transform: none !important;
}

.feature-card .feature-icon {
  background: transparent !important;
  border-radius: 0;
  color: var(--alm-gold-deep) !important;
  font-size: 1.5rem;
  height: auto;
  width: auto;
}

.feature-card h3 {
  font-family: var(--avoimet-display-font);
  font-size: 1.35rem;
}

.feature-card .stretched-link {
  color: #2E5E4E;
  font-weight: 650;
}

/* ------- Cross discovery -> hairline ledger rows ------- */
.cross-discovery-list {
  border-top: 2px solid var(--alm-ink);
}

.cross-discovery-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--alm-hairline);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding: 1.05rem 0.15rem;
}

.cross-discovery-row h3 {
  font-family: var(--avoimet-display-font);
  font-size: 1.2rem;
}

.cross-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cross-discovery-actions .btn {
  border-color: rgba(28, 27, 24, 0.45);
  border-radius: 999px;
  color: var(--alm-ink);
  font-weight: 650;
}

.cross-discovery-actions .btn:hover,
.cross-discovery-actions .btn:focus {
  background: var(--alm-ink);
  border-color: var(--alm-ink);
  color: #ffffff;
}

/* ------- Blog links -> editorial contents list ------- */
.avoimet-link-grid {
  gap: 0 1.9rem;
}

.avoimet-link-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--alm-hairline) !important;
  box-shadow: none !important;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 0.15rem 1.15rem !important;
}

.avoimet-link-card:hover,
.avoimet-link-card:focus {
  background: transparent !important;
  border-top-color: var(--alm-gold) !important;
  box-shadow: none !important;
  transform: none !important;
}

.avoimet-link-card .avoimet-link-eyebrow {
  color: var(--alm-gold-deep) !important;
}

.avoimet-link-title {
  color: #1C1B18;
  font-family: var(--avoimet-display-font);
  font-size: 1.2rem;
  line-height: 1.28;
}

.avoimet-link-card:hover .avoimet-link-title,
.avoimet-link-card:focus .avoimet-link-title {
  color: var(--alm-ink);
  text-decoration: underline;
  text-decoration-color: var(--alm-gold);
  text-underline-offset: 0.2em;
}

/* ------- About strip -> accent green closing band (V4) ------- */
.avoimet-about-strip {
  background: var(--alm-gold);
  border-top: 0;
  color: rgba(247, 246, 243, 0.88);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(1rem, calc((100vw - var(--avoimet-page-max)) / 2));
  padding-right: max(1rem, calc((100vw - var(--avoimet-page-max)) / 2));
}

.avoimet-about-strip > .row {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--avoimet-page-max);
}

.avoimet-about-strip .avoimet-section-kicker {
  color: var(--alm-gold-pale);
}

.avoimet-about-strip h2 {
  color: #F7F6F3;
}

.avoimet-about-strip .about-strip-body {
  color: rgba(247, 246, 243, 0.85);
}

.about-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.avoimet-about-strip a.about-strip-link,
.avoimet-about-strip a.about-strip-link:visited {
  align-items: center;
  background: rgba(247, 246, 243, 0.08);
  border: 1px solid rgba(247, 246, 243, 0.5);
  border-radius: 999px;
  color: #F7F6F3 !important;
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  text-decoration: none;
}

.avoimet-about-strip a.about-strip-link:hover,
.avoimet-about-strip a.about-strip-link:focus {
  background: #F7F6F3;
  border-color: #F7F6F3;
  color: var(--alm-gold) !important;
}

.about-strip-link .bi {
  color: var(--alm-gold-pale);
}

.avoimet-about-strip :focus-visible {
  outline-color: #F7F6F3 !important;
}

.breadcrumb-item.active {
  color: #55534B !important;
}

@media (max-width: 767.98px) {
  .avoimet-hero-title {
    font-size: clamp(2.15rem, 9vw, 2.7rem);
  }

  .avoimet-hero-stats {
    gap: 1rem 1.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .three-ways-card::before {
    font-size: 2.1rem;
  }
}

/* -------------------------------------------------------------------------
   FACELIFT v2 — warm paper rhythm, type scale, breathing room
   ------------------------------------------------------------------------- */
:root {
  --bg: var(--alm-paper);
  --surface: #EFEDE8;
  --border: var(--alm-hairline);
}

html {
  background: var(--alm-paper);
}

.text-muted {
  color: #55534B !important;
}

*:focus-visible {
  outline-color: rgba(28, 27, 24, 0.75);
}

/* Band cadence (V4): paper — white band — paper — white band — green close. */
.avoimet-three-ways-section {
  background: #ffffff;
  border-bottom: 1px solid var(--alm-hairline);
  border-top: 1px solid var(--alm-hairline);
}

.feature-section {
  background: transparent;
  border-bottom: 0;
  border-top: 0;
}

.avoimet-cross-discovery {
  background: transparent;
}

.avoimet-home-links {
  background: #ffffff;
  border-top: 1px solid var(--alm-hairline);
}

/* Vertical rhythm: sections get real air instead of the 3rem py-5 default. */
.avoimet-home-hero.py-5 {
  padding-bottom: 5rem !important;
  padding-top: 4.5rem !important;
}

.avoimet-three-ways-section.py-5,
.feature-section.py-5,
.avoimet-cross-discovery.py-5,
.avoimet-home-links.py-5 {
  padding-bottom: 5.25rem !important;
  padding-top: 5.25rem !important;
}

.avoimet-about-strip.py-5 {
  padding-bottom: 4.75rem !important;
  padding-top: 4.75rem !important;
}

.avoimet-home-hero > .row {
  --bs-gutter-x: 4.5rem;
}

.avoimet-three-ways-section .row.g-4,
.feature-section .row.g-4 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}

.avoimet-home-links .row.g-4 {
  --bs-gutter-x: 4rem;
}

.avoimet-three-ways-section .row.mb-4,
.avoimet-cross-discovery .row.mb-4 {
  margin-bottom: 2.75rem !important;
}

.feature-section .mb-4 {
  margin-bottom: 2.75rem !important;
}

.avoimet-kicker.mb-3 {
  margin-bottom: 1.5rem !important;
}

.avoimet-hero-title.mb-3 {
  margin-bottom: 1.5rem !important;
}

.avoimet-hero-lead.mb-4 {
  margin-bottom: 2.3rem !important;
}

.avoimet-home-hero .avoimet-search-card.mb-4 {
  margin-bottom: 2.4rem !important;
}

.avoimet-hero-stats {
  margin-top: 3rem;
}

/* Type scale on the new faces */
.avoimet-hero-title {
  font-size: clamp(2.8rem, 5vw, 4.3rem);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.03;
}

.avoimet-hero-lead {
  color: #55534B;
  font-size: 1.16rem;
  line-height: 1.7;
  max-width: 40rem;
}

.avoimet-three-ways-section h2,
.feature-section h2,
.avoimet-cross-discovery h2,
.avoimet-home-links h2,
.avoimet-about-strip h2 {
  font-size: 2.35rem;
  font-weight: 600;
}

.avoimet-kicker,
.avoimet-section-kicker,
.avoimet-panel-kicker,
.avoimet-link-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.17em;
}

.avoimet-quick-panel .avoimet-panel-header h2 {
  font-weight: 600;
}

.quick-link-title {
  font-weight: 600;
}

.three-ways-card h3,
.feature-card h3,
.cross-discovery-row h3,
.avoimet-link-title {
  font-weight: 600;
}

/* Quieter chrome: text-only primary nav on desktop, roomier header */
.navbar {
  min-height: 4.75rem;
}

.navbar .navbar-nav .nav-link {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

@media (min-width: 992px) {
  .navbar .avoimet-primary-nav .nav-link .bi {
    display: none;
  }
}

/* Quick panel breathing room */
.avoimet-quick-panel .avoimet-panel-header {
  padding: 1.25rem 1.35rem;
}

.quick-link-row {
  padding: 1.05rem 1.35rem;
}

.avoimet-panel-note {
  padding: 1.15rem 1.35rem;
}

/* Content pages: match the warm register and open the leading */
.page-body,
.blog-content,
.prose {
  line-height: 1.7;
}

.content-detail-card,
.content-side-card,
.content-brief {
  border-color: rgba(28, 27, 24, 0.16) !important;
}

/* Footer air */
.footer {
  padding-bottom: 2rem;
  padding-top: 3.5rem;
}

.footer .h6 {
  font-size: 0.76rem;
}

@media (max-width: 767.98px) {
  .avoimet-home-hero.py-5,
  .avoimet-three-ways-section.py-5,
  .feature-section.py-5,
  .avoimet-cross-discovery.py-5,
  .avoimet-home-links.py-5,
  .avoimet-about-strip.py-5 {
    padding-bottom: 3.25rem !important;
    padding-top: 3.25rem !important;
  }

  .avoimet-kicker::after,
  .avoimet-section-kicker::after {
    display: none;
  }

  .avoimet-hero-title {
    font-size: clamp(2.05rem, 8.4vw, 2.6rem);
  }

  .avoimet-three-ways-section h2,
  .feature-section h2,
  .avoimet-cross-discovery h2,
  .avoimet-home-links h2,
  .avoimet-about-strip h2 {
    font-size: 1.85rem;
  }

  .avoimet-hero-stats {
    margin-top: 2.25rem;
  }
}

/* -------------------------------------------------------------------------
   FACELIFT v2 polish — retire cold leftovers, warm the outline buttons
   site.css forces `.btn-outline-primary { background:#e9f1ff !important }` —
   a pale blue that clashed with the paper/gold theme. Warm the whole outline
   button system: cream idle, brand-green solid on hover.
   ------------------------------------------------------------------------- */
.btn-outline-primary {
  background-color: #f4efe1 !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: rgba(28, 27, 24, 0.4);
  color: #3A3833;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--alm-ink);
  border-color: var(--alm-ink);
  color: #fff;
}

/* The section CTA ("Selaa kaikkia ammatteja") reuses btn-outline-primary;
   give it a hairline idle so it reads as a quiet link, not a filled chip. */
.avoimet-section-cta {
  background-color: transparent !important;
}

.avoimet-section-cta:hover,
.avoimet-section-cta:focus {
  background-color: var(--brand-primary) !important;
}

/* -------------------------------------------------------------------------
   Release polish — fewer repeated routes, tighter rhythm, clearer reading
   ------------------------------------------------------------------------- */
.avoimet-topic-grid {
  max-width: 44rem;
}

@media (min-width: 992px) {
  .avoimet-topic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .avoimet-home-hero.py-5 {
    padding-bottom: 4rem !important;
    padding-top: 3.75rem !important;
  }

  .avoimet-three-ways-section.py-5,
  .feature-section.py-5,
  .avoimet-home-links.py-5 {
    padding-bottom: 4.25rem !important;
    padding-top: 4.25rem !important;
  }

  .avoimet-about-strip.py-5 {
    padding-bottom: 4rem !important;
    padding-top: 4rem !important;
  }
}

@media (max-width: 767.98px) {
  .avoimet-home-hero.py-5,
  .avoimet-three-ways-section.py-5,
  .feature-section.py-5,
  .avoimet-home-links.py-5,
  .avoimet-about-strip.py-5 {
    padding-bottom: 2.75rem !important;
    padding-top: 2.75rem !important;
  }

  .avoimet-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avoimet-topic-pill {
    font-size: 0.76rem;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
  }
}

.content-detail-card {
  box-shadow: 0 1px 8px rgba(28, 27, 24, 0.04) !important;
}

.avoimet-three-ways-section {
  overflow-x: clip;
}

.page-body :where(h2, h3),
.blog-content :where(h2, h3) {
  margin-bottom: 0.8rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   Full facelift — put the useful action first on hub pages
   ------------------------------------------------------------------------- */
.hub-search {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(28, 27, 24, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(28, 27, 24, 0.07);
  color: var(--alm-text);
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(min(100%, 20rem), 1.15fr);
  margin: -1.35rem 0 2.25rem;
  padding: clamp(1.15rem, 1.2vw + 0.85rem, 1.75rem);
  position: relative;
  z-index: 1;
}

.hub-search__eyebrow {
  color: var(--alm-gold);
  font-family: var(--alm-mono-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.hub-search__title {
  color: var(--alm-ink);
  font-family: var(--avoimet-display-font);
  font-size: clamp(1.45rem, 1.2vw + 1.1rem, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}

.hub-search__hint,
.hub-search__form-hint {
  color: var(--alm-muted);
  line-height: 1.55;
}

.hub-search__form {
  min-width: 0;
}

.hub-search__form .input-group {
  background: #ffffff;
  border: 1px solid rgba(28, 27, 24, 0.15);
  border-radius: 0.85rem;
  padding: 0.3rem;
}

.hub-search__form .input-group-text,
.hub-search__form .form-control,
.hub-search__form .btn {
  border-radius: 0.62rem !important;
  min-height: 3.15rem;
}

.hub-search__form .input-group-text {
  background: transparent;
  border: 0;
  color: var(--alm-gold);
  justify-content: center;
  min-width: 3rem;
}

.hub-search__form .form-control {
  background: #FFFFFF;
  border-color: transparent;
  color: #1C1B18;
}

.hub-search__form .form-control::placeholder {
  color: #55534B;
  opacity: 1;
}

.hub-search__form .form-control:focus {
  border-color: rgba(46, 94, 78, 0.6);
  box-shadow: 0 0 0 0.18rem rgba(46, 94, 78, 0.15);
}

.hub-search__form .btn-primary {
  background: var(--alm-gold) !important;
  border-color: var(--alm-gold) !important;
  color: #F7F6F3 !important;
  font-weight: 600;
}

.hub-search__form .btn-primary:hover,
.hub-search__form .btn-primary:focus {
  background: var(--alm-ink) !important;
  border-color: var(--alm-ink) !important;
  color: #F7F6F3 !important;
}

.hub-search__form-hint {
  font-size: 0.85rem;
  margin-top: 0.55rem;
}

.search-summary-card {
  min-width: 0;
}

.search-results-summary {
  grid-template-columns: minmax(0, 1fr);
}

.search-summary-card strong {
  overflow-wrap: anywhere;
}

.facet-link {
  min-height: 8.5rem;
}

.facet-link-cta {
  margin-top: auto;
}

@media (max-width: 991.98px) {
  .navbar .avoimet-nav-shell {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .navbar .avoimet-header-tools {
    order: -1;
  }

  .navbar .avoimet-primary-nav {
    margin-bottom: 0 !important;
  }

  .navbar .avoimet-header-search {
    margin-top: 0;
  }
}

@media (max-width: 991.98px) {
  /* Two columns got cramped already below 992px (copy column ~300px). */
  .hub-search {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .hub-search {
    grid-template-columns: 1fr;
    margin: -0.9rem 0 1.75rem;
    padding: 1.1rem;
  }

  .hub-search__form .input-group {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr);
  }

  .hub-search__form .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hub-search__form-hint {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-search,
  .hub-search .btn,
  .search-result-card {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Warm the remaining utility surfaces (search hero, utility hero, error page,
   accent panels, chips) — brand.css still painted these with the retired cool
   mint tints, which stood out against the paper/ink/gold theme.
   ------------------------------------------------------------------------- */
.search-results-hero,
.utility-page-hero,
.error-page {
  background: linear-gradient(180deg, #EFEDE8 0%, #EFEDE8 60%, #F7F6F3 100%);
  border-bottom: 1px solid rgba(28, 27, 24, 0.14);
  border-top: 0;
}

.utility-page-panel--accent,
.search-summary-card--accent,
.cookie-option-card--locked {
  background: linear-gradient(180deg, #EFEDE8 0%, #EFEDE8 100%);
}

.search-result-source,
.cookie-option-badge {
  background: #EFEDE8;
  color: #1C1B18;
}

/* -------------------------------------------------------------------------
   Light hero details (V4) — kicker mono green, ink index rows on paper.
   Placed last so it wins over the dark-scheme link neutralization.
   ------------------------------------------------------------------------- */
.avoimet-home-hero .avoimet-kicker {
  color: var(--alm-gold) !important;
}

.avoimet-home-hero .avoimet-topic-pill {
  border-bottom-color: var(--alm-hairline);
  color: var(--alm-ink) !important;
}

.avoimet-home-hero .avoimet-topic-pill:hover,
.avoimet-home-hero .avoimet-topic-pill:focus {
  background: transparent !important;
  border-bottom-color: var(--alm-gold);
  color: var(--alm-gold) !important;
}

/* Soft green wash in the hero corner instead of the old ink decoration. */
.avoimet-hero-decoration {
  filter: none;
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Mobile audit fixes
   ------------------------------------------------------------------------- */

/* Ops tables keep a 38rem min-width on mobile; scroll the panel instead of
   overflowing the page. */
.ops-table-panel {
  overflow-x: auto;
}

/* "Lyhyesti" summary callout (first paragraph after the first h2) was the
   last mint surface left from the template; align it with the paper/gold
   editorial treatment used by blockquotes. */
.prose h2:first-of-type + p {
  background: #EFEDE8;
  border-left-color: #2E5E4E;
}

/* Footer nav/legal links were exempted from the touch-target floor and
   rendered ~24px tall; pad them back to a comfortable hit area. */
.footer li a {
  display: inline-block;
  padding-block: 0.4rem;
}

/* brand.css's ≤359.98px degradation was outscored by later rules; re-assert
   it here so iPhone SE-class widths get the single-column, smaller-type
   layout that was designed for them. */
@media (max-width: 359.98px) {
  .avoimet-hero-title {
    font-size: 1.9rem;
  }

  .avoimet-topic-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Editorial declutter — fewer nested cards and a shorter path to content
   ------------------------------------------------------------------------- */
.avoimet-home-hero.py-5 {
  padding-bottom: 3.5rem !important;
  padding-top: 3.25rem !important;
}

.avoimet-three-ways-section.py-5,
.avoimet-home-links.py-5 {
  padding-bottom: 3.75rem !important;
  padding-top: 3.75rem !important;
}

.avoimet-about-strip.py-5 {
  padding-bottom: 3.5rem !important;
  padding-top: 3.5rem !important;
}

.avoimet-quick-panel,
.avoimet-home-hero .avoimet-search-card,
.hub-search {
  box-shadow: 0 6px 18px rgba(28, 27, 24, 0.06) !important;
}

.page-header,
.blog-header {
  margin-bottom: 1.5rem;
  padding-block: 2.35rem 2rem !important;
}

.page-title,
.blog-title {
  max-width: 26ch;
}

.page-excerpt {
  max-width: 68ch;
}

.content-detail-layout--single,
.content-brief--article,
.blog-post > .container > .related-links,
.blog-post > .container > .related-posts-section,
.page-content > .container > .related-links {
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
}

.content-detail-layout--single .content-detail-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.35rem 0 0 !important;
}

.content-brief {
  background: #EFEDE8 !important;
  border: 0 !important;
  border-left: 3px solid var(--alm-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem 1.2rem;
}

.content-brief__title {
  margin-bottom: 0.35rem;
}

.related-links__list {
  gap: 0 1.5rem;
}

.related-links__item {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--alm-hairline);
  padding: 0.85rem 0.1rem;
}

.related-links__item:hover,
.related-links__item:focus-within {
  background: transparent;
  border-color: var(--alm-gold);
}

.facet-grid {
  gap: 0.85rem;
}

.facet-link {
  min-height: 6.25rem;
  padding: 1.1rem;
}

@media (max-width: 767.98px) {
  .avoimet-home-hero.py-5,
  .avoimet-three-ways-section.py-5,
  .avoimet-home-links.py-5,
  .avoimet-about-strip.py-5 {
    padding-bottom: 2.35rem !important;
    padding-top: 2.35rem !important;
  }

  .page-header,
  .blog-header {
    padding-block: 2rem 1.75rem !important;
  }

  .content-detail-layout--single .content-detail-card {
    padding-top: 0 !important;
  }

  .content-brief {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
  }
}