/*
 * Pivotly — pages.css
 * Page-specific sections: home, Argo/coach, Teenused/service-single,
 * Partnerid, FAQ page, Kliendikogemused, assessment quiz. Grouped by
 * page via the section comments below, not by component type.
 * Split from components.css 2026-07-23 (5.0b).
 */

/* ============================================================
   5. PULL QUOTES & BLOCKQUOTES
   ============================================================ */

/* Pull quote ā€” key insight, styled prominently */
.pull-quote {
  margin: var(--space-10) 0;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-accent-muted);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-primary);
  margin: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .pull-quote p {
    font-size: var(--text-2xl);
  }
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}


/* ============================================================
   26. COACH BIO ā€” updated two-column layout
   ============================================================ */


@media (min-width: 1024px) {
  .coach-bio__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
  }
}

.coach-bio__image {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .coach-bio__image {
    width: 40%;
  }
}

.coach-bio__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.coach-bio__image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  /* was var(--color-bg-muted) — a token that has never been defined anywhere,
     so this declaration was silently invalid and the element had no background
     at all. Same class of bug as the historical --space-7 incident. Found via
     the custom-property audit 2026-07-22. */
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.coach-bio__content {
  flex: 1;
  min-width: 0;
}


.coach-bio__body {
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.coach-bio__link {
  display: inline-block;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
}

.coach-bio__link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}


/* ============================================================
   27. COACH HIGHLIGHT ā€” full-width atmospheric photo
   ============================================================ */

.coach-highlight {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .coach-highlight {
    aspect-ratio: 21 / 9;
  }
}

.coach-highlight__image {
  width: 100%;
  height: 100%;
}

.coach-highlight__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   31. SERVICE TESTIMONIAL QUOTE
   ============================================================ */

.service-testimonial-quote__inner {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-accent);
}

.service-testimonial-quote__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.service-testimonial-quote__body {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
}

.service-testimonial-quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.service-testimonial-quote__photo {
  flex-shrink: 0;
}

.service-testimonial-quote__photo img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.service-testimonial-quote__photo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  /* see .coach-bio__image-placeholder — undefined token, fixed 2026-07-22 */
  background-color: var(--color-bg-alt);
}

.service-testimonial-quote__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.service-testimonial-quote__name {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-size: var(--text-base);
  margin-bottom: 0;
}

.service-testimonial-quote__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.service-testimonial-quote__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  margin-top: var(--space-1);
}

.service-testimonial-quote__link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}


/* ==========================================================================
   Section 30a — Coach Hero
   ========================================================================== */

.hero--coach {
  padding: var(--space-3xl) 0;
}

.hero--coach-placeholder {
  /* picked up automatically by the sitewide [class*="-placeholder"] rule
     (components.css, branded placeholder texture) when no hero image and
     no post-thumbnail fallback exist */
}

.hero--coach .hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero--coach .hero__content--coach {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 560px;
  padding-top: var(--space-2xl);
  color: var(--color-on-dark);
}

/* Gold rule accent above the role label */
.hero--coach .hero__content--coach::before {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-2xs);
}

.hero--coach .hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero--coach .hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  font-style: italic;
  color: var(--color-on-dark);
  line-height: 1.1;
}

@media (max-width: 640px) {
  .hero--coach .hero__title {
    font-size: var(--text-3xl);
  }
}

.hero--coach .hero__tagline {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1.4;
}

.hero--coach .hero__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-on-dark-muted);
  line-height: 1.7;
  max-width: 480px;
}

.hero--coach .hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

/* ==========================================================================
   Section 30b — Coach Bio
   ========================================================================== */

.coach-bio {
  padding: var(--space-3xl) 0;
  position: relative;
}

/* Decorative dot cluster ā€” bottom left of section */
.coach-bio::before {
  content: '';
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  width: 80px;
  height: 80px;
  background-image: radial-gradient(
    circle,
    var(--color-accent) 1.5px,
    transparent 1.5px
  );
  background-size: 12px 12px;
  opacity: 0.25;
  pointer-events: none;
}

.coach-bio__inner {
  display: grid;
  flex-direction: column;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  align-items: start;
}

@media (min-width: 768px) {
  .coach-bio__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Left ā€” text content */
.coach-bio__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.coach-bio__tagline {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  line-height: 1.35;
  font-weight: 400;
}

.coach-bio__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: 1.8;
}

/* Rich text from wysiwyg field */
.coach-bio__body p {
  margin-bottom: var(--space-sm);
}

.coach-bio__body p:last-child {
  margin-bottom: 0;
}

/* 2026-07-22: now composes with .btn.btn-ghost (see parts/coach-bio.php) —
   only the extra top spacing needed above the bio text lives here. */
.coach-bio__story-link {
  margin-top: var(--space-2);
}

/* Right ā€” editorial photo */
.coach-bio__photo-wrap {
  position: relative;
  z-index: 0;
}

/* Accent rectangle behind bio photo ā€” offset bottom-right */
.coach-bio__photo-wrap::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 60%;
  height: 45%;
  border: 2px solid var(--color-accent);
  opacity: 0.4;
  border-radius: var(--card-radius);
  z-index: 1;
  pointer-events: none;
}

.coach-bio__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--card-radius);
  display: block;
}

.coach-bio__photo-placeholder {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-border);
  border-radius: var(--card-radius);
}

@media (max-width: 767px) {
  .coach-bio__photo-wrap::after {
    display: none;
  }
  .coach-bio {
    padding: var(--space-xl) 0;
  }
  .coach-bio::before {
    display: none;
  }
}


/* ============================================================
   30d ā€” Coach Highlight
   ============================================================ */

.coach-highlight {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.coach-highlight__image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

.coach-highlight__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-media-overlay-soft);
  padding: var(--space-xl) var(--container-padding);
  background: var(--color-media-overlay);
}

.coach-highlight__text {
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  text-align: center;
  max-width: 720px;
  line-height: 1.3;
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 640px) {
  .coach-highlight__image {
    aspect-ratio: 4 / 3;
  }
  .coach-highlight__text {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   30e ā€” Services Grid (coach page context)
   ============================================================ */

.services-grid {
  padding: var(--space-3xl) 0;
}

.services-grid__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.services-grid__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.services-grid__heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.services-grid__lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-inline: auto;
}

.services-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .services-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 1200px) {
  .services-grid__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Split cards (Argo/coach page) need more width per card than the 4-across
     home layout allows for a horizontal photo+text split to read well —
     2-across instead, overriding the rule above for this specific variant. */
  .services-grid__grid:has(.service-card--split) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--card-padding);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  transition: box-shadow var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-card);
  position: relative;
  overflow: hidden;
}

/* Gold accent line top of card on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  transform-origin: left;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Reset old Section 8 icon styles — icon class now on <img> directly */
.service-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-muted);
  border-radius: 0;
  flex-shrink: unset;
  margin-bottom: var(--space-3xs);
  object-fit: contain;
  background: none;
  align-self: flex-start;
  color: var(--color-accent);
}

.service-card__icon svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.service-card__icon-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--color-border);
}

.service-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-card__title {
  font-size: var(--text-lg);
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  overflow-wrap: break-word;
}

.service-card__intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

.service-card__situation {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}


.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-xs);
  transition: gap var(--duration-base) var(--ease-out);
  font-family: var(--font-body);
}

/* 2026-07-27 — split card (Argo/coach page): real photo left, white text
   panel right. Reuses .service-card__body/eyebrow/title/intro/link as-is
   (already styled above for the base .service-card) — only the outer
   layout and the new .service-card__photo column are added here. */
.service-card--split {
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}

.service-card--split .service-card__photo {
  position: relative;
  width: 42%;
  flex-shrink: 0;
  background-color: var(--color-border);
}

.service-card--split .service-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Position only — the sitewide [class*="-placeholder"] rule (layout.css)
   supplies the branded texture background, matching every other missing-
   image placeholder on the site instead of a bespoke gradient here. */
.service-card--split .service-card__photo-placeholder {
  position: absolute;
  inset: 0;
}

.service-card--split .service-card__body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
}

@media (max-width: 640px) {
  .service-card--split {
    flex-direction: column;
  }

  .service-card--split .service-card__photo {
    width: 100%;
    height: 160px;
  }
}

.service-card--home {
  padding: 0;
}

.service-card--home .service-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;
}

.service-card__media {
  background-color: var(--color-border);
  background-image: linear-gradient(
    100deg,
    var(--color-border) 30%,
    var(--color-bg-alt) 50%,
    var(--color-border) 70%
  );
  background-size: 200% 100%;
  animation: pv-img-shimmer 1.6s ease-in-out infinite;
}

.service-card__media:has(img.is-loaded) {
  animation: none;
  background-image: none;
}

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

.service-card--home .service-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.service-card--home:hover .service-card__media-img {
  transform: scale(1.05);
}

.service-card--home .service-card__media-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

/* Circular icon badge, half-overlapping the photo's bottom edge.
   Sibling of .service-card__media (not nested inside it) so the photo's
   own overflow: hidden — needed to crop the image — never clips the badge;
   the overlap comes from a negative margin-top in normal flex flow instead
   of absolute positioning, so it can't drift or collide with body text.
   Color/border come from the shared .pv-badge--on-photo modifier — this
   selector only keeps the positioning/overlap mechanics for this layout. */
.service-card--home .service-card__icon-badge {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  flex-shrink: 0;
  margin: calc(var(--space-6) * -1) 0 var(--space-2xs) var(--space-6);
  width: 48px;
  height: 48px;
}

.service-card--home .service-card__icon-badge .pv-icon {
  width: 22px;
  height: 22px;
}

.service-card--home .service-card__body {
  padding: 0 var(--card-padding) var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 1;
}

.service-card--home .service-card__intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
}

.service-card--home .service-card__checklist {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.service-card--home .service-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-primary);
  line-height: 1.4;
}

.service-card--home .service-card__checklist li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only the first bullet shows by default — a hint that there's more.
   The rest slide/fade in on hover; the row grows in step via the flex
   container's align-items: stretch, matching the accompanying width grow. */
