/*
 * Pivotly — layout.css
 * Shared, sitewide UI primitives and chrome: buttons, base cards, forms,
 * nav, footer, badges, FAQ accordion base, shared hero/testimonials/
 * services-grid components reused across 3+ pages. Requires global.css.
 * Split from components.css 2026-07-23 (5.0b).
 */

/* ============================================================
   1. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-color),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

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

.btn:active {
  transform: translateY(1px);
}

/* Primary ā€” gold fill */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Secondary ā€” navy outline */
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Ghost ā€” subtle, for dark bg */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-border-dark);
}

.btn--ghost:hover {
  background-color: var(--color-surface-dark-hover);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

/* Text button ā€” no border/bg */
.btn--text {
  background: none;
  border-color: transparent;
  color: var(--color-accent);
  padding-inline: 0;
  gap: var(--space-1);
}

.btn--text:hover {
  color: var(--color-accent-hover);
  gap: var(--space-3);
}

/* Sizes */
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

.btn--lg {
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-8);
}

/* Full width */
.btn--full {
  width: 100%;
}

/* Icon suffix ā€” arrow animation */
.btn__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}


/* ============================================================
   2. CARDS
   ============================================================ */

.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-default);
}

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

.card--flat {
  background-color: var(--color-bg-alt);
  border-color: transparent;
}

.card--dark {
  background-color: var(--color-primary);
  border-color: var(--color-surface-dark-border);
  color: var(--color-text-inverse);
}

.card--dark h2,
.card--dark h3,
.card--dark h4 {
  color: var(--color-text-inverse);
}

.card--accent {
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}


/* ============================================================
   6. SERVICE CARDS
   ============================================================ */


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


.service-card:hover .service-card__link {
  gap: var(--space-3);
}

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

/* ============================================================
   8. TAGS & BADGES
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  line-height: 1.4;
  text-decoration: none;
  transition: var(--transition-color);
  white-space: nowrap;
}

/* Default ā€” muted */
.tag--default {
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.tag--default:hover {
  background-color: var(--color-accent-light);
  color: var(--color-primary);
  border-color: var(--color-accent-light);
}

/* Accent ā€” gold */
.tag--accent {
  background-color: var(--color-accent-light);
  color: var(--color-primary);
  border: 1px solid transparent;
}

/* Primary ā€” navy */
.tag--primary {
  background-color: var(--color-primary-muted);
  color: var(--color-primary);
  border: 1px solid transparent;
}

/* Category badge on post cards */
.tag--category {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  font-size: var(--text-2xs);
  text-transform: uppercase;
}

/* ============================================================
   9. FORMS & CONTACT
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

.form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

.form__input,
.form__textarea {
  /* Inherits base styles from global.css */
}

.form__textarea {
  min-height: 140px;
  resize: vertical;
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.form__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.form__submit {
  margin-top: var(--space-2);
}

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

/* ============================================================
   10. FAQ / ACCORDION
   ============================================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}


.faq-item__trigger:hover {
  color: var(--color-accent);
}


.faq-item[open] .faq-item__icon,
.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
  background-color: var(--color-accent-light);
  color: var(--color-primary);
}

/* ============================================================
   11. PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-16);
}

/* ============================================================
   12. FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-16) var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

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

.footer__brand img {
  height: 40px;
  width: auto;
  margin-bottom: var(--space-4);
  opacity: 0.9;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  line-height: var(--leading-relaxed);
  max-width: 32ch;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-5);
}

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

.footer__links li {
  margin: 0;
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__links a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* "Part of Pivotly" back-link in coach subsite footer */
.footer__parent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

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

.footer__parent-logo {
  height: 20px;
  width: auto;
  opacity: 0.5;
}


/* ============================================================
   13. SKIP LINK (accessibility)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  z-index: var(--z-toast);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}


/* ============================================================
   14. NAV PARTIAL ā€” .site-nav
   CSS for parts/nav.php. Mobile-first: base styles = mobile
   drawer. Desktop layout applied at min-width: 768px.
   Parallels the existing .site-header/.nav BEM block but uses
   the flat-class naming the brief specifies for new partials.
   ============================================================ */

/* ā”€ā”€ā”€ Header bar ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height-mobile);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition-base),
              background-color var(--transition-base);
}

.site-nav.nav-scrolled {
  box-shadow: var(--shadow-md);
}

@media (min-width: 1100px) {
  .site-nav {
    height: var(--nav-height);
  }
}

/* ā”€ā”€ā”€ Inner layout ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-sm);
}

/* ā”€ā”€ā”€ Logo ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1.2;
}

.nav-logo img {
  height: var(--nav-logo-height);
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
}

/* ā”€ā”€ā”€ Nav links ā€” mobile: full-screen drawer ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-links {
  display: none;
  position: fixed;
  /* Announcement bar sits above the nav in normal flow and pushes it down
     by its real (possibly wrapped) height - without this offset the drawer
     starts too high and covers the nav bar (logo + hamburger/close toggle). */
  top: calc(var(--announce-bar-height, 0px) + var(--nav-height-mobile));
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-card);
  z-index: var(--z-overlay);
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.nav-open .nav-links {
  display: block;
}