.service-card--home .service-card__checklist li:nth-child(n+2) {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

.service-card--home:hover .service-card__checklist li:nth-child(n+2),
.service-card--home:focus-visible .service-card__checklist li:nth-child(n+2) {
  /* 4.5em fits up to 3 wrapped lines at line-height 1.4 on --text-sm (14px) —
     3.2em only fit ~2 lines and clipped the third line of longer bullets. */
  max-height: 4.5em;
  opacity: 1;
}

.service-card--home .service-card__link {
  margin-top: auto;
  padding-top: var(--space-2xs);
}

/* 2026-07-23 (5.4-adjacent) — Teenused listing cards, redesigned from the
   2.4 small-top-photo grid card into a full-bleed background-photo row,
   stacked one per line instead of 4-across (Karl: "full length image bg
   cards ... under one another"). Bottom-anchored content, so the gradient
   is dark-at-bottom fading to clear (inverted from .pv-hero-photo-overlay's
   top-anchored shape) — reuses the same --color-hero-photo-overlay-* tokens
   for consistency rather than inventing new ones. Pain points render as
   pills instead of a checklist; still always visible, no hover reveal,
   same reasoning as the 2.4 checklist decision it replaces. No icon badge
   here — doesn't read well floating over a photo at this size. */
.service-card--full-bleed {
  position: relative;
  overflow: hidden;
  /* 2026-07-23: raised from 320px and paired with line-clamps on the title/
     intro below so all 4 cards land at the same height regardless of copy
     length, instead of each card growing to fit its own text. */
  min-height: 420px;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  padding: 0;
  border: 2px solid transparent;
  display: flex;
  /* Base .service-card sets flex-direction: column, so the main axis here
     is vertical — justify-content (not align-items) is what pushes the
     single .service-card__body child to the bottom. Using align-items
     here would push it to the cross-axis end (the right edge) instead. */
  flex-direction: column;
  justify-content: flex-end;
  /* 2026-07-23: reworked to match .post-card's hover recipe (Karl's pick —
     the "Viimased artiklid" blog cards) instead of the original border+
     scale+heavy-shadow treatment, which read too aggressive. Redeclare the
     full transition list (not just add box-shadow) since `transition` is a
     shorthand and this selector already out-specifies the base rule. */
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.service-card--full-bleed:hover {
  /* Base .service-card:hover (line 4327) sets border-color: var(--color-accent)
     at equal specificity — explicitly neutralize it here, since this card's
     border is meant to stay fully transparent per the post-card-style hover. */
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* 2026-07-23: with the taller uniform card height, the text block now
   covers most of the card's vertical space (not just a bottom strip), so
   the contrast floor (--color-hero-photo-overlay-3, the same "never lighter
   than this through the text zone" token the page heroes use) needs to
   extend much further up — otherwise the eyebrow/title read fine against a
   dark photo and unreadable against a bright one, which is exactly the bug
   this replaces. Only the top sliver (where there's no text) is allowed to
   clear to the photo. */
.service-card--full-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    var(--color-hero-photo-overlay-1) 0%,
    var(--color-hero-photo-overlay-2) 15%,
    var(--color-hero-photo-overlay-3) 55%,
    var(--color-hero-photo-overlay-4) 90%,
    transparent 100%
  );
  pointer-events: none;
}

.service-card--full-bleed .service-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-xl);
  max-width: 640px;
  gap: var(--space-3xs);
}

.service-card--full-bleed .service-card__eyebrow {
  color: var(--color-accent);
  /* Forced to one line — some category names (e.g. "Executive coaching ja
     juhtimiscoaching") wrap to 2 lines at this width while shorter ones
     don't, which was the other source of the cards' height mismatch. */
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-card--full-bleed .service-card__title {
  color: var(--color-on-dark);
  font-size: var(--text-2xl);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card--full-bleed .service-card__pain-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
  /* No height cap here (tried one, reverted) — at narrow widths each pill
     wraps to its own row (3 pills = 3 rows), so a fixed cap sized for
     desktop's 1-row layout was silently hiding 2 of 3 pain points on
     mobile. These cards stack full-width one per row rather than sitting
     side by side, so the small residual height variance this leaves
     between cards is a smaller cost than losing real content. */
}

.service-card--full-bleed .service-card__pain-pill {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-surface-dark-border-strong);
  color: var(--color-on-dark);
  /* Each pill stays one line — the row wraps, not the pill's own text. */
  white-space: nowrap;
}

.service-card--full-bleed .service-card__intro {
  margin-top: var(--space-2xs);
  color: var(--color-on-dark-muted);
  max-width: 480px;
  /* No line-clamp here (tried one, reverted) — it truncated with a "…"
     mid-sentence on longer copy. Uniform height instead comes from the 4
     services' intro copy being hand-balanced to roughly equal length in
     template-services.php, not from cutting text off. */
}

.service-card--full-bleed .service-card__link {
  color: var(--color-accent);
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

/* Real bug, found live: the base .service-card:hover .service-card__link
   rule (components.css line 623, gap: var(--space-3)) out-specifies the
   rule above on ANY card hover, widening the gap between text and arrow —
   which reads as the arrow moving on its own before you've even reached
   the link. Then hovering the link added a second, separate transform on
   top, so the arrow visibly moved twice. Pinning the gap here stops the
   base rule's leak; only the link-hover transform below should move it. */
.service-card--full-bleed:hover .service-card__link {
  gap: var(--space-3xs);
}

.service-card--full-bleed .service-card__link-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}

/* 2026-07-23: scoped to the link itself (not the whole card) — the arrow
   should only move when you're actually pointed at "Tutvu lähemalt", not
   any time the card is hovered. Card-level hover already has its own cue
   (lift + shadow above). */
.service-card--full-bleed .service-card__link:hover .service-card__link-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .service-card--full-bleed,
  .service-card--full-bleed .service-card__link-arrow {
    transition: none;
  }
}

/* Hover accordion — homepage row only. :has() scopes this so the
   coach-page icon-card grid (.service-card without --home) is
   unaffected and stays display: grid. */
@media (min-width: 1200px) {
  .services-grid__grid:has(.service-card--home) {
    display: flex;
    align-items: stretch;
  }

  .services-grid__grid:has(.service-card--home) .service-card--home {
    flex: 1 1 0%;
    min-width: 0;
    transition: flex-grow var(--transition-base);
  }

  .services-grid__grid:has(.service-card--home) .service-card--home:hover,
  .services-grid__grid:has(.service-card--home) .service-card--home:focus-visible {
    flex-grow: 2.4;
    /* Fixed floor, hover-scoped only (not on the default state, which stays
       its current compact height): measured live, hovering each of the 4
       cards individually gave row heights of 708/708/708/662px — the row's
       height is driven by align-items: stretch against whichever card is
       currently widest, so a shorter card's own content made the whole row
       visibly shrink when it was the one hovered. Forcing this floor on
       whichever card IS hovered means the row always stretches to the same
       height no matter which of the 4 you're on. */
    min-height: 720px;
  }

  .services-grid__grid:has(.service-card--home) .service-card--home .service-card__media {
    aspect-ratio: unset;
    height: 220px;
  }
}

/* ============================================================
   30f ā€” Testimonials (navy band)
   ============================================================ */

.testimonials {
  background: var(--color-primary);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

/* Subtle large quotation mark background */
.testimonials::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 280px;
  color: var(--color-watermark-on-dark);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.testimonials__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
  position: relative;
  z-index: 1;
}

.testimonials__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xl);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Reset old Section 25 track ā€” switch from flex/translateX to show/hide */
.testimonials__track {
  display: block;
  gap: var(--space-6);
  transition: none;
  will-change: transform;
  position: relative;
  overflow: visible;
  transform: none !important;
}

.testimonial-card {
  display: none;
}

.testimonial-card--active {
  display: block;
}

.testimonial-card__body {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-on-dark);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

@media (max-width: 640px) {
  .testimonial-card__body {
    font-size: var(--text-lg);
  }
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.testimonial-card__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent-border-strong);
  flex-shrink: 0;
}

.testimonial-card__photo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface-dark-card);
  border: 2px solid var(--color-accent-border-strong);
  flex-shrink: 0;
}

.testimonial-card__author-info {
  text-align: left;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-on-dark);
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.testimonial-card__post-link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Navigation dots */
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.testimonials__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
  background: var(--color-surface-dark-dot);
}

.testimonials__dot--active {
  background: var(--color-accent);
  width: 20px;
  border-radius: 3px;
}

/* Prev/next */
.testimonials__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.testimonials__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  background: transparent;
  color: var(--color-on-dark);
  cursor: pointer;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.testimonials__btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}


/* ============================================================
   30g ā€” FAQ refinement for coach page
   ============================================================ */

.faq {
  padding: var(--space-2xl) 0;
  background: var(--color-bg-alt);
}

.faq__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.faq__heading {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.faq-list {
  max-width: 720px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

/* Reset old Section 20 border/radius on faq-item */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) var(--ease-default);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-default);
  line-height: 1.4;
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-alt);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  color: var(--color-accent);
  font-size: var(--text-lg);
  line-height: 1;
  border: 1.5px solid var(--color-accent);
  background: none;
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

/* Override old Section 20 max-height approach with display show/hide */
.faq-item__answer {
  max-height: none;
  overflow: visible;
  transition: max-height var(--duration-slow) var(--ease-default);
  display: none;
  padding: 0 0 var(--space-sm);
}

.faq-item--open .faq-item__answer {
  max-height: none;
  display: block;
}

.faq-item__answer p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .faq {
    padding: var(--space-3xl) 0;
  }

  .faq__heading {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2xl);
  }

  .faq-item__trigger {
    padding: var(--space-md) 0;
  }

  .faq-item__question,
  .faq-item__answer p {
    font-size: var(--text-md);
  }

  .faq-item__answer {
    padding: 0 0 var(--space-md);
  }
}

.faq-no-answer {
  max-width: 720px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  text-align: center;
}

.faq-no-answer__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-2xs);
}

.faq-no-answer__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  margin: 0 0 var(--space-sm);
}

.faq-no-answer__cta {
  display: inline-block;
}

/* ============================================================
   31. SERVICE SINGLE
   ============================================================ */

/* ā”€ā”€ 31a ā€” Service Hero ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.service-hero {
  padding: var(--space-2xl) 0;
}

.service-hero-placeholder {
  /* picked up automatically by the sitewide [class*="-placeholder"] rule
     when no service_hero_image is set */
}

.service-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 1;
  width: 100%;
}

@media (min-width: 768px) {
  .service-hero {
    padding: var(--space-3xl) 0;
  }
}

.service-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 560px;
  padding-top: var(--space-2xl);
  color: var(--color-on-dark);
}

.service-hero__gold-line {
  width: 36px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: var(--space-2xs);
  border-radius: 2px;
}

.service-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: italic;
  color: var(--color-on-dark);
  line-height: 1.15;
}

@media (min-width: 768px) {
  .service-hero__title {
    font-size: var(--text-4xl);
  }
}

.service-hero__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-on-dark-muted);
  line-height: 1.55;
  max-width: 34rem;
}

@media (min-width: 768px) {
  .service-hero__description {
    font-size: var(--text-lg);
    line-height: 1.6;
    max-width: 480px;
  }
}

.service-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.service-hero__coach {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
}

.service-hero__coach-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.service-hero__coach-photo-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-dark-placeholder);
  flex-shrink: 0;
}

.service-hero__coach-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

.service-hero__coach-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.service-hero__coach-link:hover {
  color: var(--color-accent);
}

.service-lead {
  padding: var(--space-xl) 0 0;
}

.service-lead__text {
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── 31b — Service Outcomes ("Mida me koos saavutame") ─────────── */
.service-outcomes {
  padding: var(--space-2xl) 0;
}

.service-outcomes__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  align-items: start;
}

.service-outcomes__divider {
  display: none;
}

@media (min-width: 768px) {
  .service-outcomes {
    padding: var(--space-3xl) 0;
  }

  .service-outcomes__inner {
    grid-template-columns: 1fr 1px 1fr;
    gap: var(--space-2xl);
    align-items: stretch;
  }

  .service-outcomes__divider {
    display: block;
    width: var(--border-width);
    background: var(--color-accent);
    opacity: 0.35;
  }
}

.service-outcomes__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.service-outcomes__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: var(--leading-prose);
}

.service-outcomes__body p {
  margin-bottom: var(--space-sm);
}

.service-outcomes__body p:last-child {
  margin-bottom: 0;
}

.service-outcomes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.service-outcomes__item {
  font-size: var(--text-base);
  color: var(--color-text);
  padding-left: var(--space-8);
  position: relative;
  line-height: var(--leading-relaxed);
}

.service-outcomes__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: var(--space-5);
  height: var(--space-5);
  background-color: var(--color-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* ā”€ā”€ 31d ā€” Featured Testimonial ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.service-testimonial {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.service-testimonial__inner {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.service-testimonial__body {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0;
}

.service-testimonial__author {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.service-testimonial__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.service-testimonial__photo-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.service-testimonial__name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
}

.service-testimonial__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-align: left;
}

@media (min-width: 768px) {
  .service-testimonial {
    padding: var(--space-3xl) 0;
  }

  .service-testimonial__body {
    font-size: var(--text-2xl);
  }
}

/* =============================================================================
   Section 32a ā€” Services Listing Hero
   ============================================================================= */

.services-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

/* 5.2 (2026-07-23): type-only navy hero, same treatment as Partnerid's
   (both hub-diagram/figure concepts there were rejected in favor of this) —
   Teenused was otherwise the flattest page on the site: hero, grid, and
   contact all read as the same near-white tone. */
.services-hero--trimmed {
  background: var(--color-primary);
}

/* Large decorative "?" — every card below answers a version of this */
.services-hero::before {
  content: '?';
  position: absolute;
  top: -0.15em;
  right: var(--container-padding);
  font-family: var(--font-heading);
  font-size: 320px;
  line-height: 1;
  color: var(--color-watermark-on-light);
  pointer-events: none;
  user-select: none;
}

.services-hero--trimmed::before {
  color: var(--color-watermark-on-dark);
}

.services-hero--trimmed .services-hero__title {
  color: var(--color-on-dark);
}

.services-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.services-hero__content {
  max-width: 640px;
}

.services-hero__gold-line {
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.services-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
  display: block;
}

.services-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

@media (min-width: 641px) {
  .services-hero__title {
    font-size: var(--text-4xl);
  }
}

.services-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  max-width: 520px;
}

.services-hero--has-image .services-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.services-hero__photo {
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.services-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .services-hero--has-image .services-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  }

  .services-hero--has-image .services-hero__content {
    max-width: none;
  }

  .services-hero__photo {
    aspect-ratio: 3 / 4;
  }
}

/* =============================================================================
   Section 32b ā€” Services Listing Grid
   ============================================================================= */

.services-listing {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.services-listing__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.services-listing__quiz-nudge {
  text-align: center;
  margin-top: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.services-listing__quiz-nudge a {
  color: var(--color-primary);
  font-weight: 600;
  margin-left: var(--space-2xs);
}

.services-listing__quiz-nudge a:hover {
  color: var(--color-accent);
}

/* 2026-07-23: was a 1/2/4-column responsive grid — now always a single
   stacked column of full-bleed cards (see .service-card--full-bleed above),
   so the column breakpoints are gone. */
.services-listing__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* .services-listing__card* removed 2026-07-22 (2.4) — replaced by the
   shared .service-card / .service-card--listing system above, itself
   replaced 2026-07-23 by .service-card--full-bleed. */

/* ============================================================
   34b — Home Hero (full-bleed editorial)
   ============================================================ */

.home-hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--color-primary); /* fallback if no image */
  background-size: cover;
  background-position: 70% center; /* keeps the portrait subject in frame on narrow crops */
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-3xl);
  overflow: hidden;
}

/* Pull hero up behind the transparent sticky nav so its photo bleeds
   underneath - but give the bottom-anchored text content its own
   clearance from that same nav via padding-top, so the eyebrow/heading
   don't start out overlapping the logo before any scrolling happens
   (padding-top grows the box downward from its already-pulled-up top, so
   it pushes the flex-end-anchored content down without re-exposing the
   nav gap the negative margin was pulling closed). */
body.has-hero .home-hero {
  margin-top: calc(-1 * var(--nav-height-mobile));
  padding-top: calc(var(--nav-height-mobile) + var(--space-lg));
}

@media (min-width: 900px) {
  body.has-hero .home-hero {
    margin-top: calc(-1 * var(--nav-height));
    padding-top: calc(var(--nav-height) + var(--space-lg));
  }
}

/* Announcement bar sits above the hero in normal flow and isn't covered by
   the nav pull-up above — subtract its measured height (set via JS in
   main.js) so the hero + bar together never exceed one viewport. */
body.has-hero .home-hero {
  min-height: calc(100svh - var(--announce-bar-height, 0px));
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,  rgba(6, 12, 22, 0.95) 0%,  rgba(6, 12, 22, 0.60) 40%, rgba(6, 12, 22, 0.10) 100%),
    linear-gradient(to right, rgba(6, 12, 22, 0.70) 0%, rgba(6, 12, 22, 0.25) 55%, transparent 100%);
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.home-hero__content {
  max-width: 640px;
}

.home-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.home-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 700;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.home-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: var(--space-lg);
}

/* 2.16 (2026-07-23): down to 2 CTAs, one row — the former row1/row2 split
   and .home-hero__cta-tertiary styling are gone with the third button. */
.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* ============================================================
   34c ā€” Coach Intro (Homepage)
   ============================================================ */

.home-coach {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-coach__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  align-items: center;
}

@media (min-width: 768px) {
  .home-coach__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.home-coach__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--card-radius);
  display: block;
}

.home-coach__photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-border);
  border-radius: var(--card-radius);
}

.home-coach__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-coach__gold-line {
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-2xs);
}

.home-coach__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-coach__name {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}

@media (max-width: 640px) {
  .home-coach__name {
    font-size: var(--text-3xl);
  }
}

.home-coach__tagline {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1.4;
}

.home-coach__bio {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 440px;
}


/* ============================================================
   35b ā€” Home Coaches Section
   ============================================================ */

.home-coaches {
  background: var(--color-primary);
  padding: var(--section-padding-y) 0;
}

.home-coaches--b1 {
  padding: 0;
}

.home-coaches__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.home-coaches__header-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}

.home-coaches__header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-coaches__header-title {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
}

.home-coaches__eyebrow {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 600;
}

.home-coaches__title {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-4xl);
  color: var(--color-text-inverse);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}

.home-coaches__title em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 400;
}

.home-coaches__lead {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--leading-prose);
  margin: 0;
}

.home-coaches__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

.home-coaches__grid--scroll {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-coaches__grid--scroll::-webkit-scrollbar {
  display: none;
}

.coach-card-platform {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 300px;
  background: var(--color-surface-dark-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  transition: var(--transition-transform);
}

.coach-card-platform__photo {
  width: 100%;
  height: 340px;
  overflow: hidden;
  flex-shrink: 0;
}

.coach-card-platform__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.coach-card-platform__photo-placeholder {
  width: 100%;
  height: 340px;
  background: var(--color-surface-dark-placeholder);
}

.coach-card-platform__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.coach-card-platform__role {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.coach-card-platform__name {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-lg);
  color: var(--color-white);
  font-weight: 600;
}

.coach-card-platform__bio {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  line-height: var(--leading-prose);
}

.coach-card-platform__link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.coach-card-platform__link:hover {
  color: var(--color-accent);
}

.coach-card-platform:hover {
  transform: translateY(-1px);
  background: var(--color-surface-dark-hover);
  border-color: var(--color-accent-border);
}

.coach-card-platform:hover .coach-card-platform__photo-img {
  transform: scale(1.015);
}

.coach-card-platform:hover .coach-card-platform__name {
  color: var(--color-accent);
}

/* B1 — Split alternating rows layout */
.home-coaches__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface-dark-card);
  margin-bottom: var(--space-2xl);
}

.coach-row {
  display: grid;
  grid-template-columns: 2fr 3fr;
  background: var(--color-primary);
}

.coach-row--right {
  grid-template-columns: 3fr 2fr;
}

.coach-row__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.coach-row--right .coach-row__photo {
  order: 2;
}

.coach-row__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.coach-row__photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.coach-row__content {
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.coach-row--right .coach-row__content {
  order: 1;
}

.coach-row__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.coach-row__name {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text-inverse);
  margin: 0;
  letter-spacing: 0;
}

.coach-row__divider {
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.6;
}

.coach-row__bio {
  font-size: 14px;
  color: var(--color-text-inverse-muted);
  line-height: 1.75;
  margin: 0;
}

.coach-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: color var(--duration-base) var(--ease-default);
}

.coach-row__link:hover {
  color: var(--color-text-inverse);
}

/* B2 — Card grid layout, dark navy background */
.home-coaches--b2 {
  background: var(--color-primary);
  padding: var(--space-3xl) 0;
}

.home-coaches__grid-b2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.home-coaches__grid-b2--featured {
  max-width: var(--container-md);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .home-coaches__grid-b2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-coaches__grid-b2--featured {
    grid-template-columns: 1fr;
    max-width: var(--container-lg);
  }
}

@media (min-width: 1200px) {
  .home-coaches__grid-b2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-coaches__grid-b2--featured {
    grid-template-columns: 1fr;
  }
}

.coach-card-b2 {
  background: var(--color-surface-dark-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-transform);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.coach-card-b2--featured {
  display: grid;
  grid-template-columns: 1fr;
}

.coach-card-b2:hover {
  transform: translateY(-2px);
  background: var(--color-surface-dark-hover);
  border-color: var(--color-accent-border);
}

@media (min-width: 768px) {
  .coach-card-b2--featured {
    grid-template-columns: minmax(calc(var(--space-16) * 3.5), 0.45fr) minmax(0, 1fr);
  }

  .coach-card-b2--featured .coach-card-b2__photo {
    aspect-ratio: 4 / 5;
    height: 100%;
  }

  .coach-card-b2--featured .coach-card-b2__content {
    justify-content: center;
    padding: var(--space-8);
  }

  .coach-card-b2--featured .coach-card-b2__bio {
    flex-grow: 0;
    max-width: 48ch;
  }
}

.coach-card-b2__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
}

.coach-card-b2__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.coach-card-b2:hover .coach-card-b2__photo-img {
  transform: scale(1.02);
}

.coach-card-b2__photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.coach-card-b2__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-lg);
  flex-grow: 1;
}

.coach-card-b2__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.coach-card-b2__name {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-inverse);
  margin: 0;
  letter-spacing: 0;
  line-height: 1.2;
}

.coach-card-b2__bio {
  font-size: 14px;
  color: var(--color-text-inverse-muted);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.coach-card-b2__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.coach-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: fit-content;
}

.coach-stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-inverse-dim);
  font-weight: 600;
}

.coach-stat__value {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-inverse);
  line-height: 1;
}

.coach-card-b2__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: color var(--duration-base) var(--ease-default);
}

.coach-card-b2__link:hover {
  color: var(--color-text-inverse);
}

/* Featured single-coach layout — replaces the boxed card for is_front_page() with one coach.
   v2 (2026-07-22): full-bleed background photo with a navy gradient fade instead of a
   boxed photo column — the old fixed rectangular crop is what created the hard-edge/
   dead-space complaint this replaces. Mobile: photo becomes a top band that fades into
   navy at its bottom edge, content stacks below. Desktop: photo fills the right side,
   fading into navy from the left so text never sits on top of unmasked photo. */
.coach-feature {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.coach-feature--v2 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-primary);
}

/* Mobile: photo is a fixed-height band above the content, not an overlay —
   a background-image stretched across the whole card's height would just
   reproduce the original crop/dead-space problem at a bigger size. */
.coach-feature__photo-layer {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: top center;
}

.coach-feature__photo-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-primary) 0%, transparent 75%);
}

.coach-feature__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

@media (min-width: 768px) {
  .coach-feature--v2 {
    min-height: 420px;
    display: flex;
    align-items: center;
  }

  /* Desktop: photo overlays the full card on the right, fading into navy
     from the left, so the text column never sits on unmasked photo. */
  .coach-feature__photo-layer {
    position: absolute;
    inset: 0;
    height: auto;
    background-position: right center;
  }

  .coach-feature__photo-layer::after {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 42%, transparent 85%);
  }

  .coach-feature__content {
    max-width: 55%;
    padding: var(--space-2xl);
  }
}

.coach-feature__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.coach-feature__name {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-inverse);
  margin: 0;
  line-height: 1.15;
}

.coach-feature__bio {
  font-size: var(--text-md);
  color: var(--color-text-inverse-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 48ch;
}

.coach-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.coach-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-default);
}

.coach-feature__link:hover {
  color: var(--color-text-inverse);
}