/* WordPress wp_nav_menu() output ā€” <ul class="nav-menu"> */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-primary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--color-accent);
}

/* Active page ā€” WordPress adds .current-menu-item */
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
  color: var(--color-accent);
}

/* ā”€ā”€ā”€ Nav links ā€” desktop: inline flex ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

@media (min-width: 1100px) {
  .nav-links {
    display: flex;
    position: static;
    background: none;
    padding: 0;
    overflow: visible;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    justify-content: flex-end;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .nav-menu {
    display: flex;
    align-items: center;
  }

  .nav-menu li {
    position: relative;
  }

  .nav-menu a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: none;
    border-radius: var(--radius-md);
    white-space: nowrap;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible {
    background-color: var(--color-primary-muted);
    color: var(--color-primary);
  }

  /* Gold underline indicator on active desktop item */
  .nav-menu .current-menu-item > a,
  .nav-menu .current-page-ancestor > a {
    color: var(--color-accent);
    background-color: var(--color-accent-muted);
  }

  .nav-menu .current-menu-item > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    position: absolute;
    bottom: -1px;
    left: 0;
    border-radius: 1px;
  }
}

/* ā”€ā”€ā”€ Language switcher ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-lang {
  display: none;
}

@media (min-width: 1100px) {
  .nav-lang {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
}

/* Polylang outputs a <ul> inside .nav-lang */
.nav-lang ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-3xs);
}

.nav-lang li {
  margin: 0;
}

.nav-lang a {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.nav-lang a:hover {
  color: var(--color-primary);
}

/* Active language ā€” Polylang adds .lang-item-current */
.nav-lang .lang-item-current a {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* ā”€ā”€ā”€ CTA button ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-cta {
  display: none;
}

.nav-cta--mobile {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}

@media (min-width: 1100px) {
  .nav-cta {
    display: inline-flex;
    flex-shrink: 0;
  }

  .nav-cta--mobile {
    display: none;
  }
}


/* ā”€ā”€ā”€ Hamburger toggle ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--nav-toggle-bar-gap);
  width: var(--nav-toggle-size);
  height: var(--nav-toggle-size);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background-color: var(--color-primary-muted);
}

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

.nav-toggle-bar {
  display: block;
  width: var(--nav-toggle-bar-width);
  height: var(--nav-toggle-bar-height);
  background-color: var(--color-primary);
  border-radius: var(--nav-toggle-bar-radius);
  transition: transform var(--transition-base),
              opacity var(--transition-fast),
              transform var(--transition-base);
}

/* Bars animate ā†’ X when nav is open */
body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(var(--nav-toggle-bar-offset)) rotate(45deg);
}

body.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(calc(-1 * var(--nav-toggle-bar-offset))) rotate(-45deg);
}

/* Lock scroll when mobile nav is open — html.nav-open is needed alongside
   body.nav-open because <html> (not <body>) is the document's actual
   scrolling box, so overflow:hidden on body alone doesn't stop a
   scrollIntoView() call from scrolling the page underneath the drawer. */
html.nav-open,
body.nav-open {
  overflow: hidden;
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }

  /* Unlock scroll on desktop regardless */
  html.nav-open,
  body.nav-open {
    overflow: auto;
  }
}


/* ā”€ā”€ā”€ Sub-menu / dropdown ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

/* Chevron indicator on parent items ā€” flex so margin-left:auto
   pushes it to the right edge on mobile                         */
.nav-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
}

.nav-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Rotate chevron when submenu is open (JS adds .submenu-open) */
.nav-menu .menu-item-has-children.submenu-open > a::after {
  transform: rotate(-135deg);
}