/* A3 — Interactive tab switcher */
.value-props-a3--editorial {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.value-props-a3__step {
  display: grid;
  grid-template-columns: minmax(var(--space-12), auto) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.value-props-a3__sub {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-hover);
}

/* .value-props-a3__icon removed 2026-07-23 (5.5 icon unification) — markup
   now uses the shared .pv-badge.pv-badge--lg instead of a bespoke badge. */

.value-props-a3__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.value-props-a3__heading {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 0;
}

.value-props-a3__body {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 0;
}

@media (min-width: 768px) {
  .value-props-a3--editorial {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .value-props-a3__step {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 100%;
  }
}

.home-coaches__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.home-coaches__empty {
  text-align: center;
  color: var(--color-on-dark-muted);
  font-size: var(--text-base);
}


/* ============================================================
   35a ā€” Home Value Propositions (dark editorial)
   ============================================================ */

.home-value-props {
  background: var(--color-bg);
  padding: var(--section-padding-y) 0;
}

.home-value-props__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.home-value-props__header {
  margin-bottom: var(--space-3xl);
}

.home-value-props__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.home-value-props__title {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-4xl);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 0;
}

.home-value-props__lead {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--leading-prose);
  max-width: 36ch;
}

.home-value-props__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--color-border);
}

@media (min-width: 768px) {
  .home-value-props__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-value-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-bg-card);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.home-value-item__number {
  position: absolute;
  top: -12px;
  right: var(--space-md);
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: 88px;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.04;
  line-height: 1;
  user-select: none;
}

.home-value-item__circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
  letter-spacing: 0;
  flex-shrink: 0;
}

.home-value-item__heading {
  font-family: var(--font-heading), 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 0;
}

.home-value-item__body {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: var(--leading-prose);
  margin: 0;
}

.home-value-item:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
}


/* ============================================================
   38a - Home Stats Band
   ============================================================ */

.home-stats {
  background: var(--color-bg-dark);
  padding-block: var(--space-10);
}

.home-stats-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.home-stats-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  padding-inline-start: var(--space-4);
  border-left: var(--border-width) solid var(--color-border-dark);
}

.home-stats-number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-inverse);
  line-height: 1;
}
.home-stats-number em {
  font-style: italic;
  color: var(--color-accent);
}

.home-stats-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-inverse-muted);
  opacity: 1;
}

.home-stats-divider {
  display: none;
}

@media (min-width: 768px) {
  .home-stats {
    padding-block: var(--space-12);
  }

  .home-stats-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .home-stats-number {
    font-size: var(--text-5xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stats * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   37a — FAQ Page Hero
   ============================================================ */

.faq-page-hero {
  background: var(--color-primary);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.faq-page-hero__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.faq-page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.faq-page-hero__media {
  position: relative;
  width: 100%;
}

.faq-page-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.faq-page-hero--with-image .faq-page-hero__inner {
  max-width: var(--container-max);
}

.faq-page-hero__gold-line {
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-xs);
}

.faq-page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.faq-page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  margin: 0;
}

.faq-page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
  opacity: 0.85;
  max-width: 560px;
  margin: 0;
}

@media (min-width: 641px) {
  .faq-page-hero__title {
    font-size: var(--text-4xl);
  }

  .faq-page-hero--with-image .faq-page-hero__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-2xl);
  }

  .faq-page-hero--with-image .faq-page-hero__content {
    align-items: flex-start;
    flex: 1;
  }

  .faq-page-hero--with-image .faq-page-hero__media {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page-hero * {
    animation: none !important;
    transition: none !important;
  }
}

.faq-hero-testimonial {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  max-width: 320px;
}

.faq-hero-testimonial__body {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0;
}

.faq-hero-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.faq-hero-testimonial__photo,
.faq-hero-testimonial__photo-placeholder {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.faq-hero-testimonial__photo-placeholder {
  background: var(--color-bg-alt);
}

.faq-hero-testimonial__role {
  font-weight: 400;
}

@media (min-width: 641px) {
  .faq-hero-testimonial {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    left: var(--space-md);
    margin: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}

/* ============================================================
   37b — Testimonials Page Hero
   ============================================================ */

.testimonials-page-hero {
  background: var(--color-primary);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.testimonials-page-hero__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Eyebrow/H1 + CTAs — a row on desktop, stacked on mobile. Separate from
   the quote block below it (2026-07-23 redesign: was one flex row with the
   quote awkwardly vertically centered beside it; now the quote gets its own
   full-width, dominant treatment underneath instead). */
.testimonials-page-hero__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.testimonials-page-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
}

.testimonials-page-hero__gold-line {
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-xs);
}

.testimonials-page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.testimonials-page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  margin: 0;
}

.testimonials-page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
  opacity: 0.85;
  max-width: 480px;
  margin: 0;
}

.testimonials-page-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Real client pull-quote — now the hero's dominant statement (2026-07-23),
   full-width below the top row, separated by a gold divider rather than
   floating centered beside the intro text with no visual anchor. */
.testimonials-page-hero__quote {
  position: relative;
  margin: 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-accent-border);
  /* 2026-07-23: was capped at 760px, wrapping longer quotes into 6-7 lines
     and making the hero very tall — full container width instead, so the
     same text wraps into fewer, wider lines. */
  max-width: 100%;
}

.testimonials-page-hero__quote::before {
  content: '\201C';
  position: absolute;
  top: -14px;
  left: -8px;
  font-family: var(--font-heading);
  font-size: 140px;
  line-height: 1;
  color: var(--color-watermark-on-dark);
  pointer-events: none;
  user-select: none;
}

.testimonials-page-hero__quote-body {
  position: relative;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  margin: 0 0 0 var(--space-lg);
}

.testimonials-page-hero__quote-author {
  position: relative;
  margin: var(--space-sm) 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.testimonials-page-hero__quote-role {
  font-weight: 400;
  color: var(--color-text-inverse-muted);
}

@media (min-width: 641px) {
  .testimonials-page-hero__title {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 700px) {
  .testimonials-page-hero__top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .testimonials-page-hero__actions {
    flex-shrink: 0;
  }
}

@media (min-width: 900px) {
  .testimonials-page-hero__quote-body {
    font-size: var(--text-3xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-page-hero * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   39a - Homepage Testimonials - dark pause
   Reverted from the 2026-07-22 cream-card refresh back onto the same
   navy + giant watermark-quote treatment the coach-page mode already
   uses (see .testimonials / .testimonials::before above). The header
   row (eyebrow/heading/lead/CTA) is kept and restyled for dark;
   everything else falls back to the base dark styling.
   ============================================================ */









.testimonials--home .testimonials__inner {
  max-width: var(--container-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-align: left;
}

.testimonials__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonials__header-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Used by the coach-page (non-home) markup branch — wraps quote body + author. */
.testimonial-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonials__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.testimonials--home .testimonials__heading {
  margin-bottom: 0;
  color: var(--color-text-inverse);
  font-size: var(--text-2xl);
  font-style: italic;
  text-transform: none;
  letter-spacing: var(--tracking-tight);
}

.testimonials__lead {
  max-width: var(--container-sm);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.testimonials__page-link {
  align-self: flex-start;
}

/* Home testimonial marquee — a continuously auto-scrolling row, replacing
   the old dot/arrow carousel for this mode only (coach pages keep the
   carousel below, .testimonials__track and friends). Cards are duplicated
   server-side (--marquee-repeat) enough times to keep the strip comfortably
   wider than the viewport so the loop point never shows a visible seam;
   the CSS animation always shifts by exactly one copy's width
   (100% / --marquee-repeat), which is what makes the loop seamless
   regardless of how many copies are actually rendered. */
.testimonials-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonials-marquee__shell {
  position: relative;
  overflow: hidden;
}

.testimonials-marquee__shell::before,
.testimonials-marquee__shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--space-xl);
  pointer-events: none;
}

.testimonials-marquee__shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}

.testimonials-marquee__shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-primary), transparent);
}

.testimonials-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: testimonials-marquee-scroll var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}

/* Paused via hover/focus (mouse + keyboard) and via .is-touch-paused
   (touchstart in main.js, since touch devices have no hover state). */
.testimonials-marquee.is-touch-paused .testimonials-marquee__track,
.testimonials-marquee__shell:hover .testimonials-marquee__track,
.testimonials-marquee__shell:focus-within .testimonials-marquee__track {
  animation-play-state: paused;
}

@keyframes testimonials-marquee-scroll {
  to { transform: translateX(calc(-100% / var(--marquee-repeat, 2))); }
}

.testimonial-marquee-card {
  display: flex;
  flex: 0 0 min(21rem, 78vw);
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-surface-dark-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--card-radius);
}

.testimonial-marquee-card__quote-mark {
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
}

.testimonial-marquee-card__body {
  margin-bottom: var(--space-lg);
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

.testimonial-marquee-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
}

.testimonial-marquee-card__photo,
.testimonial-marquee-card__photo-placeholder {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 2px solid var(--color-accent-soft-strong);
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-marquee-card__photo-placeholder {
  background: var(--color-surface-dark-placeholder);
}

.testimonial-marquee-card__author-info {
  text-align: left;
}

.testimonial-marquee-card__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-dark);
}

.testimonial-marquee-card__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

.testimonial-marquee-card__post-link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-on-dark-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .testimonial-marquee-card {
    flex-basis: 24rem;
    padding: var(--space-xl);
  }
}

/* prefers-reduced-motion: a sustained infinite auto-scroll is exactly the
   kind of motion this setting exists to suppress, so it can't just run at
   full speed regardless — but stopping it dead also isn't required by the
   setting itself, and a hard stop would leave a static row (whichever cards
   happened to be mid-frame, mixed in with the aria-hidden loop-duplicates)
   with no obvious way to browse the rest. Slowing it to roughly a quarter
   speed keeps it recognizable as "browse at your own pace" rather than
   "stopped/broken," while cutting the sustained-motion exposure the
   setting is meant to reduce. Everything else in this section still gets
   the full animation:none kill (see the .testimonials--home * rule above,
   which excludes this selector) since nothing else on the page needs to
   keep moving. */
@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee__track {
    animation-duration: calc(var(--marquee-duration, 40s) * 4);
  }
}

@media (min-width: 768px) {
  .testimonials__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "heading cta"
      "lead lead";
    align-items: start;
    column-gap: var(--space-8);
    row-gap: var(--space-3);
  }

  .testimonials__header-copy {
    display: contents;
  }

  .testimonials__eyebrow {
    grid-area: eyebrow;
  }

  .testimonials--home .testimonials__heading {
    grid-area: heading;
  }

  

  .testimonials__lead {
    grid-area: lead;
  }

  .testimonials__page-link {
    grid-area: cta;
    align-self: center;
  }
}

/* ============================================================
   39b - Testimonials Editorial Page
   ============================================================ */







.testimonials__page-intro {
  display: flex;
  justify-content: center;
}

.testimonials__page-header {
  max-width: var(--container-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}





































.testimonials__supporting {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.testimonials__supporting-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonials__supporting-title {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--color-primary);
}

.testimonials__supporting-lead {
  max-width: var(--container-sm);
  color: var(--color-text-muted);
}

.testimonials__grid {
  display: grid;
  gap: var(--space-6);
}













@media (min-width: 768px) {
  

  

  

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

@media (prefers-reduced-motion: reduce) {
  /* Excludes .testimonials-marquee__track: unlike everything else in this
     section, that animation isn't killed under reduced motion, only slowed
     way down (see the marquee-specific rule above) — a continuous infinite
     auto-scroll is exactly the sustained, uncontrollable motion this media
     feature exists to suppress, so running it at full speed regardless
     isn't an option, but a much slower version is a reasonable middle
     ground rather than dropping to a static, harder-to-browse strip. */
  .testimonials--home *:not(.testimonials-marquee__track) {
    animation: none !important;
    transition: none !important;
  }
}

/* Section 39 (Minu lugu page CSS, ~250 lines) deleted 2026-07-23
   (5.0a/5.0g dead-code audit) — the minu-lugu-hero/journey/why/quotes/
   personal/process partials were deleted in the 2026-07-22 Argo-merge
   cleanup; this matching CSS (including the .prose helper, only ever
   shared between two of those now-deleted sections) was missed at the
   time. Confirmed zero remaining PHP references before deleting. */

/* Sections 40-41 (Alternative Home Concept / Service+Coach Concept
   Templates, ~935 lines) deleted 2026-07-23 (5.0a/5.0g dead-code audit)
   along with their 3 dedicated templates, 3 partials, and 3 draft
   "test" pages (never published, dated before the palette lock).
   Confirmed zero remaining PHP references before deleting. */
/* ============================================================
   43. Service recognition — "Kas see on sinu olukord?"
   ============================================================ */

.service-recognition {
  background: var(--color-bg-alt);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.service-recognition__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.service-recognition__heading {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.service-recognition__list {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.service-recognition__text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-primary);
  margin: 0;
  padding: var(--space-md) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.service-recognition__text:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .service-recognition__text {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   43b. Compact partner credit
   ============================================================ */

.service-partner-credit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-md) var(--container-padding);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.service-partner-credit .pv-badge {
  width: 32px;
  height: 32px;
}

.service-partner-credit .pv-icon {
  width: 16px;
  height: 16px;
}

.service-partner-credit__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.service-partner-credit__text strong {
  color: var(--color-primary);
}


/* ============================================================
   43b. Team Pivotly PAAT — optional experiential co-facilitator block
   ============================================================ */

.service-paat__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  align-items: center;
}

@media (min-width: 768px) {
  .service-paat__inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
  }
}

.service-paat__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--space-xs) 0 var(--space-md);
}

.service-paat__lead {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.service-paat__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.service-paat__partner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.service-paat__partner .pv-badge {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.service-paat__partner .pv-icon {
  width: 16px;
  height: 16px;
}

.service-paat__partner-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.service-paat__partner-text strong {
  color: var(--color-primary);
}

.service-paat__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.service-paat__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}


/* ============================================================
   44. Service packages
   ============================================================ */

.service-packages {
  background: var(--color-primary);
  padding: var(--space-2xl) 0;
}

.packages-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.packages-heading {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-on-dark);
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-xs);
}

.packages-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--space-10);
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* 2026-07-27, reworked twice same day: first pass (full-bleed photo card,
   dark gradient over a real photo, shared --color-hero-photo-overlay-*
   tokens) then a second pass after live feedback — the first hover-reveal
   attempt grew the card's own height on hover, which reflowed the whole
   section and read as "fidgety." Now .pkg-card has one fixed size,
   never transitioned; .pkg-card-preview and .pkg-card-detail are two
   absolutely-positioned layers filling that same box, cross-fading via
   opacity/transform only. Desktop/mouse: preview (photo + name/tagline)
   shows by default, detail (opaque white panel, full content) fades up
   over it on hover — see the (hover: hover) block below. Touch (that
   media query never matches): preview is never shown, detail renders in
   normal flow directly on the photo, same on-dark colors as before —
   mark/name/tagline are duplicated into both layers in the PHP for
   exactly this reason. */
.pkg-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  min-height: 420px;
  background-color: var(--color-primary-light);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
  /* Bottom-anchors .pkg-card-detail in the base/touch state (normal flow,
     no absolute positioning there) so its text sits over the gradient's
     dark zone, not the transparent top. No-op on desktop: .pkg-card-preview
     and .pkg-card-detail switch to position: absolute in the (hover: hover)
     block below, which ignores flex alignment on its parent entirely. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pkg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    var(--color-hero-photo-overlay-1) 0%,
    var(--color-hero-photo-overlay-2) 15%,
    var(--color-hero-photo-overlay-3) 55%,
    var(--color-hero-photo-overlay-4) 90%,
    transparent 100%
  );
}

.pkg-card-mark {
  width: var(--space-xl);
  height: 2px;
  margin-bottom: var(--space-md);
  background: var(--color-accent);
}

.pkg-card-name {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pkg-card-tagline {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.pkg-card-body {
  margin: 0;
  line-height: var(--leading-snug);
  white-space: pre-line;
}

.pkg-card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

.pkg-card-feature {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pkg-card-feature::before {
  content: '✓';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pkg-card-duration {
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.pkg-card-pick {
  display: inline-block;
  margin-top: var(--space-sm);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid var(--color-accent);
}

.pkg-card-pick:hover {
  color: var(--color-accent);
}

.pkg-card--selected {
  box-shadow: 0 0 0 3px var(--color-accent);
}

/* Base (mobile/touch default): .pkg-card-detail is the only visible
   layer, in normal flow, on-dark colors (it's sitting directly on the
   photo + gradient). .pkg-card-preview stays hidden — detail already
   carries its own name/tagline. */
.pkg-card-preview {
  display: none;
}

.pkg-card-detail {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
}

.pkg-card-detail .pkg-card-tagline { color: var(--color-on-dark); }
.pkg-card-detail .pkg-card-body { color: var(--color-on-dark-muted); }
.pkg-card-detail .pkg-card-features { border-top: 1px solid var(--color-surface-dark-border-strong); }
.pkg-card-detail .pkg-card-feature { color: var(--color-on-dark); }
.pkg-card-detail .pkg-card-feature::before { background: transparent; border: 1px solid var(--color-accent); }
.pkg-card-detail .pkg-card-duration { border-top: 1px solid var(--color-surface-dark-border-strong); }
.pkg-card-detail .pkg-card-pick { color: var(--color-on-dark); }

/* Desktop/mouse only — real hover, not a tap-triggered simulation. Phones
   report (hover: none), so this entire block never applies there and
   touch visitors always get the plain expanded card above; nothing
   mobile-specific needed beyond that exclusion.
   min-width: 900px added after a real test (960x600, the effective
   viewport of a 1440x900 window at ~150% browser zoom) showed the tallest
   package's content needing 1170px once its column got narrow enough to
   force extra line-wraps — taller than the viewport itself, so even a
   content-driven height (below) has to fall back to an internal scrollbar.
   Below this width, skip the fixed-height cross-fade trick entirely and
   let the card fall back to the same always-visible, normal-flow rendering
   touch devices already get (grows naturally, page scrolls) — that's a
   better outcome than an inner scrollbar at effective widths this narrow,
   whether reached by a small window or a zoomed-in desktop. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  /* Fixed taller than the base 420px: with .pkg-card-preview/.pkg-card-detail
     both absolutely positioned, .pkg-card has no in-flow content left to
     size itself from and collapses to exactly this value.
     --pkg-card-detail-h is set by main.js from each detail panel's real
     scrollHeight (main.js measures on load/resize) — a viewport-relative
     (vh) height was tried first but broke under browser zoom: zoom shrinks
     the effective viewport, so a vh-based cap shrinks with it while the
     content (fixed px/rem units) doesn't, forcing the internal scrollbar
     fallback below to kick in even on content that fit fine at 100% zoom.
     720px is only the pre-JS fallback (matches the tallest known content —
     Juhtimiscoaching's Meeskonnacoaching package — at ~669px intrinsic).
     The 95vh cap is now just a safety net for genuinely extreme cases
     (very short viewport, very high zoom), not the everyday driver.
     .pkg-card-detail's own overflow-y: auto (below) stays as the last-resort
     fallback if content ever exceeds even that. */
  .pkg-card {
    min-height: min(var(--pkg-card-detail-h, 720px), 95vh);
  }

  .pkg-card-preview {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: var(--space-lg);
    opacity: 1;
    transition: opacity var(--duration-base) var(--ease-default);
  }

  .pkg-card-preview .pkg-card-tagline { color: var(--color-on-dark); }

  /* justify-content: flex-start + overflow-y: auto (not center + hidden):
     content length varies per package (measured live — one card's content
     clipped by 7px at a fixed 600px card with center-anchoring, even after
     sizing the card for the longest content we had on hand). Centering an
     overflowing flex column clips both ends; top-anchoring plus a scroll
     fallback means a future longer edit in WP Admin degrades to "scrolls
     within the card" instead of "silently cuts off the button." */
  .pkg-card-detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--color-bg-card);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-md);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox: keep the scroll fallback working, just hide the bar */
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);
  }

  .pkg-card-detail::-webkit-scrollbar {
    display: none;
  }

  .pkg-card-detail .pkg-card-tagline { color: var(--color-primary); }
  .pkg-card-detail .pkg-card-body { color: var(--color-text-muted); }
  .pkg-card-detail .pkg-card-features {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2xs);
    padding-top: var(--space-2xs);
  }
  .pkg-card-detail .pkg-card-feature { color: var(--color-text); }
  .pkg-card-detail .pkg-card-feature::before { background: var(--color-accent-soft); border: none; }
  .pkg-card-detail .pkg-card-duration { border-top: 1px solid var(--color-border); }
  /* margin-top: auto pins the button to the card's bottom edge regardless
     of how much body/feature copy precedes it, so all 3 buttons align
     across cards with different content lengths instead of each sitting
     wherever its own content happens to end. */
  .pkg-card-detail .pkg-card-pick {
    color: var(--color-primary);
    margin-top: auto;
    padding-top: var(--space-sm);
    transition: color var(--transition-fast);
  }

  /* Same specificity as the rule above (two classes each), so without this
     the plain .pkg-card-pick:hover rule earlier in the file never wins here
     — the later, equally-specific non-hover rule always overrode it. */
  .pkg-card-detail .pkg-card-pick:hover {
    color: var(--color-accent);
  }

  .pkg-card:hover .pkg-card-preview,
  .pkg-card:focus-within .pkg-card-preview {
    opacity: 0;
  }

  .pkg-card:hover .pkg-card-detail,
  .pkg-card:focus-within .pkg-card-detail {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .pkg-card-preview,
    .pkg-card-detail {
      transition: none;
    }
  }
}

@media (min-width: 640px) {
  .packages-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
  }

  .packages-grid[data-count="1"] {
    grid-template-columns: minmax(280px, 480px);
    justify-content: center;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .packages-grid[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .packages-grid[data-count="3"] .pkg-card:last-child {
    grid-column: 1 / -1;
    max-width: 32rem;
    justify-self: center;
  }
}

@media (min-width: 768px) {
  .service-packages {
    padding: var(--space-3xl) 0;
  }

  .packages-heading {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2xl);
  }

  .pkg-card {
    padding: var(--card-padding);
  }

  .pkg-card-mark {
    margin-bottom: var(--space-lg);
  }

  .pkg-card-tagline {
    font-size: var(--text-xl);
  }
}

/* ============================================================
   44. Service Coaching Method
   ============================================================ */

/* 5.2 (2026-07-25): navy band, same treatment as Partnerid's Process
   section — this is the service's own "how it works" sequence. Plain
   numbered rows directly on the navy background, replacing the earlier
   white-card treatment. Redesigned as part of the 2026-07-25 template
   redesign pass (9 tasks, completed). */
.service-method {
  background: var(--color-primary);
}

.service-method__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.service-method__header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-12);
}

.service-method__heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-on-dark);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.service-method__intro {
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.service-method__list {
  max-width: 42rem;
  margin-inline: auto;
}

.service-method__row {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border-dark);
}

.service-method__list .service-method__row:last-child {
  border-bottom: 1px solid var(--color-border-dark);
}

.service-method__number {
  display: block;
  flex-shrink: 0;
  width: 2.5rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--color-accent);
  line-height: 1;
}

.service-method__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-on-dark);
  margin-bottom: var(--space-2);
}