/* Mobile: sub-menu shown inline below parent, indented */
.nav-menu .sub-menu {
  list-style: none;
  padding: 0 0 0 var(--space-md);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.nav-menu .menu-item-has-children.submenu-open > .sub-menu {
  max-height: 600px;
}

/* ā”€ā”€ā”€ Sub-menu ā€” desktop ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

@media (min-width: 1100px) {

  /* Chevron sits inline next to label */
  .nav-menu .menu-item-has-children > a {
    gap: var(--space-2xs);
  }

  /* Override the gold-underline ::after used by .current-menu-item
     so parent items show chevron instead                          */
  .nav-menu .menu-item-has-children > a::after {
    position: static;
    width: 0.4em;
    height: 0.4em;
    height: 0.4em;
    background-color: transparent;
    border-radius: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    margin-left: 0;
  }

  /* Absolute dropdown panel */
  .nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-primary);
    border-radius: var(--card-radius);
    padding: var(--space-2xs) 0;
    max-height: none;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-1 * var(--space-xs)));
    transition: opacity var(--transition-base),
                transform var(--transition-base);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
  }

  /* Reveal on hover and keyboard focus-within */
  .nav-menu li:hover > .sub-menu,
  .nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Sub-menu link styles ā€” light text on dark background */
  .nav-menu .sub-menu a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-on-dark);
    padding: var(--space-2xs) var(--space-sm);
    border-bottom: none;
    border-radius: 0;
    white-space: nowrap;
    display: block;
  }

  .nav-menu .sub-menu a:hover,
  .nav-menu .sub-menu a:focus-visible {
    background-color: var(--color-on-dark-muted);
    color: var(--color-on-dark);
  }

  /* Active state inside dropdown */
  .nav-menu .sub-menu .current-menu-item > a,
  .nav-menu .sub-menu .current-page-ancestor > a {
    color: var(--color-accent);
    background-color: transparent;
  }

  /* Suppress the gold-underline and chevron pseudo inside sub-menu */
  .nav-menu .sub-menu .current-menu-item > a::after,
  .nav-menu .sub-menu a::after {
    display: none;
  }

  /* Level-3: nested sub-menu — always visible within parent dropdown, visually subordinate */
  .nav-menu .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    max-height: none;
    border-top: 1px solid var(--color-surface-dark-border);
    margin-top: var(--space-1);
  }

  .nav-menu .sub-menu .sub-menu a {
    padding-left: var(--space-8);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-inverse-dim);
    letter-spacing: 0.01em;
  }

  .nav-menu .sub-menu .sub-menu a:hover,
  .nav-menu .sub-menu .sub-menu a:focus-visible {
    color: var(--color-accent);
    background-color: transparent;
  }

  .nav-menu .sub-menu .sub-menu .current-menu-item > a {
    color: var(--color-accent);
    background-color: transparent;
  }
}


/* ============================================================
   15. FOOTER PARTIAL ā€” flat classes
   CSS for parts/footer.php. The root .site-footer element
   already has its base styles (navy bg, white text, padding)
   in section 16. These rules cover the brief-spec child
   elements that use flat naming rather than BEM.
   ============================================================ */

/* ā”€ā”€ā”€ Inner layout ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2xl);
  }
}

/* ā”€ā”€ā”€ Brand column ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.footer-logo {
  display: inline-flex;
  text-decoration: none;
}

.footer-logo span {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  line-height: 1.2;
}

.footer-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-logo:hover span {
  color: var(--color-accent);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  line-height: var(--leading-normal);
  max-width: none;
}

/* ā”€ā”€ā”€ Footer navigation ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

/* .footer-nav is the <nav> wrapper — no styles needed beyond
   what the menu list provides */

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2xl);
  }
}

.footer-menu > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .footer-menu > li {
    flex: 1 1 140px;
  }
}

.footer-menu > li > a {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-menu > li > a:hover {
  color: var(--color-accent);
}

.footer-menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-menu .sub-menu li {
  margin: 0;
}

.footer-menu .sub-menu a {
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-menu .sub-menu a:hover {
  color: var(--color-accent);
}

/* ā”€ā”€ā”€ Language switcher ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

/* Polylang outputs a <ul> inside .footer-lang */
.footer-lang ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-2xs);
}

.footer-lang li {
  margin: 0;
}

.footer-lang a {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  transition: color var(--transition-fast);
}

.footer-lang a:hover {
  color: var(--color-accent);
}

.footer-lang .lang-item-current a {
  color: var(--color-text-inverse);
}

/* ā”€ā”€ā”€ Bottom bar ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
  max-width: none;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.footer-legal a,
.footer-legal span {
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

.footer-legal a {
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-accent);
}


/* ============================================================
   16. BUTTON ALIASES ā€” brief-spec class names
   Supplements the BEM (.btn--primary etc.) variants in
   section 2. Use .btn + .btn-primary (single dash) for all
   new partials and templates going forward.
   The .btn base class (section 2) provides shared properties:
   display, padding, font, border, cursor, transition, etc.
   ============================================================ */