.service-method__body {
  color: var(--color-on-dark-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   45. Service How I Work
   ============================================================ */























@media (min-width: 768px) {
  
}

/* ============================================================
   45. ASSESSMENT QUIZ (/mis-sobib-mulle/)
   ============================================================ */

/* Hide nav and footer on assessment template */
body.is-assessment .site-nav,
body.is-assessment .site-footer {
  display: none;
}

/* Full-screen wrapper */
.assessment-wrap {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* Back-to-home link */
.assessment-home-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.assessment-home-back:hover,
.assessment-home-back:focus-visible {
  color: var(--color-primary);
}

.assessment-home-back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Progress bar */
.assessment-progress {
  height: 4px;
  background: var(--color-border);
  overflow: hidden;
}

.assessment-progress__bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: width 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-progress__bar {
    transition: none;
  }
}

/* Step and result containers: centred column */
.assessment-step,
.assessment-result {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-5);
}

.assessment-step__inner,
.assessment-result__inner {
  width: 100%;
  max-width: 640px;
}

/* Back button within quiz steps */
.assessment-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
}

.assessment-back:hover,
.assessment-back:focus-visible {
  color: var(--color-primary);
}

.assessment-back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Counter label */
.assessment-step__counter {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Question text */
.assessment-step__question {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .assessment-step__question {
    font-size: var(--text-2xl);
  }
}

/* Multiple choice options */
.assessment-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.assessment-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  /* 2026-07-23 (2.20 cohesion pass): shadow + lift added so these read as
     real elevated cards, matching the shadow/lift language used sitewide
     (post-card, service cards) rather than a flat bordered box — the quiz
     already used the right tokens, it just had none of that depth. */
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-option {
    transition: none;
  }
}

.assessment-option:hover,
.assessment-option:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.assessment-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.assessment-option--selected {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  box-shadow: var(--shadow-md);
}

.assessment-option__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-hover);
  flex-shrink: 0;
}

/* Likert scale */
.assessment-likert {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.assessment-likert__scale {
  display: flex;
  gap: var(--space-3);
}

.assessment-likert__btn {
  flex: 1;
  aspect-ratio: 1;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-likert__btn {
    transition: none;
  }
}

.assessment-likert__btn:hover,
.assessment-likert__btn:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.assessment-likert__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.assessment-likert__btn--selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

.assessment-likert__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Result screen */
.assessment-result__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-4);
}

.assessment-result__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.assessment-result__summary {
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.assessment-result__runner-up {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.assessment-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .assessment-result__actions {
    flex-direction: row;
    align-items: center;
  }
}

.assessment-result__direct-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.assessment-result__direct-link:hover,
.assessment-result__direct-link:focus-visible {
  color: var(--color-primary);
}

.assessment-result__direct-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Section 47: Home Pain Recognition ──────────────────────── */
/* Section wrapper — light background */
.home-pain {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--section-padding-y) 0;
  position: relative;
}

/* Two-column grid: 5fr left / 7fr right */
.home-pain__inner {
  display: grid;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .home-pain__inner {
    grid-template-columns: 5fr 7fr;
  }
}

/* Left column — sticky */
.home-pain__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .home-pain__left {
    position: sticky;
    top: 6rem;
  }
}

.home-pain__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 0;
}
.home-pain__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.home-pain__heading {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  color: var(--color-primary);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0;
}
.home-pain__heading em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: var(--weight-regular);
}

.home-pain__desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 40ch;
}

.home-pain__cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.home-pain__cta-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  font-style: italic;
}

/* Right column — card stack */
.home-pain__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual pain item card */
.home-pain__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 300ms var(--ease-default);
  position: relative;
  overflow: hidden;
}
.home-pain__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 300ms var(--ease-default);
  border-radius: 0 2px 2px 0;
}
.home-pain__item:hover {
  border-color: var(--color-accent-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}
.home-pain__item:hover::before {
  transform: scaleY(1);
}

/* Icon — .home-pain__check removed 2026-07-23 (5.5 icon unification),
   markup now uses .pv-badge.pv-badge--neutral (see the VISUAL ELEVATION
   PRIMITIVES block) which reproduces the same hover-to-gold interaction. */

/* Title + body */
.home-pain__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-pain__item-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: 0;
}
.home-pain__item-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Tag pill */
.home-pain__tag {
  display: none;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
  transition: all 300ms;
}
.home-pain__item:hover .home-pain__tag {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}

@media (min-width: 641px) {
  .home-pain__item {
    grid-template-columns: auto 1fr auto;
  }

  .home-pain__tag {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-pain__item,
  .home-pain__item::before,
  .pv-badge--neutral,
  .home-pain__tag,
  .coach-card-b2,
  .coach-card-b2__photo-img,
  .service-card,
  .service-card::before,
  .pv-badge--on-photo {
    transition: none;
  }

  .home-pain__item:hover,
  .service-card:hover,
  .coach-card-b2:hover,
  .coach-card-b2:hover .coach-card-b2__photo-img {
    transform: none;
  }
}

/* ── Section 50: Service When-Not ───────────────────────────── */
.service-when-not {
    background: var(--color-bg);
    padding: var(--space-16) var(--space-4);
}
.service-when-not__inner {
    max-width: var(--container-lg);
    margin: 0 auto;
}
.service-when-not__heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}
.service-when-not__lead {
    color: var(--color-text-light);
    margin-bottom: var(--space-10);
}
.service-when-not__grid {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .service-when-not__grid {
        grid-template-columns: 1fr 1fr;
    }
}
.service-when-not__col {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
}
.service-when-not__col--no {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}
.service-when-not__col--yes {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.service-when-not__col-heading {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.service-when-not__col--no .service-when-not__col-heading {
    color: var(--color-text-light);
}
.service-when-not__col--yes .service-when-not__col-heading {
    color: var(--color-accent);
}
.service-when-not__list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.service-when-not__col--no .service-when-not__list li {
    color: var(--color-text-light);
    padding-left: var(--space-6);
    position: relative;
}
.service-when-not__col--no .service-when-not__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-border-strong);
}
.service-when-not__col--yes .service-when-not__list li {
    color: var(--color-text-inverse);
    padding-left: var(--space-6);
    position: relative;
}
.service-when-not__col--yes .service-when-not__list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}
.service-when-not__col-note {
    font-size: var(--text-sm);
    font-style: italic;
}
.service-when-not__col--no .service-when-not__col-note {
    color: var(--color-text-light);
}
.service-when-not__col--yes .service-when-not__col-note {
    color: var(--color-text-inverse-muted);
}

/* ============================================================
   47 - Home Partners Section
   ============================================================ */

.home-partners {
  background: var(--color-bg);
  padding: var(--section-padding-y) 0;
}

.home-partners-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.home-partners-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.home-partners-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-partners-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.home-partners-intro-heading,
.home-partners-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

.home-partners-lead {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 46ch;
}

/* Three value-prop blurbs beside the intro copy. 5.3 (2026-07-22): the icons
   were a plain 32px glyph with no anchor, reading as visually lighter than
   the serif heading + paragraph beside them despite occupying more width.
   Border-inline-start + a larger badged icon gives each blurb the same kind
   of persistent visual anchor kuidas-notfit-item already uses elsewhere on
   the site, closing the weight gap without inventing a new pattern. */
.home-partners-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.home-partners-feature {
  border-inline-start: 3px solid var(--color-accent-border);
  padding-inline-start: var(--space-md);
}

/* .home-partners-feature-icon removed 2026-07-23 (5.5 icon unification) —
   markup now uses the shared .pv-badge; margin-bottom kept as a utility
   rule since .pv-badge itself has no notion of its own bottom spacing. */
.home-partners-feature .pv-badge {
  margin-bottom: var(--space-sm);
}

.home-partners-feature-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-3xs);
}

.home-partners-feature-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.home-partners-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Card row — sized to hold several partners at once; wraps as needed
   below the marquee threshold (see .home-partners-cards--marquee below). */
.home-partners-cards-track {
  width: 100%;
  overflow: hidden;
}

.home-partners-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-partners-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  flex: 1 1 150px;
  min-width: 150px;
  max-width: 220px;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.home-partners-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Auto-scrolling marquee, used once there are enough partners that a
   static row would otherwise overflow (see $pivotly_use_partner_marquee
   in home-partners.php). The card list is rendered twice back-to-back and
   the track scrolls exactly one set's width so the loop is seamless. */
.home-partners-cards--marquee {
  flex-wrap: nowrap;
  width: max-content;
  animation: home-partners-marquee 40s linear infinite;
}

.home-partners-cards--marquee .home-partners-card {
  flex: 0 0 190px;
  width: 190px;
}

.home-partners-cards-track--marquee:hover .home-partners-cards--marquee,
.home-partners-cards--marquee:has(:focus-visible) {
  animation-play-state: paused;
}

@keyframes home-partners-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Slowed rather than stopped — same reasoning as the home testimonial
   marquee and trusted-logos strip: a continuous infinite auto-scroll is
   exactly the sustained motion this setting exists to reduce, so full
   speed regardless isn't an option, but a much slower version stays
   readable without a hard stop's static, harder-to-browse row. */
@media (prefers-reduced-motion: reduce) {
  .home-partners-cards--marquee {
    animation-duration: 160s;
  }
}

.home-partners-card--soon {
  color: var(--color-text-muted);
  justify-content: center;
}

.home-partners-card-soon-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.home-partners-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-2xs);
}

.home-partners-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-partners-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.home-partners-card-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.home-partners-card-link {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* Closing CTA band */
.home-partners-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

/* .home-partners-cta-icon sizing/circle/color now comes from the shared
   .pv-badge primitive (markup updated to add that class) — this bespoke
   rule was a hand-rolled duplicate of it. */

.home-partners-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.home-partners-cta-heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.home-partners-cta-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.home-partners-cta-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-accent);
  padding-bottom: 2px;
}

.home-partners-cta-link:hover {
  color: var(--color-accent);
}

@media (min-width: 640px) {
  .home-partners-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-partners-intro {
    flex-direction: row;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }

  .home-partners-content {
    flex: 0 0 38%;
  }

  .home-partners-features {
    flex: 1;
  }

  .home-partners-cta {
    flex-direction: row;
    align-items: center;
  }

  .home-partners-cta-text {
    flex: 1;
  }
}

/* ============================================================
   50 - Services Page Process Section
   ============================================================ */



























@media (min-width: 768px) {
  

  

  

  
}

@media (min-width: 1024px) {
  
}

/* ============================================================
   Services CTA Band - closing push before FAQ on /teenused/
   ============================================================ */











@media (min-width: 641px) {
  
}





/* Chat icon: rounded rectangle with a small tail, pure CSS */




/* Lock icon: shackle + body, pure CSS */






/* ============================================================
   40. Case Featured — Kliendikogemused page
   ============================================================ */

.case-featured {
  padding: var(--space-3xl) 0;
  background: var(--color-bg);
}

.case-featured__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.case-featured__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.case-featured__person {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.case-featured__avatar,
.case-featured__avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.case-featured__avatar {
  object-fit: cover;
}

.case-featured__avatar-placeholder {
  background: var(--color-primary-muted);
}

.case-featured__person-info {
  display: flex;
  flex-direction: column;
}

.case-featured__person-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}

.case-featured__person-role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.case-featured__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-featured__step {
  position: relative;
  padding-left: var(--space-xl);
  padding-bottom: var(--space-md);
}

.case-featured__step::before {
  /* connecting line down to the next step */
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.case-featured__step:last-child {
  padding-bottom: 0;
}

.case-featured__step:last-child::before {
  content: none;
}

.case-featured__step-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-border);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
}

.case-featured__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.case-featured__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.case-featured__situation {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  margin: 0;
}

.case-featured__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0;
}

.case-featured__actions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
}

.case-featured__action-item {
  position: relative;
  padding-left: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
}