/* ā”€ā”€ā”€ Primary ā€” navy fill, gold on hover ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background-color: var(--color-accent);
  filter: brightness(0.92);
}

/* ā”€ā”€ā”€ Secondary ā€” gold fill ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-secondary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-secondary:hover {
  background-color: transparent;
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  filter: brightness(0.92);
}

/* ā”€ā”€ā”€ Ghost ā€” outlined, no fill ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-ghost:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-ghost:active {
  filter: brightness(0.92);
}

/* ā”€ā”€ā”€ Ghost light ā€” for use on dark/navy backgrounds ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-ghost-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-surface-dark-border-strong);
}

.btn-ghost-light:hover {
  background-color: var(--color-surface-dark-hover);
  border-color: var(--color-white);
}

/* ā”€ā”€ā”€ Text link button ā€” no border, no background ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-text {
  background: none;
  border-color: transparent;
  color: var(--color-accent);
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--weight-medium);
}

.btn-text:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* ā”€ā”€ā”€ Size modifiers ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-sm);
}

.btn-lg {
  font-size: var(--text-md);
  padding: var(--space-sm) var(--space-xl);
}

/* ā”€ā”€ā”€ Disabled state ā€” all .btn variants ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   17. TRUSTED LOGOS CAROUSEL
   Mobile: CSS-only infinite marquee. Desktop: static flex row.
   ============================================================ */

@keyframes pivotly-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.trusted-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-xl);
  position: relative;
}

.trusted-logos::before,
.trusted-logos::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.trusted-logos::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.trusted-logos::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.trusted-logos__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.trusted-logos__wrap:hover,
.trusted-logos__wrap:focus-visible {
  opacity: 0.85;
}


.trusted-logos__track {
  width: 100%;
  overflow: hidden;
}

.trusted-logos__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  flex-shrink: 0;
  width: max-content;
  animation: pivotly-marquee var(--duration-carousel) linear infinite;
}

.trusted-logos__track:hover .trusted-logos__inner {
  animation-play-state: paused;
}

/* Slowed rather than stopped — same reasoning as the home testimonial
   marquee in pages.css: a continuous infinite auto-scroll is exactly the
   sustained motion this setting exists to reduce, so it can't just run at
   full speed regardless, but a much slower version stays browsable-by-eye
   without the full sustained-motion exposure a hard stop trades away for
   a static, harder-to-parse logo wall. */
@media (prefers-reduced-motion: reduce) {
  .trusted-logos__inner {
    animation-duration: calc(var(--duration-carousel) * 4);
  }
}

.logo-item {
  /* Fixed width (2026-07-22): was unset, with only the child img's
     width:auto sizing it per-logo. Each of the ~44 logos in the marquee
     has a different native aspect ratio, so the row reflowed live as
     each image finished loading — real, visible layout shift, not just
     a missing width/height attribute. object-fit:contain on the img
     below fits any logo into this fixed slot without distortion. */
  flex-shrink: 0;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  height: 56px;
  width: 100%;
  max-width: 170px;
  object-fit: contain;
  /* 5.7 (2026-07-22): was grayscale(100%) at opacity 0.5, leaving Utilitas,
     Rikardia and Arista barely legible against cream. Raising opacity alone
     does not fix it — those three source images are natively light grey, so
     desaturating them lands near the background no matter the alpha. The
     brightness() reduction is what does the work: it pushes light marks down
     into legible territory while already-dark marks (Lindström, Veloteek) are
     visually unchanged, since near-black cannot get much darker. Verified by
     rendering all four side by side at matched size with the marquee pinned.
     Keeping the monochrome wall — that is the design intent, and the logos are
     genuinely multicoloured underneath (blue/green/gold/red). */
  filter: grayscale(100%) brightness(0.5) contrast(1.2);
  opacity: 0.9;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-item:hover img {
  filter: none;
  opacity: 1;
}


@media (min-width: 1024px) {
  .trusted-logos__inner {
    gap: var(--space-10);
  }
}


/* ============================================================
   19. FAQ ACCORDION
   Closed: max-height 0. Open (.faq-item--open): max-height expanded.
   Chevron rotates 180deg on open.
   ============================================================ */


.faq-item__question:hover {
  background-color: var(--color-primary-muted);
}

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


.faq-item__answer p {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  max-width: none;
}


/* ============================================================
   22. PAGE HERO ā€” interior pages, centred, dark navy background
   ============================================================ */

.page-hero {
  background-color: var(--color-primary);
  padding-block: var(--space-2xl);
  text-align: center;
}

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

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-4);
}

.page-hero__breadcrumb a {
  color: var(--color-on-dark-muted);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-accent);
}

.page-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  max-width: none;
}

.page-hero__title {
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}

.page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-on-dark-muted);
  max-width: 640px;
  margin-inline: auto;
}


/* ============================================================
   23. CONTACT FORM SECTION
   Dark navy background. Two columns on desktop.
   ============================================================ */

.contact-form {
  background-color: var(--color-primary);
}

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