.case-featured__action-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--color-accent);
}

.case-featured__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.case-featured__link:hover {
  color: var(--color-accent);
}

/* ============================================================
   41. Case Grid — Kliendikogemused page
   ============================================================ */

.case-grid {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
}

.case-grid__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.case-grid-head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-xl);
}

.case-grid-heading {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.case-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 641px) {
  .case-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .case-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-grid__card {
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.case-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(27, 46, 75, 0.08);
  border-color: var(--color-accent-border);
}

.case-grid__card-index {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.case-grid__card-situation {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  margin: 0;
}

.case-grid__card-summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.case-grid__card-action {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  margin: 0;
}

.case-grid__card-outcome {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.case-grid__card-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-xs);
}

/* ============================================================
   42. SEO Topics — Kliendikogemused page
   ============================================================ */

.seo-topics {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.seo-topics__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.seo-topics__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.seo-topics__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
}

.seo-topics__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.seo-topics__link:hover {
  color: var(--color-accent);
}

/* ============================================================
   44. Single Case Study
   ============================================================ */

.case-single-header {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--color-bg-alt);
}

.case-single-header__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.case-single-header__back {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.case-single-header__back:hover {
  color: var(--color-accent);
}

.case-single-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.case-single-header__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (min-width: 641px) {
  .case-single-header__title {
    font-size: var(--text-3xl);
  }
}

.case-single-body {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.case-single-body__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.case-single-body__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-md);
}

.case-single-body__label:first-child {
  margin-top: 0;
}

.case-single-body__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0;
}

.case-single-body__actions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
}

.case-single-body__action-item {
  position: relative;
  padding-left: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
}

.case-single-body__action-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--color-accent);
}

.case-single-body__quote {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.case-single-body__quote-author {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.case-single-body__blog-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.case-single-body__blog-link:hover {
  color: var(--color-accent);
}

/* ============================================================
   52. FAQ Page — Two-Column Layout + Sidebar
   ============================================================ */

.faq-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.faq-layout__main {
  min-width: 0;
}

.faq-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-primary-muted);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

@media (min-width: 1024px) {
  .faq-layout:not(.faq-layout--no-sidebar) {
    flex-direction: row;
    align-items: flex-start;
  }

  .faq-layout:not(.faq-layout--no-sidebar) .faq-layout__main {
    flex: 2;
  }

  .faq-layout:not(.faq-layout--no-sidebar) .faq-layout__sidebar {
    flex: 1;
    position: sticky;
    top: var(--space-lg);
  }
}

.faq-sidebar-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.faq-process-card__heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

.faq-process-card__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-process-card__step {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.faq-process-card__step-num {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}

.faq-process-card__step-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

/* .faq-no-answer already styled by Section 30g; override its standalone
   centered/max-width treatment when nested as a sidebar card */
.faq-layout__sidebar .faq-no-answer {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: left;
}

.faq-layout__sidebar .faq-no-answer__heading,
.faq-layout__sidebar .faq-no-answer__body {
  color: var(--color-primary);
}

.faq-layout__sidebar .faq-no-answer__cta {
  display: inline-block;
}

/* faq-hero-testimonial reused in the sidebar - cancel its hero-overlay
   positioning (Section 37a's @media 641px+ rule makes it position:absolute
   to dock over a hero photo) so it stacks normally in the sidebar column */
.faq-layout__sidebar .faq-hero-testimonial {
  position: static;
  margin: 0;
  max-width: none;
  box-shadow: none;
}

/* ============================================================
   53. FAQ Page — Category Tabs, Search & Popular Topics
   ============================================================ */

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.faq-tabs__btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3xs) var(--space-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.faq-tabs__btn:hover {
  color: var(--color-primary);
}

.faq-tabs__btn--active {
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
}

/* kuidas-hero-* (kuidas-hero.php, deleted in the 2026-07-22 Argo merge) — deleted 2026-07-23 (5.0a dead-code audit), confirmed zero PHP references. */
/* Kuidas ma töötan — "Mida võid minult oodata?" contrast pairs.
   "Peegeldus" direction chosen 2026-07-24 from the 6 in
   docs/design-reviews/2026-07-24-argo-mida-void-oodata-6-directions.html —
   third attempt this session. "Lubaduste nimekiri" (numbered list) and
   "Manifest" (stacked gold declarations) were both tried and reverted the
   same day on live feedback; see git history on this file for why. No
   numbering, no per-item visual units, same as Manifest, but structured as
   a reframe (assumption vs. reality) rather than a text block
   (.kuidas-expect-grid/-card/-card-title/-card-body and
   .kuidas-expect-manifest/-manifest-lines/-manifest-line/-manifest-closing
   both removed — no longer rendered by parts/kuidas-expect.php). */
/* 2026-07-27: Argo's page ran services-grid → kuidas-expect → kuidas-process
   as 3 consecutive sections all on the plain --color-bg cream, reading as
   one flat block. --color-bg-alt (the token this project already uses for
   exactly this — see e.g. the FAQ/CTA-band alternating sections) breaks
   the run without introducing a new color. */
.kuidas-expect { background-color: var(--color-bg-alt); }
.kuidas-expect-head { max-width: 640px; margin-inline: auto; text-align: center; margin-block-end: var(--space-xl); }
.kuidas-expect-heading { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-2xl); margin-block-end: var(--space-sm); }
.kuidas-expect-intro { color: var(--color-text-light); }
.kuidas-expect-contrast {
	max-width: 40rem;
	margin-inline: auto;
}
.kuidas-expect-contrast-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-block-end: var(--border-width) solid var(--color-border);
}
.kuidas-expect-contrast-row:last-child { border-block-end: 0; }
.kuidas-expect-contrast-not {
	padding: var(--space-md) var(--space-lg) var(--space-md) 0;
	text-align: end;
	text-decoration: line-through;
	text-decoration-color: var(--color-text-muted);
	text-decoration-thickness: 1.5px;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.kuidas-expect-contrast-real {
	padding: var(--space-md) 0 var(--space-md) var(--space-lg);
	border-inline-start: var(--border-width-thick) solid var(--color-accent);
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	color: var(--color-primary);
}
@media (max-width: 640px) {
	.kuidas-expect-contrast-row {
		grid-template-columns: 1fr;
		gap: var(--space-xs);
		padding-block: var(--space-sm);
	}
	.kuidas-expect-contrast-not { text-align: start; padding: 0; }
	.kuidas-expect-contrast-real { padding-inline-end: 0; }
}

/* Kuidas ma töötan — 4-step process */
.kuidas-process { background: var(--color-bg); }
.kuidas-process-layout { display: grid; gap: var(--space-xl); }
.kuidas-process-head { max-width: 34ch; margin-block-end: 0; }
.kuidas-process-heading { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-2xl); margin-block-end: var(--space-sm); }
.kuidas-process-intro { color: var(--color-text-light); }

/* The spine: one continuous dashed gold rule behind the numeral column. Inset
   at the block ends so it starts and stops at the first/last numeral rather than
   running past them. */
.kuidas-process-steps { position: relative; display: grid; gap: var(--space-xl); list-style: none; padding: 0; margin: 0; }
.kuidas-process-steps::before {
	content: "";
	position: absolute;
	inset-block: var(--space-lg) var(--space-lg);
	inset-inline-start: calc(var(--space-lg) / 2);
	width: var(--border-width-thick);
	background: repeating-linear-gradient(to bottom, var(--color-accent-border) 0 var(--space-2xs), transparent var(--space-2xs) var(--space-xs));
}
.kuidas-process-step { display: grid; grid-template-columns: var(--space-lg) minmax(0, 1fr); gap: var(--space-md); align-items: start; background: none; padding: 0; text-align: left; }
.kuidas-process-step-num {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
	background: var(--color-bg);
	padding-block: var(--space-2xs);
	text-align: center;
	position: relative;
	z-index: var(--z-raised);
}
.kuidas-process-step-title { font-size: var(--text-base); font-weight: 600; color: var(--color-primary); margin-block-end: var(--space-2xs); }
.kuidas-process-step-body { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 62ch; }

/* kuidas-fit-* (kuidas-fit.php, deleted in the 2026-07-22 Argo merge) — deleted 2026-07-23 (5.0a dead-code audit), confirmed zero PHP references. */
/* Kuidas ma töötan — partners CTA */
/* Navy two-column band. See the note in parts/kuidas-partners-cta.php: this and
   kuidas-notfit were consecutive centred stacks on the same cream background. */
.kuidas-partners--dark { background: var(--color-primary); }
.kuidas-partners-layout { display: grid; gap: var(--space-xl); align-items: start; }
.kuidas-partners-badge { margin-block-end: var(--space-md); }
.kuidas-partners-heading { font-family: var(--font-heading); color: var(--color-text-inverse); font-size: var(--text-2xl); margin-block-end: var(--space-sm); }
.kuidas-partners-intro { color: var(--color-accent); font-weight: 600; margin: 0; }
.kuidas-partners-body { color: var(--color-text-inverse); opacity: 0.82; margin-block-end: var(--space-lg); }
.kuidas-partners-cta { align-self: start; }
@media (min-width: 1024px) {
	.kuidas-partners-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

/* kuidas-reality-* (kuidas-reality.php, deleted in the 2026-07-22 Argo merge) — deleted 2026-07-23 (5.0a dead-code audit), confirmed zero PHP references. */
/* Kuidas ma töötan — not-fit reasons */
.kuidas-notfit-heading { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-2xl); text-align: center; }
.kuidas-notfit-intro { color: var(--color-text-light); text-align: center; margin-block: var(--space-sm) var(--space-xl); }
.kuidas-notfit-list { display: grid; gap: var(--space-md); list-style: none; padding: 0; }
.kuidas-notfit-item { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-md); }
.kuidas-notfit-item-title { font-size: var(--text-base); font-weight: 600; color: var(--color-primary); margin-block-end: var(--space-2xs); }
.kuidas-notfit-item-body { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Partnerid hero — type-only navy statement (2026-07-22) ──────────── */
.partnerid-hero {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.partnerid-hero-inner {
  max-width: 62ch;
}

.partnerid-hero-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}

.partnerid-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-lg);
}

.partnerid-hero-intro p {
  color: var(--color-text-inverse-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md);
}

.partnerid-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
}

.partnerid-hero-link {
  color: var(--color-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  border-block-end: 1px solid var(--color-accent);
  padding-block-end: 2px;
  transition: color var(--duration-base) var(--ease-default);
}

.partnerid-hero-link:hover {
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .partnerid-hero {
    padding-block: calc(var(--space-3xl) * 1.5) var(--space-3xl);
  }

  .partnerid-hero-title {
    font-size: var(--text-5xl);
  }
}

/* Partnerid — why value cards */
/* "Vooluv lause" flowing-sentence treatment, chosen 2026-07-24 from the 6
   directions in docs/design-reviews/2026-07-23-partnerid-miks-tootan-6-directions.html,
   replacing the previous 4-card grid (.partnerid-why-grid/-card/-card-title/-card-body,
   and the .partnerid-why-head/-heading/-intro section header, both removed —
   no longer rendered by parts/partnerid-why.php; the sentence carries the content). */
.partnerid-why-sentence {
	max-width: 39rem;
	margin-inline: auto;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 600;
	font-size: var(--text-2xl);
	line-height: 1.55;
	color: var(--color-primary);
	text-align: center;
}
.partnerid-why-emphasis { color: var(--color-accent); font-style: normal; font-weight: 700; }

/* Partnerid — uniform card grid */

/* Partnerid — koostöölood heading wrapper */
.partnerid-cases-head { max-width: 640px; text-align: center; margin-inline: auto; padding-block-start: var(--section-padding-y); }
.partnerid-cases-heading { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--text-2xl); margin-block-end: var(--space-sm); }
.partnerid-cases-intro { color: var(--color-text-light); }