.contact-form__inner--full {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-inline: auto;
}

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

  .contact-form__content {
    flex: 1;
  }

  .contact-form__details {
    flex-shrink: 0;
    width: 280px;
  }
}

.contact-form__heading {
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}

.contact-form__lead {
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-6);
  max-width: none;
}

.contact-form__price-note {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pvt-form__chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-on-dark);
  margin-bottom: var(--space-md);
}

.pvt-form__chip[hidden] {
  display: none;
}

.pvt-form__chip-label {
  color: var(--color-accent);
  font-weight: 600;
}

.pvt-form__chip-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
}

.contact-form__input,
.contact-form__textarea {
  background-color: var(--color-primary-hover);
  border-color: var(--color-border-dark);
  color: var(--color-on-dark);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-on-dark-muted);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
  background-color: var(--color-primary-hover);
}

.pvt-form__field input.form-input--error,
.pvt-form__field textarea.form-input--error {
  border-color: var(--color-danger-text);
  background-color: var(--color-danger-soft);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__submit {
  align-self: flex-start;
}

.contact-form__details h3 {
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.contact-detail__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.contact-detail__value,
.contact-detail__link {
  color: var(--color-accent);
  font-size: var(--text-base);
  text-decoration: none;
}

.contact-detail__value:hover,
.contact-detail__link:hover {
  color: var(--color-accent-hover);
}

/* pvt-form ā€” shortcode form styles */
@media (min-width: 768px) {
  .contact-form__inner {
    gap: var(--space-10);
  }

  .contact-form__lead {
    margin-bottom: var(--space-8);
  }

  .contact-form__form {
    gap: var(--space-5);
  }

  .contact-form__details h3 {
    margin-bottom: var(--space-6);
  }

  .contact-detail {
    margin-bottom: var(--space-5);
  }
}

.pvt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pvt-form__hp {
  display: none;
}
.pvt-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.pvt-form__field label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-dark-muted);
}
.pvt-form__field input,
.pvt-form__field textarea {
  background: var(--color-surface-dark-field);
  border: 1px solid var(--color-surface-dark-field-border);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-on-dark);
  width: 100%;
  outline: none;
  transition: border-color var(--transition-fast);
}
.pvt-form__field input::placeholder,
.pvt-form__field textarea::placeholder {
  color: var(--color-on-dark-muted);
}
.pvt-form__field input:focus,
.pvt-form__field textarea:focus {
  border-color: var(--color-accent);
}
.pvt-form__field textarea {
  min-height: 120px;
  resize: vertical;
}
.pvt-form__privacy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
  margin-top: var(--space-3xs);
}
.pvt-form__notice {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  margin-bottom: var(--space-xs);
}
.pvt-form__notice--ok {
  background: var(--color-accent-soft-strong);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border);
}
.pvt-form__notice--fail {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
}


/* ============================================================
   32. TESTIMONIALS ā€” CAROUSEL
   ============================================================ */

.testimonials__carousel {
  position: relative;
  overflow: hidden;
}


.testimonials__track .testimonial-card {
  flex: 0 0 100%;
  min-width: 0;
}

/* Arrows ā€” hidden on mobile */
.testimonials__prev,
.testimonials__next {
  display: none;
}

@media (min-width: 768px) {
  .testimonials__prev,
  .testimonials__next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-card);
    color: var(--color-primary);
    font-size: var(--text-2xl);
    cursor: pointer;
    z-index: 2;
    transition: background-color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
  }

  .testimonials__prev:hover,
  .testimonials__next:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
  }

  .testimonials__prev {
    left: calc(-1 * var(--space-6));
  }

  .testimonials__next {
    right: calc(-1 * var(--space-6));
  }
}

/* Dots ā€” hidden on mobile */

@media (min-width: 768px) {
  .testimonials__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
}


.testimonials__dot--active,
.testimonials__dot:hover {
  background-color: var(--color-accent);
  transform: scale(1.25);
}

/* Testimonial blog post link */
.testimonial-card__link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  margin-top: var(--space-2);
}

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


/* ============================================================
   34. SERVICES GRID ā€” single-row desktop + icon
   ============================================================ */


.service-card__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}


/* Single row on desktop */
@media (min-width: 1024px) {
  .services-grid__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
  }

  .services-grid__cards .service-card {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Tablet: allow horizontal scroll when many cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .services-grid__cards::-webkit-scrollbar {
    display: none;
  }

  .services-grid__cards .service-card {
    flex: 0 0 280px;
  }
}


/* ==========================================================================
   Shared — Photo Hero
   Full-bleed background photo + contrast-floor gradient overlay, used by
   the Argo/Coach hero (.hero--coach) and the single-service hero
   (.service-hero). Home's hero is intentionally not part of this — see
   docs/superpowers/specs/2026-07-23-hero-system-redesign-design.md.
   ========================================================================== */

.pv-hero-photo {
  position: relative;
  overflow: hidden;
  /* Viewport-relative like .home-hero, not a flat px value — fixed heights
     read as jarringly shorter than Home's hero on tall viewports (2026-07-23:
     666px vs Home's 851-1031px at the same widths). Lower svh share + a px
     floor than Home, since these pages have real content directly below the
     fold, unlike Home's single full-viewport statement. */
  min-height: max(520px, 70svh);
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .pv-hero-photo {
    min-height: max(600px, 78svh);
  }
}

.pv-hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-hero-photo-overlay-1) 0%,
    var(--color-hero-photo-overlay-2) 32%,
    var(--color-hero-photo-overlay-3) 55%,
    var(--color-hero-photo-overlay-4) 78%,
    var(--color-hero-photo-overlay-5) 100%
  );
  pointer-events: none;
}

/* ============================================================
   30c ā€” Trusted Logos band
   ============================================================ */

.trusted-logos {
  padding-block: var(--space-xl);
}

.trusted-logos__label {
  text-align: center;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 700;
}


/* ============================================================
   34a ā€” Announcement Bar
   ============================================================ */

.announce-bar {
  background: var(--color-primary);
  padding: var(--space-xs) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  position: relative;
}

.announce-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.announce-bar__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  margin: 0;
}

.announce-bar__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.announce-bar__link:hover {
  opacity: 0.8;
}

.announce-bar__close {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-on-dark-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: 0 var(--space-3xs);
  line-height: 1;
  transition: color var(--transition-fast);
}

.announce-bar__close:hover {
  color: var(--color-on-dark);
}

@media (max-width: 640px) {
  .announce-bar__close {
    display: none;
  }
}


/* ── Hero page-load entrance animations ─────────────────────── */

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero__eyebrow,
.home-hero__title,
.home-hero__lead,
.home-hero__ctas {
  animation: hero-enter 0.7s var(--ease-default) both;
}

.home-hero__eyebrow { animation-delay: 0.1s; }
.home-hero__title   { animation-delay: 0.25s; }
.home-hero__lead    { animation-delay: 0.45s; }
.home-hero__ctas    { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .home-hero__eyebrow,
  .home-hero__title,
  .home-hero__lead,
  .home-hero__ctas {
    animation: none;
  }
}

/* ─── Transparent nav on hero pages ────────────────────────── */