/* Kuidas ma töötan — visual elevation (the minu-lugu-* and kuidas-hero-*/
   kuidas-fit-*/kuidas-reality-* rules previously here were deleted
   2026-07-23, same 5.0a audit — those partials no longer exist;
   .kuidas-expect-card and its .pv-badge overrides removed 2026-07-24, same
   reason — the manifest redesign above has no card/icon markup) */
/* Process steps — see the note in parts/kuidas-process.php. Single vertical gold
   spine, one large numeral per station, left-aligned. Replaces the old four-column
   centred grid that combined icon medallions, inset numerals, a dashed horizontal
   rail and arrow glyphs (four sequence signals for one sequence). */
.kuidas-process-step { position: relative; }
.kuidas-notfit-item .pv-icon { flex: none; color: var(--color-accent); margin-block-start: var(--space-1); }
.kuidas-notfit-list { background: var(--color-bg-alt); }
.kuidas-notfit-item { display: flex; gap: var(--space-sm); }
@media (min-width: 1024px) {
	.kuidas-process-layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
	.kuidas-process-head { position: sticky; top: var(--space-3xl); }
}

/* Partnerid — elevated value, process, card and case-grid treatments */
.case-grid__card { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.case-grid__card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-lg); height: var(--border-width-thick); background: var(--color-accent); border-radius: var(--radius-full); }
.case-grid__card-index { display: inline-flex; align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full); background: var(--color-accent-soft); border: var(--border-width) solid var(--color-accent-border); color: var(--color-accent-hover); }
/* ============================================================
   TESTIMONIALS GRID — Kliendikogemused (2026-07-22)
   Replaces the old 'quotes' carousel. All testimonials shown at once in an
   asymmetric grid: most cards are a standard size, every 5th is a wider
   "featured" card with larger type — deterministic pattern, not random, so
   it reads as curated rather than chaotic. Quotes are never clamped; the
   old carousel truncated mid-sentence with no way to read the rest.
   ============================================================ */

.testimonials-grid {
	background: var(--color-bg);
}

.testimonials-grid__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.testimonials-grid__head {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-xl);
	text-align: center;
}

.testimonials-grid__eyebrow {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-xs);
}

.testimonials-grid__heading {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.testimonials-grid__lead {
	color: var(--color-text-muted);
}

.testimonials-grid__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.testimonials-grid__card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	padding: var(--space-lg);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.testimonials-grid__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, var(--shadow-card));
	border-color: var(--color-accent-border);
}

.testimonials-grid__quote-mark {
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	line-height: 1;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.testimonials-grid__body {
	color: var(--color-text);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-md);
	flex-grow: 1;
}

.testimonials-grid__author {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: auto;
}

.testimonials-grid__author-photo {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	overflow: hidden;
}

.testimonials-grid__author-photo img,
.testimonials-grid__author-photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-full);
}

.testimonials-grid__author-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.testimonials-grid__author-name {
	font-weight: 600;
	color: var(--color-primary);
	font-size: var(--text-sm);
}

.testimonials-grid__author-role {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.testimonials-grid__link {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
}

/* Featured cards: wider, larger type — every 5th card (see parts/testimonials-grid.php) */
.testimonials-grid__card--lg {
	background: var(--color-bg-alt);
}

.testimonials-grid__card--lg .testimonials-grid__quote-mark {
	font-size: var(--text-5xl, var(--text-4xl));
}

.testimonials-grid__card--lg .testimonials-grid__body {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--color-primary);
}

@media (min-width: 641px) {
	.testimonials-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.testimonials-grid__card--lg {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.testimonials-grid__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: dense;
	}
	.testimonials-grid__card--lg {
		grid-column: span 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.testimonials-grid__card:hover {
		transform: none;
	}
}

/* ── Partnerid — editorial partner rows (2026-07-22) ─────────────────── */
/* partnerid-why (the "Vooluv lause" pull-quote) directly precedes this
   section and both render on the plain --color-bg cream by default,
   reading as one flat block — same issue as Argo's page (see the
   .kuidas-expect fix above), same fix: --color-bg-alt. */
.partnerid-rows {
  background-color: var(--color-bg-alt);
}

.partnerid-rows-head {
  max-width: 58ch;
  margin-block-end: var(--space-2xl);
}

.partnerid-rows-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
}

.partnerid-rows-intro {
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.partnerid-row {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-border);
}

.partnerid-row:last-child {
  border-block-end: 1px solid var(--color-border);
}

.partnerid-row-media {
  width: 72px;
  height: 72px;
  margin-block-end: var(--space-sm);
  border-radius: 50%;
  overflow: hidden;
}

.partnerid-row-media--logo {
  width: 140px;
  height: 48px;
  border-radius: 0;
  overflow: visible;
}

.partnerid-row-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partnerid-row-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.partnerid-row-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin: 0;
}

.partnerid-row-role {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: var(--space-xs) 0 0;
}

.partnerid-row-description {
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md);
}

.partnerid-row-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  margin: 0 0 var(--space-md);
}

.partnerid-row-tag {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.partnerid-row-cta {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  border-block-end: 1px solid var(--color-accent);
  padding-block-end: 2px;
  transition: color var(--duration-base) var(--ease-default);
}

.partnerid-row-cta:hover {
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .partnerid-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* ── Partnerid process — static base layer ───────────────────────────── */
/* Everything here must remain readable with no JS. The pinned behaviour
   below is scoped entirely behind .partnerid-process--pinned, which main.js
   adds only on wide viewports without prefers-reduced-motion. */
/* Navy section (2026-07-22 band-rhythm pass) — same treatment as
   .partnerid-hero, so the gold spine/rail pops the way it does there
   instead of sitting unnoticed on cream. */
.partnerid-process {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

.partnerid-process-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-2xl);
  max-width: 20ch;
}

.partnerid-process-steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xl);
}

/* Gold spine — same recipe as parts/kuidas-process.php on the Argo page,
   reused deliberately rather than invented fresh: that section already
   solved "how does a real 4-step sequence look on this site" once, and
   redoing it differently here would read as a second, competing answer to
   the same question. Inset so it starts/stops at the first/last numeral. */
.partnerid-process-steps::before {
  content: "";
  position: absolute;
  inset-block: var(--space-lg) var(--space-lg);
  inset-inline-start: calc(var(--space-lg) / 2);
  width: var(--border-width-thick);
  background: repeating-linear-gradient(to bottom, var(--color-accent-border) 0 var(--space-2xs), transparent var(--space-2xs) var(--space-xs));
}

.partnerid-process-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-lg) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.partnerid-process-step-num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-primary);
  padding-block: var(--space-2xs);
  text-align: center;
  position: relative;
  z-index: var(--z-raised);
}

.partnerid-process-step-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-xs);
}

.partnerid-process-step-body {
  color: var(--color-on-dark-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 46ch;
}

/* Rail — a persistent step index, hidden by default. It only exists to give
   the pinned scroll-stepper a fixed "where am I" anchor; the static list
   above already carries that information via its own numerals, so showing
   the rail there too would just be a redundant second set of 01-04s. */
.partnerid-process-rail {
  display: none;
}

/* Scroll hint — hidden by default for the same reason as the rail: it only
   means anything once the section is pinned and scroll actually drives the
   content (see main.js's setCurrent()), and it only makes sense on step 1,
   before the visitor has scrolled into the section at all. */
.partnerid-process-scroll-hint {
  display: none;
}

/* ── Pinned enhancement — JS-gated, desktop only ─────────────────────── */
@media (min-width: 900px) {
  .partnerid-process--pinned {
    /* One viewport of scroll per step, plus one to read the last. */
    height: 400vh;
    padding-block: 0;
  }

  .partnerid-process--pinned .partnerid-process-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
  }

  /* Two columns while pinned: the rail on the left as a fixed anchor, the
     active step's copy on the right. Outside .partnerid-process--pinned the
     container stays plain block flow — no grid needed for the static list. */
  .partnerid-process--pinned .partnerid-process-layout {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
  }

  .partnerid-process--pinned .partnerid-process-heading {
    grid-column: 1 / -1;
    margin-block-end: var(--space-2xl);
  }

  .partnerid-process--pinned .partnerid-process-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: relative;
    padding-inline-start: var(--space-lg);
  }

  .partnerid-process--pinned .partnerid-process-rail::before {
    content: "";
    position: absolute;
    inset-block: var(--space-2xs) var(--space-2xs);
    inset-inline-start: calc(var(--space-lg) / 2);
    width: var(--border-width-thick);
    background: var(--color-border-dark);
  }

  .partnerid-process--pinned .partnerid-process-rail-item {
    position: relative;
    list-style: none;
  }

  .partnerid-process--pinned .partnerid-process-rail-btn {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-2xs) 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: start;
  }

  .partnerid-process--pinned .partnerid-process-rail-btn:hover .partnerid-process-rail-label,
  .partnerid-process--pinned .partnerid-process-rail-btn:focus-visible .partnerid-process-rail-label {
    color: var(--color-on-dark);
  }

  .partnerid-process--pinned .partnerid-process-rail-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: var(--space-2xs);
  }

  .partnerid-process--pinned .partnerid-process-rail-num {
    display: block;
    width: var(--space-lg);
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-on-dark-muted);
    background: var(--color-primary);
    position: relative;
    z-index: var(--z-raised);
    transition: color var(--duration-base) var(--ease-default);
  }

  .partnerid-process--pinned .partnerid-process-rail-label {
    font-size: var(--text-sm);
    color: var(--color-on-dark-muted);
    transition: color var(--duration-base) var(--ease-default);
  }

  /* Passed and current steps light up gold on the rail; the label itself
     only bolds for the current step, so the eye finds "now" at a glance. */
  .partnerid-process--pinned .partnerid-process-rail-item.is-done .partnerid-process-rail-num,
  .partnerid-process--pinned .partnerid-process-rail-item.is-current .partnerid-process-rail-num {
    color: var(--color-accent);
  }

  .partnerid-process--pinned .partnerid-process-rail-item.is-current .partnerid-process-rail-label {
    color: var(--color-on-dark);
    font-weight: 600;
  }

  .partnerid-process--pinned .partnerid-process-steps {
    position: relative;
    display: block;
    min-height: 12rem;
  }

  /* The rail supplies its own spine while pinned; without this, the steps
     column would draw a second, redundant one behind the (now hidden)
     per-step numerals. */
  .partnerid-process--pinned .partnerid-process-steps::before {
    content: none;
  }

  .partnerid-process--pinned .partnerid-process-step {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-base) var(--ease-default),
                transform var(--duration-base) var(--ease-out);
    pointer-events: none;
  }

  /* The rail already shows the numeral; showing it again beside the title
     would be the same "sequence signaled twice" problem this pattern exists
     to avoid. */
  .partnerid-process--pinned .partnerid-process-step-num {
    display: none;
  }

  .partnerid-process--pinned .partnerid-process-step.is-current {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .partnerid-process--pinned .partnerid-process-step-title {
    font-size: var(--text-3xl);
  }

  .partnerid-process--pinned .partnerid-process-step-body {
    font-size: var(--text-md);
    max-width: 52ch;
  }

  .partnerid-process--pinned .partnerid-process-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--space-lg);
    color: var(--color-on-dark-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity var(--duration-base) var(--ease-default);
    animation: partnerid-process-scroll-hint-bounce 1.6s ease-in-out infinite;
  }

  .partnerid-process--pinned .partnerid-process-scroll-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .partnerid-process--pinned .partnerid-process-scroll-hint .pv-icon {
    width: var(--space-md);
    height: var(--space-md);
  }

  @keyframes partnerid-process-scroll-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--space-2xs)); }
  }
}