body.has-hero .site-nav {
  background-color: transparent;
  border-bottom-color: transparent;
  transition:
    background-color var(--transition-base),
    backdrop-filter var(--transition-base),
    border-bottom-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Blur/tint kicks in once the hero heading starts scrolling behind the nav
   (toggled by main.js comparing #hero-heading's position to the nav's own
   height) - keeps the nav crisp and fully transparent over the empty top
   of the hero image, and only separates it from the photo once there's
   text underneath that actually needs the contrast.

   Below 1100px the menu links are hidden (hamburger mode) and the bar is
   mostly empty space, so a full-width tint reads as a heavy band across
   the photo for little reason — scope the blur to small chips behind the
   logo and hamburger instead. At 1100px+ the full menu fills the bar, so
   the full-width tint is what's actually needed there. */
@media (min-width: 1100px) {
  body.has-hero .site-nav.nav-hero-blur {
    background-color: rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* :not(.nav-scrolled) — once the whole hero has scrolled out and
   nav-scrolled gives the bar its solid background, the chips would
   otherwise stay blurred on top of that opaque color instead of handing
   off cleanly like the full-width variant above already does. */
@media (max-width: 1099.98px) {
  body.has-hero .site-nav.nav-hero-blur:not(.nav-scrolled) .nav-logo,
  body.has-hero .site-nav.nav-hero-blur:not(.nav-scrolled) .nav-toggle {
    background-color: rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--radius-md);
  }

  /* .nav-toggle already carries its own padding/radius; the logo needs
     padding added for the chip to read as a shape, offset by an equal
     negative margin so it doesn't shift surrounding layout. */
  body.has-hero .site-nav.nav-hero-blur .nav-logo {
    padding: var(--space-3xs) var(--space-xs);
    margin: calc(-1 * var(--space-3xs)) calc(-1 * var(--space-xs));
  }
}

body.has-hero .site-nav.nav-scrolled {
  background-color: var(--color-bg-card);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Nav text/icons need to be readable over the dark hero */
body.has-hero .site-nav:not(.nav-scrolled) .nav-logo,
body.has-hero .site-nav:not(.nav-scrolled) .nav-toggle-bar {
  color: var(--color-white);
}

body.has-hero .site-nav:not(.nav-scrolled) .nav-logo img {
  filter: brightness(0) invert(1);
  transition: filter var(--transition-base);
}

body.has-hero .site-nav:not(.nav-scrolled) .nav-toggle-bar {
  background-color: var(--color-white);
}

/* Mobile drawer is always light-background when open, so the toggle
   (now rendered as a close ×) must stay dark even over a transparent
   dark hero - otherwise it disappears against the drawer's light bg. */
body.has-hero.nav-open .site-nav:not(.nav-scrolled) .nav-toggle-bar {
  background-color: var(--color-primary);
}

body.has-hero .site-nav:not(.nav-scrolled) .nav-cta {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

/* Desktop only: white nav links over dark hero (mobile drawer has light bg) */
@media (min-width: 1100px) {
  body.has-hero .site-nav:not(.nav-scrolled) .nav-links a {
    color: var(--color-white);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-hero .site-nav {
    transition: none;
  }
}


/* ─── CVI: Playfair italic for all site headings ──────────────── */

.home-hero__title,
.page-hero__title,
.section-heading,
.section-title,
.home-coach__name,
.testimonial-card__quote,
.home-intro__heading {
  font-style: italic;
}

/* ============================================================
   36b ā€” Consent Banner
   ============================================================ */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-toast);
  padding: var(--space-sm);
  pointer-events: none;
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner-inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-lg);
  background: var(--color-primary);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  pointer-events: auto;
}

.consent-banner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.consent-banner-title {
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  max-width: none;
}

.consent-banner-text {
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
  max-width: none;
}

.consent-banner-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.consent-banner-btn {
  width: 100%;
}

.consent-banner-actions .btn-ghost {
  color: var(--color-text-inverse);
  border-color: var(--color-border-dark);
}

.consent-banner-actions .btn-ghost:hover {
  background-color: var(--color-surface-dark-hover);
  border-color: var(--color-text-inverse);
}

.consent-banner-actions .btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.consent-banner-actions .btn-primary:hover,
.consent-banner-actions .btn-primary:focus-visible {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .consent-banner {
    padding: var(--space-md);
  }

  .consent-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }

  .consent-banner-content {
    max-width: 640px;
  }

  .consent-banner-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .consent-banner-btn {
    width: auto;
  }
}

/* ==========================================================================
   Editor-only ACF placeholder preview
   Shown only to logged-in users who can edit posts (see pivotly_placeholder()
   in functions.php). Never rendered for public visitors.
   ========================================================================== */

.acf-placeholder {
  position: relative;
  display: inline;
  font-style: italic;
  color: var(--color-text-light);
  background: rgba(200, 169, 110, 0.12);
  border: 1px dashed var(--color-accent);
  border-radius: 4px;
  padding: 0.05em 0.4em;
}

.acf-placeholder::before {
  content: '\26A0 T\00e4itmata: ' attr(data-field);
  display: block;
  font-style: normal;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--color-accent);
  margin-bottom: 0.2em;
}

.acf-placeholder-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  font-style: italic;
  text-align: center;
  color: var(--color-text-light);
  background: rgba(200, 169, 110, 0.12);
  border: 1px dashed var(--color-accent);
  border-radius: 8px;
  padding: 1rem;
}

.acf-placeholder-block::before {
  content: '\26A0 T\00e4itmata: ' attr(data-field);
  display: block;
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--color-accent);
}

/* ============================================================
   VISUAL ELEVATION PRIMITIVES (shared by kuidas / partnerid — minu-lugu's
   own usage was deleted 2026-07-23 along with its retired page CSS)
   ============================================================ */

.pv-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-xl);
	height: var(--space-xl);
	border-radius: var(--radius-full);
	background: var(--color-accent-soft);
	border: var(--border-width) solid var(--color-accent-border);
	color: var(--color-accent-hover);
	flex: none;
}
.pv-badge .pv-icon { width: var(--space-md); height: var(--space-md); }
.pv-badge--lg { width: var(--space-2xl); height: var(--space-2xl); }
.pv-badge--lg .pv-icon { width: var(--space-lg); height: var(--space-lg); }
.pv-badge--on-navy {
	background: var(--color-surface-dark-bg-tint);
	border-color: var(--color-surface-dark-border-strong);
	color: var(--color-accent);
}

/* 2026-07-23 (5.5 icon unification) — two more contexts .pv-badge needs to
   sit in besides plain cream/navy sections. */

/* Solid, high-contrast: for a badge sitting on top of a real photo (the
   homepage service-card badge), where the light --on-navy/default tint
   wouldn't read against arbitrary photo content. transition-base already
   covers background-color; no separate transition property needed here. */
.pv-badge--on-photo {
	background: var(--color-primary);
	border: none;
	color: var(--color-text-inverse);
	box-shadow: 0 4px 14px rgba(27, 46, 75, 0.28);
	transition: background-color var(--transition-base);
}
.service-card--home:hover .pv-badge--on-photo {
	background: var(--color-accent);
}

/* Starts neutral/dim, only turns gold when its parent item is hovered —
   preserves the home-pain cards' original "draws your eye in on hover"
   interaction instead of flattening every badge to always-gold. */
.pv-badge--neutral {
	background: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-text-faint);
	transition: background-color 300ms var(--ease-default), border-color 300ms var(--ease-default), color 300ms var(--ease-default);
}
.home-pain__item:hover .pv-badge--neutral {
	background: var(--color-accent-soft);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-accent-hover);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}
.pv-eyebrow::before {
	content: "";
	width: var(--space-lg);
	height: var(--border-width-thick);
	background: var(--color-accent);
	border-radius: var(--radius-full);
}
.pv-eyebrow--center { justify-content: center; }

.pv-card {
	background: var(--color-bg-card);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-lg);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) {
	.pv-card:hover {
		transform: translateY(calc(-1 * var(--space-1)));
		box-shadow: var(--shadow-lg);
		border-color: var(--color-accent-border);
	}
}

.pv-section-head {
	max-width: var(--container-md);
	margin-inline: auto;
	margin-block-end: var(--space-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	text-align: center;
}
.pv-section-head__title {
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
}
.pv-section-head__lead {
	color: var(--color-text-muted);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

.pv-thread {
	position: absolute;
	background: repeating-linear-gradient(to right, var(--color-accent) 0 var(--space-2xs), transparent var(--space-2xs) var(--space-xs));
	opacity: 0.6;
	pointer-events: none;
}

.cta-band {
	position: relative;
	overflow: hidden;
	max-width: var(--container-xl);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-xl);
	border-radius: var(--radius-2xl);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	text-align: center;
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(120% 120% at 100% 0%, var(--color-watermark-on-dark) 0, transparent 55%),
		repeating-radial-gradient(circle at 85% 15%, transparent 0 var(--space-6), var(--color-watermark-on-dark) var(--space-6) calc(var(--space-6) + var(--border-width)));
	pointer-events: none;
}
.cta-band__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	max-width: var(--container-md);
	margin-inline: auto;
}
/* color was missing entirely (found 2026-07-22 via single.php's new in-post
   CTA) — title inherited the default heading color (--color-primary, navy)
   straight onto this component's navy background, rendering invisible on
   every page that uses it. .cta-band__body already correctly used
   --color-on-dark-muted; the title needs the un-muted variant. */
.cta-band__title { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--color-on-dark); }
.cta-band__body { color: var(--color-on-dark-muted); font-size: var(--text-md); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

@media (min-width: 768px) {
	.cta-band { padding: var(--space-3xl) var(--space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
	.pv-card,
	.pv-card:hover {
		transform: none;
		transition: none;
	}
}


/* ============================================================
   BRANDED IMAGE FALLBACK (2026-07-22)
   ~30 separate "*-placeholder" elements across the theme (missing
   coach photo, missing service icon, missing blog featured image,
   missing partner logo, etc.) each individually set their own flat
   var(--color-border) / var(--color-bg-muted) fill — a plain grey box
   that reads as broken content, not a deliberate design choice.

   One rule now supplies a single branded texture for all of them: a
   diagonal gold hairline on --color-bg-alt. Deliberately static, no
   shimmer/pulse — this is a permanent "no image exists" state, not a
   "still loading" state (loading skeletons are a different thing; see
   the AJAX blog "Laadi rohkem" handling in main.js). Placed last in
   the cascade so it wins by source order at equal specificity over
   every scattered rule above, without !important.

   Excluded on purpose:
     .acf-placeholder        — inline text-wrapper span for empty ACF
                                field labels (editor-only), not an
                                image box; a background here would sit
                                behind running text.
     .service-card__media-placeholder,
     .coach-row__photo-placeholder,
     .coach-card-b2__photo-placeholder
                              — already use an intentional navy
                                gradient fill, not flat grey; leave
                                those as the nicer existing treatment.
                                (.coach-feature__photo-placeholder was
                                removed 2026-07-22 along with the old
                                boxed-photo layout; the v2 full-bleed
                                treatment has no placeholder element —
                                an empty state just omits the photo
                                layer entirely.)
   ============================================================ */
[class*="-placeholder"]:not(.acf-placeholder):not(.service-card__media-placeholder):not(.coach-row__photo-placeholder):not(.coach-card-b2__photo-placeholder) {
	background-color: var(--color-bg-alt);
	background-image: repeating-linear-gradient(
		135deg,
		var(--color-accent-border) 0,
		var(--color-accent-border) 1px,
		transparent 1px,
		transparent 13px
	);
}