/**
 * FoxLogic — premium motion, loader, and interaction layer.
 */

/* ---------- Primary nav: Services dropdown ---------- */
/* Desktop: hover/focus opens a panel below the link. Mobile: tap the chevron
   to expand inline within the drawer (keeps reach within thumb range). */
.nav-item--has-submenu {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-link__chevron {
  transition: transform 0.22s ease;
}

.nav-submenu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 480px;
  max-width: min(620px, calc(100vw - 2rem));
  padding: 1rem 1rem 0.75rem;
  /* Solid background — backdrop-filter on top of the autoplay hero video
     was triggering GPU re-blurs on every video frame, which made hover
     reveal feel laggy. Opaque colour fixes it without losing the look. */
  background: #1a1714;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 70;
  will-change: opacity, transform;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #1a1714;
  border-top: 1px solid rgba(20, 184, 166, 0.22);
  border-left: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 3px 0 0 0;
}

.nav-item--has-submenu:hover .nav-submenu,
.nav-item--has-submenu:focus-within .nav-submenu,
.nav-item--has-submenu.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-item--has-submenu:hover > .nav-link .nav-link__chevron,
.nav-item--has-submenu:focus-within > .nav-link .nav-link__chevron,
.nav-item--has-submenu.is-open > .nav-link .nav-link__chevron {
  transform: rotate(180deg);
}

.nav-submenu__title {
  margin: 0 0 0.65rem;
  padding: 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(94, 234, 212, 0.78);
}

.nav-submenu__list {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.65rem;
}

.nav-submenu__link {
  display: block;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
  line-height: 1.3;
}

.nav-submenu__link:hover,
.nav-submenu__link:focus-visible {
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
}

.nav-submenu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: #5eead4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav-submenu__cta:hover {
  color: #99f6e4;
}

@media (max-width: 900px) {
  /* Mobile drawer: turn dropdown into an inline accordion. The chevron
     becomes a tap target that toggles only the submenu (without
     navigating). The link itself still goes to /services on tap. */
  .nav-item--has-submenu .nav-link {
    position: relative;
    padding-right: 56px;
  }

  .nav-link__chevron {
    margin-left: auto;
    width: 16px;
    height: 16px;
  }

  .nav-submenu-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .nav-submenu {
    position: static;
    transform: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    box-shadow: none;
    backdrop-filter: none;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease;
  }

  .nav-submenu::before {
    display: none;
  }

  .nav-item--has-submenu.is-open .nav-submenu {
    max-height: 720px;
    padding: 0.5rem 0.5rem 0.65rem;
  }

  /* Hover-only desktop opens are disabled on touch — only the explicit
     toggle (`.is-open` class) works on mobile. */
  .nav-item--has-submenu:hover .nav-submenu,
  .nav-item--has-submenu:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-item--has-submenu:not(.is-open) .nav-submenu {
    max-height: 0;
    padding: 0;
  }

  .nav-submenu__title {
    color: rgba(94, 234, 212, 0.85);
  }

  .nav-submenu__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nav-submenu__link {
    padding: 0.65rem 0.6rem;
    font-size: 0.92rem;
  }

  .nav-submenu__cta {
    margin-top: 0.55rem;
    padding-top: 0.7rem;
  }
}

/* ---------- Mobile bottom action bar ---------- */
/* Two-button fixed bar on phones: Request Quote + Ask Fox Logic.
   Hidden on tablet/desktop (>= 769px). When visible, the floating chatbot
   launcher and contact trigger get out of the way so the bar doesn't pile
   up with three buttons stacked. */
.mobile-action-bar {
  display: none;
}

/* Hide the bottom action bar when the mobile drawer is open. The nav
   drawer is a child of `.site-header` which has `isolation: isolate`,
   which caps the drawer's effective z-index at the header's (z:50) — so
   without hiding the action bar (z:90), the bar sits ABOVE the drawer
   and absorbs every click that should land on a nav link. Hiding it on
   `body.nav-open` solves both the click-through bug and the user's
   request that the bottom buttons disappear while the menu is open. */
body.nav-open .mobile-action-bar {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-action-bar {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(26, 23, 20, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(20, 184, 166, 0.22);
    box-shadow: 0 -10px 30px rgba(26, 23, 20, 0.28);
  }

  .mobile-action-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease;
  }

  .mobile-action-bar__btn--primary {
    background: var(--color-accent);
    color: #fff;
  }

  .mobile-action-bar__btn--primary:hover {
    background: var(--color-accent-hover);
  }

  .mobile-action-bar__btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
  }

  .mobile-action-bar__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-action-bar__btn:active {
    transform: scale(0.98);
  }

  /* Push body content up so nothing hides under the bar. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* Hide existing single FABs when the bar is visible — the bar is the new
     mobile entry-point for both contact and chatbot. */
  .fox-bot-launcher,
  .contact-float-trigger,
  .scroll-top {
    display: none !important;
  }

  /* Lift the chatbot panel (still triggered by the bar's "Ask" button)
     above the action bar so it doesn't sit beneath it. */
  .fox-bot-panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 0.5rem);
  }

  /* Hide the now-empty contact float panel on mobile too. */
  .contact-float-panel {
    display: none !important;
  }
}

/* ---------- Service detail: Technologies we use ---------- */
.section-service-tech {
  background: linear-gradient(180deg, var(--color-bg) 0%, #ffffff 100%);
}

/* Homepage Recent Work carousel cards now show the engagement period
   directly under the description (real partnerships, measured in years). */
.portfolio-card__period {
  margin: 0.65rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(26, 23, 20, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-accent-hover);
}

/* Portfolio card — engagement facts list (services + period). Lives below
   the project description as a scannable, citable mini-grid. The card is
   a flex column so the facts always anchor to the bottom regardless of
   how long the description is — keeps every row of cards visually
   symmetrical. */
.portfolio-grid--masonry .portfolio-card,
.page-portfolio .portfolio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.portfolio-grid--masonry .portfolio-body,
.page-portfolio .portfolio-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.portfolio-grid--masonry .portfolio-body > p:not(.portfolio-meta):first-of-type,
.page-portfolio .portfolio-body > p:not(.portfolio-meta):first-of-type {
  flex: 1;
}

.portfolio-card__facts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(26, 23, 20, 0.06);
  display: grid;
  gap: 0.55rem;
  /* Anchor the facts row to the bottom of the card so all cards in a
     row align their last block on the same y-coordinate. */
  margin-top: auto;
}

.portfolio-card__fact {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.portfolio-card__fact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.portfolio-card__fact-value {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text);
}

/* Homepage testimonials — premium card grid with star rating, real
   client name + role + services, and a brand-tinted avatar badge. Real
   social proof signal for Google rich results AND AI search citations. */
.home-testimonial-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.home-testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b;
}

.home-testimonial-meta__text {
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}

/* Testimonials carousel — single horizontal track via the shared
   fl-carousel component. Arrows are visually hidden (the JS still
   uses them for nav, but pointer/tab access is suppressed); only
   dots are visible. Cards stretch to equal height per row. */
.testimonial-carousel.fl-carousel {
  position: relative;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.testimonial-carousel.fl-carousel .fl-carousel__arrow {
  display: none;
}

.testimonial-carousel.fl-carousel .fl-carousel__viewport {
  grid-column: 1 / -1;
}

.testimonial-carousel.fl-carousel .fl-carousel__track {
  align-items: stretch;
}

.testimonial-carousel.fl-carousel .fl-carousel__dots {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  margin: 0.5rem 0 0;
}

.testimonial-card {
  margin: 0;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 23, 20, 0.06);
  box-shadow: 0 6px 22px rgba(26, 23, 20, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* `align-self: stretch` (inherited from the carousel track's
     `align-items: stretch`) makes every slide match the tallest one's
     height. We deliberately do NOT set `height: 100%` here — on a flex
     item it resolves to `auto` (content height), which OVERRIDES the
     stretch and produces uneven cards. */
  align-self: stretch;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.32);
  }
}

.testimonial-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(26, 23, 20, 0.06);
}

.testimonial-card__logo {
  flex-shrink: 0;
  width: auto;
  height: 30px;
  display: block;
}

.testimonial-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b;
  flex-shrink: 0;
}

.testimonial-card__quote {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--color-text);
  flex: 1;
}

.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(26, 23, 20, 0.06);
}

.testimonial-card__company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.testimonial-card__company-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}

.testimonial-card__location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.18);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-accent-hover);
  letter-spacing: 0.005em;
}

.testimonial-card__location-icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.testimonial-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.testimonial-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.testimonial-card__pill--industry {
  background: rgba(26, 23, 20, 0.05);
  color: var(--color-text);
  border: 1px solid rgba(26, 23, 20, 0.08);
}

.testimonial-card__pill--since {
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
  border: 1px solid rgba(20, 184, 166, 0.22);
}

.testimonial-card__service-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem;
  font-size: 0.7rem;
  /* Reserve space for two rows of pills so cards with fewer services
     still allocate the same vertical space — keeps every footer the
     same height across the carousel and keeps the company-name /
     meta-pills row aligned at the same y-coordinate on every card. */
  min-height: 53px;
}

.testimonial-card__service-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: rgba(20, 184, 166, 0.06);
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* "Trusted long-term by" strip removed by design — testimonial cards
   already carry the client logo at the top of each slide. */

/* Related insights — surfaces related blog posts at the bottom of each
   service page. Internal-linking depth signal for Google + topical
   anchor for AI engines. */
.section-service-related-blog {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
}

.service-related-blog-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .service-related-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.service-related-blog-card {
  margin: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 23, 20, 0.06);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(26, 23, 20, 0.04);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-related-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.32);
  }
}

.service-related-blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.service-related-blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg);
}

.service-related-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .service-related-blog-card:hover .service-related-blog-card__media img {
    transform: scale(1.04);
  }
}

.service-related-blog-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.92);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-related-blog-card__body {
  flex: 1;
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.service-related-blog-card__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.service-related-blog-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}

.service-related-blog-card__excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  /* Cap to 2 lines to keep card heights aligned in the grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-related-blog-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-accent);
}

/* "At a glance" / Quick facts block on service detail pages — gives AI
   assistants and skim-readers a scannable, citable list of concrete
   claims right under the overview. Each fact is a single short sentence
   with a brand-colored check. */
.service-quick-facts {
  list-style: none;
  margin: 1.75rem auto 0.75rem;
  padding: 1.4rem clamp(1.25rem, 2.5vw, 1.85rem);
  max-width: 850px;
  display: grid;
  gap: 0.85rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.06), rgba(20, 184, 166, 0));
  border: 1px solid rgba(20, 184, 166, 0.18);
  text-align: left;
}

.service-quick-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--color-primary);
}

.service-quick-facts__check {
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: var(--color-accent);
}

@media (min-width: 700px) {
  .service-quick-facts {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
  }
}

.tech-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  /* Flex (not grid) so a partial last row centers symmetrically instead
     of anchoring to the left with empty space on the right. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.tech-grid > .tech-card {
  flex: 0 0 160px;
}

.tech-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.15rem 0.85rem;
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(26, 23, 20, 0.04);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tech-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.32);
  }

  .tech-card:hover .tech-card__logo {
    transform: scale(1.06);
  }
}

.tech-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tech-card__logo svg,
.tech-card__logo img {
  display: block;
  width: 48px;
  height: 48px;
}

.tech-card__label {
  font-family: var(--font);
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .tech-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 0.6rem;
  }

  .tech-card {
    padding: 0.95rem 0.6rem;
  }

  .tech-card__logo {
    width: 48px;
    height: 48px;
  }

  .tech-card__logo svg,
  .tech-card__logo img {
    width: 40px;
    height: 40px;
  }

  .tech-card__label {
    font-size: 0.78rem;
  }
}

/* ---------- About: How work moves (rhythm-grid) ---------- */
.page-about-rhythm .rhythm-grid {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: rhythm;
}

.rhythm-step {
  position: relative;
  padding: 1.5rem 1.35rem 1.4rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 14px 40px rgba(26, 23, 20, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .rhythm-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.32);
  }
}

.rhythm-step__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent-hover);
  margin-bottom: 0.85rem;
}

.rhythm-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
  margin-bottom: 0.75rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.rhythm-step__icon svg {
  width: 20px;
  height: 20px;
}

.rhythm-step__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.rhythm-step__body {
  margin: 0 0 0.85rem;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.rhythm-step__deliverable {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(26, 23, 20, 0.12);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.rhythm-step__deliverable span {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 700;
  color: var(--color-accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

/* ---------- About: For sponsors (sponsor-grid) ---------- */
.page-about-sponsors .sponsor-grid {
  margin-top: 2.25rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sponsor-card {
  position: relative;
  padding: 1.65rem 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 14px 40px rgba(26, 23, 20, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sponsor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.32);
  }
}

.sponsor-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.sponsor-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
}

.sponsor-card__icon svg {
  width: 22px;
  height: 22px;
}

.sponsor-card__pill {
  margin: 0;
  padding: 0.25rem 0.7rem;
  background: rgba(26, 23, 20, 0.05);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sponsor-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.sponsor-card__body {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.sponsor-card__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.sponsor-card__bullets li {
  position: relative;
  padding-left: 1.15rem;
}

.sponsor-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Balanced text wrapping (avoids jagged headings) ---------- */
.page-hero-full__title,
.page-title,
.cta-title,
.psr-title,
.blog-card-v2__title,
.service-hub-card__title,
.tech-card__label,
.rhythm-step__title,
.sponsor-card__title {
  text-wrap: balance;
}

/* `text-wrap: pretty` previously applied here, but Chrome's implementation
   shifts bold inline children (`.text-link`) onto a slightly lower baseline
   when the parent uses pretty wrapping. Removed across all body copy until
   the engine bug is fixed; `balance` on titles is unaffected. */

/* ---------- Brand scrollbar ---------- */
html {
  scrollbar-color: #14b8a6 #f0ebe6;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f0ebe6;
}

::-webkit-scrollbar-thumb {
  background: #14b8a6;
  border-radius: 999px;
  border: 3px solid #f0ebe6;
}

::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

::-webkit-scrollbar-corner {
  background: #f0ebe6;
}

/* ---------- Page loader ---------- */
body.is-loading {
  overflow: hidden;
}

body.is-loaded #main-content {
  animation: foxlogic-content-in 0.55s ease-out both;
}

@keyframes foxlogic-content-in {
  from {
    opacity: 0.96;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-thank-you .thank-you-ref {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 12px);
  background: rgba(26, 23, 20, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.18);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse 125% 88% at 50% 18%, rgba(20, 184, 166, 0.32), transparent 56%),
    radial-gradient(ellipse 90% 55% at 82% 92%, rgba(13, 148, 136, 0.14), transparent 52%),
    #1a1714;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.site-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: min(320px, 92vw);
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

.site-loader-logo {
  width: min(220px, 52vw);
  height: auto;
  display: block;
  margin: 0 auto;
  transform-origin: center center;
  animation: foxlogic-loader-logo 3s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes foxlogic-loader-logo {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(20, 184, 166, 0.28));
  }
  50% {
    transform: scale(1.045);
    opacity: 0.97;
    filter: drop-shadow(0 0 40px rgba(20, 184, 166, 0.48));
  }
}

.brand-logo-img--on-loader {
  opacity: 1;
}

.site-loader-tagline {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 242, 0.38);
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  body.is-loaded #main-content {
    animation: none;
  }

  .site-loader-logo {
    animation: none;
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 18px rgba(20, 184, 166, 0.3));
  }

  .blog-list--masonry .blog-card:hover {
    transform: none;
  }

  .blog-list--masonry .blog-card:hover .blog-thumb img {
    transform: none;
  }
}

/* ---------- Global polish ---------- */
html {
  scroll-behavior: smooth;
}

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

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18), transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(100%);
}

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

.card,
.pricing-card,
.portfolio-card,
.blog-card,
.quote-card,
.step,
.bento-card {
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease,
    border-color 0.34s ease;
}

@media (hover: hover) {
  .card:hover,
  .pricing-card:hover,
  .portfolio-card:hover,
  .blog-card:hover,
  .step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 56px rgba(26, 23, 20, 0.12);
  }

  .blog-card:hover .blog-thumb img {
    transform: scale(1.03);
  }
}

.blog-thumb {
  overflow: hidden;
}

.blog-thumb img {
  transition: transform 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .blog-list--masonry .blog-card {
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.38s ease,
      border-color 0.38s ease;
  }

  .blog-list--masonry .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 68px rgba(26, 23, 20, 0.13);
    border-color: rgba(20, 184, 166, 0.2);
  }

  .blog-list--masonry .blog-card:hover .blog-thumb img {
    transform: scale(1.045);
  }
}

/* ---------- Section atmospheres ---------- */
.section--mesh {
  background-image: radial-gradient(rgba(20, 184, 166, 0.065) 1.5px, transparent 1.5px),
    linear-gradient(180deg, var(--color-bg) 0%, #eef6f4 100%);
  background-size: 28px 28px, auto;
}

.section--glow {
  position: relative;
}

.section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 15% 10%, rgba(20, 184, 166, 0.08), transparent 55%),
    radial-gradient(700px 380px at 85% 80%, rgba(26, 23, 20, 0.05), transparent 50%);
  pointer-events: none;
}

.section--glow > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Reveal stagger (delay only; opacity/transform from style.css) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card-grid .reveal:nth-child(1) {
    transition-delay: 0ms;
  }
  .card-grid .reveal:nth-child(2) {
    transition-delay: 55ms;
  }
  .card-grid .reveal:nth-child(3) {
    transition-delay: 110ms;
  }
  .card-grid .reveal:nth-child(4) {
    transition-delay: 165ms;
  }
  .card-grid .reveal:nth-child(5) {
    transition-delay: 220ms;
  }
  .card-grid .reveal:nth-child(6) {
    transition-delay: 275ms;
  }

  .bento-grid .reveal:nth-child(odd) {
    transition-delay: 40ms;
  }
  .bento-grid .reveal:nth-child(even) {
    transition-delay: 90ms;
  }

  .reveal-stack > .reveal:nth-child(1) {
    transition-delay: 0ms;
  }
  .reveal-stack > .reveal:nth-child(2) {
    transition-delay: 70ms;
  }
  .reveal-stack > .reveal:nth-child(3) {
    transition-delay: 140ms;
  }
  .reveal-stack > .reveal:nth-child(4) {
    transition-delay: 210ms;
  }
  .reveal-stack > .reveal:nth-child(5) {
    transition-delay: 280ms;
  }
  .reveal-stack > .reveal:nth-child(6) {
    transition-delay: 350ms;
  }

  .portfolio-grid .reveal:nth-child(1) {
    transition-delay: 0ms;
  }
  .portfolio-grid .reveal:nth-child(2) {
    transition-delay: 75ms;
  }
  .portfolio-grid .reveal:nth-child(3) {
    transition-delay: 150ms;
  }
}

/* ---------- Buttons: form loader ---------- */
.btn-loader-spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: foxlogic-spin 0.65s linear infinite;
}

.btn-secondary .btn-loader-spin {
  border-color: rgba(26, 23, 20, 0.15);
  border-top-color: var(--color-primary);
}

@keyframes foxlogic-spin {
  to {
    transform: rotate(360deg);
  }
}

button[data-aria-busy='true'] .btn-loader-inner,
.btn.is-busy .fox-bot-send-label {
  pointer-events: none;
}

/* ---------- Chatbot send busy ---------- */
.fox-bot-send.is-busy {
  opacity: 0.85;
  cursor: wait;
}

.fox-bot-send .fox-bot-send-spinner {
  display: none;
}

.fox-bot-send.is-busy .fox-bot-send-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.35rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: middle;
  animation: foxlogic-spin 0.65s linear infinite;
}

/* ---------- Hero depth ---------- */
.hero--premium .hero-inner {
  animation: foxlogic-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes foxlogic-hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after {
    display: none;
  }

  .hero--premium .hero-inner {
    animation: none;
  }

  .contact-float-trigger:hover {
    transform: none;
  }

  .card:hover,
  .pricing-card:hover,
  .portfolio-card:hover,
  .blog-card:hover,
  .step:hover,
  .quote-card--premium:hover,
  .accordion-item--premium:hover,
  .solution-card--premium:hover,
  .solution-card--on-dark:hover,
  .service-hub-card:hover {
    transform: none;
  }

  .reveal {
    transition: none;
  }

  .contact-float-panel,
  .contact-float-trigger {
    transition: none;
  }
}

/* Aligned to the same bottom line as the Ask Fox Logic launcher. */
.contact-float-trigger {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 99;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(20, 184, 166, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-white);
  background: linear-gradient(135deg, rgba(20, 23, 20, 0.92), rgba(47, 42, 38, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 38px rgba(26, 23, 20, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 4px rgba(20, 184, 166, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.contact-float-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow:
    0 22px 56px rgba(26, 23, 20, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 8px rgba(20, 184, 166, 0.18);
}

.contact-float-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.contact-float-panel {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 64px);
  z-index: 100;
  width: min(308px, calc(100vw - 2rem));
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  box-shadow:
    0 0 0 1px rgba(26, 23, 20, 0.04),
    0 24px 56px rgba(26, 23, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.contact-float-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-float-panel-inner {
  position: relative;
  padding: 0.95rem 1rem 1rem;
}

.contact-float-heading {
  margin: 0;
  padding-right: 2.25rem;
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contact-float-sub {
  margin: 0.15rem 0 0.85rem;
  font-size: 0.8125rem;
  color: rgba(26, 23, 20, 0.55);
}

.contact-float-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-float-action svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent-hover);
}

.contact-float-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  min-height: 46px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(26, 23, 20, 0.06);
  color: var(--color-primary);
  background: rgba(26, 23, 20, 0.025);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.contact-float-action:hover {
  border-color: rgba(20, 184, 166, 0.4);
  background: rgba(20, 184, 166, 0.07);
  transform: translateX(2px);
}

.contact-float-action strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.contact-float-action .muted {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(26, 23, 20, 0.5);
  word-break: break-word;
}

.contact-float-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: rgba(26, 23, 20, 0.42);
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.contact-float-close:hover {
  color: var(--color-primary);
  background: rgba(26, 23, 20, 0.06);
}

@media (max-width: 600px) {
  .contact-float-trigger {
    left: max(0.85rem, env(safe-area-inset-left, 0px));
    bottom: max(0.95rem, env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }

  .contact-float-panel {
    left: max(0.85rem, env(safe-area-inset-left, 0px));
    bottom: calc(max(0.95rem, env(safe-area-inset-bottom, 0px)) + 60px);
    width: calc(100vw - 1.7rem);
    max-width: 340px;
  }
}

/* ---------- Webflow-style label hover shift ---------- */
.hover-shift {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
}

/* One-line viewport: without this, the stacked track shows both lines = duplicated text */
.btn .hover-shift,
button.btn .hover-shift {
  height: 1.25em;
  max-height: 1.25em;
  line-height: 1.25;
  vertical-align: middle;
}

.btn-lg .hover-shift {
  height: 1.25em;
  max-height: 1.25em;
  line-height: 1.25;
}

.hover-shift__track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hover-shift__line {
  display: block;
  flex-shrink: 0;
  height: 1.25em;
  line-height: 1.25;
}

.btn .hover-shift__line,
.btn-lg .hover-shift__line {
  height: 1.25em;
  line-height: 1.25;
}

.nav-list a .hover-shift,
.footer-links a .hover-shift {
  height: 1.25em;
  line-height: 1.25;
}

.breadcrumb-link-hover .hover-shift {
  height: 1.2em;
  line-height: 1.2;
}

.bento-card-cta .hover-shift {
  height: 1.15em;
  line-height: 1.15;
}

.text-link .hover-shift,
.text-link-premium .hover-shift,
.text-link-on-dark .hover-shift {
  height: 1.25em;
  max-height: 1.25em;
  line-height: 1.25;
  vertical-align: bottom;
}

/* Service hub cards "View Service" CTA — without this, both the visible
   and ghost line render stacked instead of clipping to one line height. */
.service-hub-card__cta .hover-shift,
.service-hub-card__secondary .hover-shift {
  height: 1.25em;
  max-height: 1.25em;
  line-height: 1.25;
  vertical-align: bottom;
}

.page-hero-full__meta {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  opacity: 0.92;
}

.page-hero-full__meta .text-link-premium {
  color: rgba(255, 255, 255, 0.95);
}

.card-inline-links {
  margin: 0;
  font-size: 0.95rem;
}

/* Inline editorial link on dark hero/CTA backgrounds. Subtle underline pattern
   matching .text-link, with brighter teal so contrast holds on dark. */
/* Same color-only emphasis as `.text-link` — no font-weight change, so
   the link inherits parent metrics exactly (no baseline drift possible). */
.text-link-on-dark {
  color: #5eead4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-link-on-dark:hover {
  color: #99f6e4;
}

.home-portfolio-preview .portfolio-card--compact .portfolio-thumb img {
  min-height: 200px;
}

.home-portfolio-preview .portfolio-card--compact .portfolio-title {
  font-size: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .hover-shift__track {
    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .btn:hover .hover-shift__track,
  button.btn:hover .hover-shift__track,
  a:not(.btn):hover .hover-shift__track,
  button:not(.btn):hover .hover-shift__track {
    transform: translateY(-50%);
  }

  a.bento-card:hover .bento-card-cta .hover-shift__track {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-shift__track {
    transition: none !important;
    transform: none !important;
  }

  .btn:hover .hover-shift__track,
  button.btn:hover .hover-shift__track,
  a:hover .hover-shift__track,
  button:hover .hover-shift__track,
  a.bento-card:hover .bento-card-cta .hover-shift__track {
    transform: none !important;
  }
}

/* ---------- Home: infinite capability marquee ---------- */
.home-marquee {
  position: relative;
  z-index: 1;
  padding: 0.75rem 0;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.06), transparent 28%, transparent 72%, rgba(20, 184, 166, 0.06)),
    linear-gradient(180deg, rgba(26, 23, 20, 0.92), rgba(18, 16, 14, 0.96));
  border-block: 1px solid rgba(20, 184, 166, 0.14);
}

.home-marquee--light {
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.07), transparent 30%, transparent 70%, rgba(20, 184, 166, 0.07)),
    linear-gradient(180deg, #fafaf8 0%, #f3faf8 48%, #eef6f4 100%);
  border-block-color: rgba(20, 184, 166, 0.2);
}

.home-marquee--light .home-marquee__item {
  color: rgba(26, 23, 20, 0.52);
}

.home-marquee--light .home-marquee__item + .home-marquee__item::before {
  background: rgba(20, 184, 166, 0.38);
}

.home-marquee__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.home-marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: foxlogic-marquee-x 52s linear infinite;
  will-change: transform;
}

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

.home-marquee__group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2.75rem;
  padding-inline: 1.25rem 3rem;
}

.home-marquee__item {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.home-marquee__item + .home-marquee__item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 2.75rem;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.45);
  vertical-align: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
  .home-marquee:hover .home-marquee__track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    justify-content: center;
    row-gap: 0.5rem;
    column-gap: 1.25rem;
    padding: 0.35rem 1rem 0.5rem;
  }

  .home-marquee__group[aria-hidden='true'] {
    display: none;
  }

  .home-marquee__item {
    white-space: normal;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .home-marquee__item + .home-marquee__item::before {
    display: none;
  }
}

/* ---------- Parallax layers (JS sets --fl-parallax-shift) ---------- */
[data-fl-parallax] {
  --fl-parallax-shift: 0px;
  will-change: transform;
  transform: translate3d(0, var(--fl-parallax-shift), 0);
}

/* ---------- Home hero: subtle aurora over video ---------- */
.page-hero-full--home .page-hero-full__video {
  position: relative;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero-full--home .page-hero-full__video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 92% 72% at 62% 16%, rgba(20, 184, 166, 0.13), transparent 56%);
    mix-blend-mode: screen;
    opacity: 0.82;
    animation: foxlogic-hero-aurora 18s ease-in-out infinite alternate;
  }
}

@keyframes foxlogic-hero-aurora {
  from {
    opacity: 0.68;
    transform: translate3d(-1.5%, 0, 0) scale(1);
  }
  to {
    opacity: 0.92;
    transform: translate3d(1.8%, -1.2%, 0) scale(1.035);
  }
}

/* ---------- Section rhythm: soft teal hairlines ---------- */
.page-home main#main-content > .section:not(.page-hero-full) {
  position: relative;
}

.page-home main#main-content > .section:not(.page-hero-full)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 88vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.16), transparent);
  pointer-events: none;
  opacity: 0.85;
}

.page-home main#main-content > .section.home-marquee::before {
  opacity: 0.62;
}

/* ---------- Quote & portfolio: transition base (hover below with unified cards) ---------- */
@media (hover: hover) and (pointer: fine) {
  .quote-card--premium,
  .portfolio-card {
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.34s ease,
      border-color 0.34s ease;
  }
}

/* (Old `.accordion-item--premium summary` styling moved into the unified
   accordion block lower in this file.) */

/* ---------- CTA band: slow-moving gradient glow ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta-band--premium::after {
    animation: foxlogic-cta-glow 16s ease-in-out infinite alternate;
  }
}

@keyframes foxlogic-cta-glow {
  from {
    transform: translate(-5%, -6%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(6%, 5%) scale(1.07);
    opacity: 0.9;
  }
}

/* ---------- Footer social nudge ---------- */
@media (hover: hover) and (pointer: fine) {
  .social-link {
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
  }

  .social-link:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fl-parallax] {
    transform: none !important;
  }

  .page-hero-full--home .page-hero-full__video-wrap::after {
    animation: none !important;
    opacity: 0.55;
    transform: none !important;
  }

  .cta-band--premium::after {
    animation: none !important;
    transform: none !important;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost-light:hover {
    transform: none;
  }

  .card:hover,
  .step:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .quote-card--premium:hover,
  .portfolio-card:hover,
  .accordion-item--premium:hover,
  .solution-card--premium:hover,
  .solution-card--on-dark:hover,
  .service-hub-card:hover {
    transform: none;
  }
}

/* ---------- Split section visuals, image parallax, premium card accents ---------- */
.fl-icon {
  display: block;
  flex-shrink: 0;
}

.section.section--mist {
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, #eef8f5 45%, var(--color-bg-muted) 100%);
}

.section--ai-visual {
  background:
    radial-gradient(960px 500px at 6% 18%, rgba(20, 184, 166, 0.2), transparent 55%),
    radial-gradient(720px 420px at 94% 78%, rgba(13, 148, 136, 0.12), transparent 50%),
    linear-gradient(180deg, #141210 0%, #1a2220 50%, #131110 100%) !important;
}

.split--visual-gap {
  gap: clamp(1.75rem, 4.5vw, 3.25rem);
  align-items: center;
}

.fl-visual-panel {
  min-width: 0;
}

.fl-visual-panel__frame {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 24px 64px rgba(26, 23, 20, 0.12),
    0 0 0 1px rgba(20, 184, 166, 0.14);
}

.fl-visual-panel__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  --fl-img-y: 0px;
  transform: translate3d(0, var(--fl-img-y), 0) scale(1.08);
  will-change: transform;
}

.fl-visual-panel--on-dark .fl-visual-panel__frame {
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(20, 184, 166, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .fl-visual-panel__frame img {
    transform: none;
    will-change: auto;
  }
}

@keyframes fl-float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.fl-float-slow {
  animation: fl-float-soft 8s ease-in-out infinite;
}

.fl-float-slow--delayed {
  animation-delay: -3.5s;
}

@media (prefers-reduced-motion: reduce) {
  .fl-float-slow,
  .fl-float-slow--delayed {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card-title__icon {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s ease;
  }

  .card:hover .card-title__icon {
    transform: scale(1.07);
    color: #0d9488;
  }

  .accordion-item--premium {
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.34s ease,
      border-color 0.34s ease;
  }

  .card:hover,
  .step:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .quote-card--premium:hover,
  .portfolio-card:hover {
    transform: translateY(-6px) scale(1.008);
    box-shadow:
      0 28px 72px rgba(26, 23, 20, 0.13),
      0 0 0 1px rgba(20, 184, 166, 0.16);
    border-color: rgba(20, 184, 166, 0.28);
  }

  .accordion-item--premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.24);
  }
}

.solution-card--premium,
.solution-card--on-dark {
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease;
}

@media (hover: hover) and (pointer: fine) {
  .solution-card--premium:hover {
    transform: translateY(-5px) scale(1.006);
    box-shadow: 0 28px 68px rgba(26, 23, 20, 0.15);
  }

  .solution-card--on-dark:hover {
    transform: translateY(-5px) scale(1.006);
    box-shadow: 0 36px 88px rgba(0, 0, 0, 0.38);
    border-color: rgba(20, 184, 166, 0.38);
  }
}

/* =====================================================================
   PHASE 1 — DESIGN POLISH (added pass; no copy changes)
   ===================================================================== */

/* Image safety: prevent any stray <img> from distorting layout */
img,
picture,
svg,
video {
  max-width: 100%;
}

/* Custom scrollbar for horizontally-scrolling pricing table — premium feel */
.pricing-compare-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}

.pricing-compare-wrap::-webkit-scrollbar {
  height: 8px;
}

.pricing-compare-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.pricing-compare-wrap::-webkit-scrollbar-thumb {
  background: rgba(20, 184, 166, 0.45);
  border-radius: 999px;
}

.pricing-compare-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Mobile parity for generic .cta-actions — match service-detail treatment */
@media (max-width: 599px) {
  .cta-band-inner .cta-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band-inner .cta-actions .btn {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    justify-content: center;
  }
}

/* Section-head: ensure consistent vertical rhythm above grids on every page */
.section-head + .pricing-grid,
.section-head + .pricing-compare-wrap,
.section-head + .pricing-addons-grid {
  margin-top: 0.25rem;
}

/* Ensure overflow-x:auto wrappers can be scrolled with keyboard (a11y) */
.pricing-compare-wrap:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Smoother form input focus across the site */
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-12);
}

/* Tablet-portrait safety: cards in 3-up grids should not get squashed below their content */
@media (min-width: 720px) and (max-width: 899px) {
  .card-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Larger tap targets on mobile for inline text links inside body copy */
@media (max-width: 599px) {
  main a:not(.btn):not(.text-link):not(.nav-list a):not(.footer-links a):not(.footer-contact a) {
    word-break: break-word;
  }
}

/* Heading balance — modern browsers will balance multi-line headings nicely */
h1,
h2,
.section-title,
.page-title,
.hero-title,
.page-hero-full__title {
  text-wrap: balance;
}

/* `text-wrap: pretty` was triggering a Chrome rendering bug that shifted
   bold inline children (`.text-link`) onto a slightly lower baseline than
   the surrounding 400-weight body copy. Removed across body-text rules. */

/* Inline body text links — color-only, no underline. */
.article-body.prose a,
.prose-legal a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-body.prose a,
.prose-legal a {
  color: var(--color-accent-hover);
  font-weight: 600;
}

.article-body.prose a:hover,
.prose-legal a:hover {
  color: var(--color-primary);
}

/* Better selection color */
::selection {
  background: var(--color-accent-32);
  color: var(--color-primary);
}

/* Unified card border-radius for the largest premium cards */
.solution-card--premium,
.solution-card--on-dark,
.contact-card {
  border-radius: var(--radius-lg);
}

/* Tighten footer link list rhythm on small screens */
@media (max-width: 599px) {
  .footer-links li,
  .footer-contact li {
    margin-bottom: 0.55rem;
  }

  .footer-grid {
    gap: 1.75rem;
  }
}

/* Tablet refinement — tighten pricing card padding on narrow viewports for parity */
@media (min-width: 600px) and (max-width: 899px) {
  .pricing-card {
    padding: 1.5rem 1.4rem;
  }
}

/* Reduce motion polish — disable shine sweep + hover lifts wherever still active */
@media (prefers-reduced-motion: reduce) {
  .btn::after {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Brand strip footnote — small print under wordmarks */
.home-brands-note {
  margin: 1.25rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  opacity: 0.85;
}
/* =====================================================================
   END PHASE 1
   ===================================================================== */


/* =====================================================================
   PHASE 3 — UI/UX FIXES + REGIONAL TARGETING
   ===================================================================== */

/* ---------- Loader: bulletproof centering ---------- */
/* Override the asymmetric safe-area padding on .site-loader from earlier rules
   — that padding made the centered content appear off-center on devices
   with a notch (top safe-area >> bottom safe-area). */
.site-loader {
  padding: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-loader-inner {
  padding: 0;
  width: min(320px, 88vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}

.site-loader-logo {
  margin: 0 auto;
  max-width: 100%;
  width: clamp(140px, 38vw, 220px);
  display: block;
}

.site-loader-tagline {
  margin: 0;
}

/* ---------- Footer typography: normal weight (was 500) ---------- */
.footer-links a,
.footer-contact a,
.footer-contact-text {
  font-weight: 400;
  letter-spacing: 0.005em;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--color-accent);
}

.footer-heading {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.footer-tagline {
  font-weight: 400;
}

/* ---------- Hero: full viewport on every device ---------- */
/* Hardened so the hero is always at least the visible viewport height,
   never crops content, and respects iOS notch + dynamic browser chrome. */
.page-hero-full--home {
  --hero-min-h: 100vh;
}

@supports (height: 100svh) {
  .page-hero-full--home {
    --hero-min-h: 100svh;
  }
}

@supports (height: 100dvh) {
  .page-hero-full--home {
    --hero-min-h: 100dvh;
  }
}

main#main-content .page-hero-full.page-hero-full--home {
  min-height: var(--hero-min-h);
}

.page-hero-full.page-hero-full--home .page-hero-full__inner {
  min-height: var(--hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: max(calc(var(--header-stack) + 1rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Landscape phone — squat viewport, scale title down so nothing crops */
@media (max-height: 480px) and (orientation: landscape) {
  .page-hero-full.page-hero-full--home .page-hero-full__title {
    font-size: clamp(1.45rem, 3.4vw, 2.1rem);
  }

  .page-hero-full.page-hero-full--home .page-hero-full__intro {
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
  }
}

/* ---------- Ask Fox Logic launcher (mobile UX upgrade) ---------- */
/* Premium glass + accent border, safe-area respect, larger mobile tap target,
   never overlaps content (z-index + bottom anchored). */
.fox-bot-launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  border: 1px solid rgba(20, 184, 166, 0.32);
  border-radius: 999px;
  padding: 0.75rem 1.2rem;
  min-height: 48px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(20, 23, 20, 0.92), rgba(47, 42, 38, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  box-shadow:
    0 14px 38px rgba(26, 23, 20, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 4px rgba(20, 184, 166, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  animation: foxlogic-fox-pulse 4s ease-in-out infinite 1.5s;
}

@keyframes foxlogic-fox-pulse {
  0%, 100% {
    box-shadow:
      0 14px 38px rgba(26, 23, 20, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 4px rgba(20, 184, 166, 0.08);
  }
  50% {
    box-shadow:
      0 16px 44px rgba(26, 23, 20, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 0 8px rgba(20, 184, 166, 0.18);
  }
}

.fox-bot-launcher:hover,
.fox-bot-launcher:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow:
    0 22px 56px rgba(26, 23, 20, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 8px rgba(20, 184, 166, 0.18);
}

.fox-bot-launcher:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.fox-bot-launcher-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}

/* On phones: keep label visible, but tighten footprint so it never blocks
   important content; align-bottom matches the bottom-anchored .scroll-top
   and .contact-float-trigger so the three buttons don't fight. */
@media (max-width: 600px) {
  .fox-bot-launcher {
    right: max(0.85rem, env(safe-area-inset-right, 0px));
    bottom: max(0.95rem, env(safe-area-inset-bottom, 0px));
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
  }

  .fox-bot-launcher-inner {
    font-size: 0.875rem;
  }

  /* Push scroll-top up so it doesn't sit directly on top of the launcher */
  .scroll-top {
    bottom: calc(max(0.95rem, env(safe-area-inset-bottom, 0px)) + 60px);
  }
}

/* On very small phones (< 380px), become icon-only to free screen space */
@media (max-width: 380px) {
  .fox-bot-launcher-inner .fox-bot-launcher-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .fox-bot-launcher {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .fox-bot-launcher-inner {
    gap: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fox-bot-launcher {
    animation: none;
  }
}

/* ---------- Problem → Solution → Result section ---------- */
.psr-section {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background:
    radial-gradient(900px 480px at 12% 0%, rgba(20, 184, 166, 0.07), transparent 55%),
    radial-gradient(800px 420px at 88% 100%, rgba(26, 23, 20, 0.04), transparent 55%),
    linear-gradient(180deg, var(--color-bg) 0%, #f3faf8 100%);
}

.psr-section .section-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.psr-grid {
  --psr-gap: clamp(1.25rem, 3vw, 1.75rem);
  position: relative;
  display: grid;
  gap: var(--psr-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .psr-grid {
    --psr-gap: clamp(1.5rem, 2.5vw, 2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.psr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.07);
  box-shadow: 0 18px 44px rgba(26, 23, 20, 0.07);
  overflow: hidden;
  isolation: isolate;
}

.psr-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--psr-accent, var(--color-accent));
  z-index: 1;
}

.psr-card--problem {
  --psr-accent: linear-gradient(90deg, #d1574f, #e89479);
}

.psr-card--solution {
  --psr-accent: linear-gradient(90deg, var(--color-accent), #5eead4);
}

.psr-card--result {
  --psr-accent: linear-gradient(90deg, #f59e0b, var(--color-accent));
}

.psr-step {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(26, 23, 20, 0.04);
  color: var(--color-text-muted);
  align-self: flex-start;
}

.psr-card--problem .psr-step {
  background: rgba(209, 87, 79, 0.08);
  color: #b34a42;
}

.psr-card--solution .psr-step {
  background: rgba(20, 184, 166, 0.08);
  color: var(--color-accent-hover);
}

.psr-card--result .psr-step {
  background: rgba(245, 158, 11, 0.08);
  color: #b76800;
}

.psr-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
}

.psr-card--problem .psr-icon {
  background: rgba(209, 87, 79, 0.1);
  color: #c2554c;
}

.psr-card--result .psr-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #d18704;
}

.psr-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.32rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.psr-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.psr-list {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.psr-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.psr-list-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.5rem;
  background: var(--color-accent);
}

.psr-card--problem .psr-list-dot {
  background: #d1574f;
}

.psr-card--result .psr-list-dot {
  background: #f59e0b;
}

/* Connector chevrons between cards on desktop. Centered exactly within
   each grid gap (not the percentage of the whole grid, which would land
   on top of the next card because the gap eats horizontal space). */
@media (min-width: 900px) {
  .psr-grid::before,
  .psr-grid::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid rgba(20, 184, 166, 0.55);
    border-right: 2px solid rgba(20, 184, 166, 0.55);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    opacity: 0.85;
  }

  /* Column width = (100% - 2*gap) / 3.
     Gap-1 center sits at: 1*colW + gap/2.
     Gap-2 center sits at: 2*colW + gap + gap/2. */
  .psr-grid::before {
    left: calc((100% - 2 * var(--psr-gap)) / 3 + var(--psr-gap) / 2 - 7px);
  }

  .psr-grid::after {
    left: calc(2 * (100% - 2 * var(--psr-gap)) / 3 + 1.5 * var(--psr-gap) - 7px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .psr-card {
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.34s ease, border-color 0.34s ease;
  }

  .psr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(26, 23, 20, 0.12);
    border-color: rgba(20, 184, 166, 0.18);
  }
}

/* AI visibility section: refreshed structured layout */
.ai-vis-section {
  position: relative;
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(20, 184, 166, 0.18), transparent 52%),
    radial-gradient(820px 420px at 88% 92%, rgba(13, 148, 136, 0.1), transparent 50%),
    linear-gradient(180deg, #141210 0%, #1a2422 50%, #121110 100%);
  color: rgba(255, 255, 255, 0.92);
  padding: clamp(3.75rem, 8vw, 6.5rem) 0;
}

.ai-vis-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 720px) {
  .ai-vis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ai-vis-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ai-vis-card {
  position: relative;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}

.ai-vis-card:hover {
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}

.ai-vis-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.16);
  color: #5eead4;
  font-weight: 700;
  font-family: var(--font-display);
}

.ai-vis-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.3;
}

.ai-vis-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ai-vis-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  align-items: center;
  justify-content: center;
}

/* Regional-trust ribbon under hero */
.region-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
}

.region-trust-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
}

/* Footer secondary heading (Regions sub-section) */
.footer-heading--secondary {
  margin-top: 1.4rem;
}

/* =====================================================================
   END PHASE 3
   ===================================================================== */


/* =====================================================================
   PHASE 5 — BLOG UI: category nav, author bio, newsletter
   ===================================================================== */

/* Category bar (chips above the post grid) */
.blog-cat-bar {
  padding-top: 1rem;
  padding-bottom: 0;
}

.blog-cat-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

.blog-cat-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.blog-cat-bar__chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.blog-cat-bar__chip.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.blog-cat-bar__count {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
}

.blog-cat-bar__chip.is-active .blog-cat-bar__count {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}

.blog-empty {
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-muted);
  padding: 2rem 1rem;
}

/* Author bio block — bottom of single posts */
.author-bio {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.author-bio__inner {
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.author-bio__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #2f2a26);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(26, 23, 20, 0.18), inset 0 0 0 2px rgba(20, 184, 166, 0.45);
}

.author-bio__avatar-mark {
  display: inline-block;
}

.author-bio__body {
  flex: 1;
  min-width: 0;
}

.author-bio__eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.author-bio__name {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.25;
}

.author-bio__text {
  margin: 0 0 0.85rem;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.65;
}

.author-bio__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
}

@media (max-width: 599px) {
  .author-bio__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-bio__avatar {
    width: 56px;
    height: 56px;
    font-size: 0.95rem;
  }
}

/* Newsletter capture */
.newsletter-section {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.newsletter {
  text-align: center;
}

.newsletter .section-title {
  margin-inline: auto;
  max-width: 22ch;
}

.newsletter .section-lead {
  margin-inline: auto;
  max-width: 56ch;
}

.newsletter__form {
  margin: 1.5rem auto 0;
  max-width: 540px;
}

.newsletter__row {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.newsletter__input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 23, 20, 0.18);
  font: inherit;
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-12);
}

.newsletter__button {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 140px;
}

@media (max-width: 480px) {
  .newsletter__button {
    width: 100%;
  }
}

.newsletter__small {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.newsletter__alert {
  text-align: left;
  margin: 0.5rem auto 1rem;
  max-width: 540px;
}

/* =====================================================================
   END PHASE 5
   ===================================================================== */


/* =====================================================================
   PHASE 6 — Services hub polish + Blog featured/grid + Hero symmetry
   ===================================================================== */

/* ---------- Blog: category bar (refined) ---------- */
.blog-cat-bar {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  background: linear-gradient(180deg, transparent, rgba(20, 184, 166, 0.04));
}

.blog-cat-bar__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .blog-cat-bar__list {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-inline: clamp(1rem, 4vw, 1.5rem);
    margin-inline: calc(-1 * clamp(1rem, 4vw, 1.5rem));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-cat-bar__list::-webkit-scrollbar {
    display: none;
  }
  .blog-cat-bar__list > li {
    flex: 0 0 auto;
  }
}

/* ---------- Blog: featured post ---------- */
.blog-featured-section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.blog-featured__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.blog-featured__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
  animation: blog-feat-pulse 2.4s ease-in-out infinite;
}

@keyframes blog-feat-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16); }
  50% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.04); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-featured__eyebrow-dot { animation: none; }
}

.blog-featured {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 14px 44px rgba(26, 23, 20, 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .blog-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(26, 23, 20, 0.14);
    border-color: rgba(20, 184, 166, 0.28);
  }

  .blog-featured:hover .blog-featured__media img {
    transform: scale(1.04);
  }

  .blog-featured:hover .blog-featured__cta svg {
    transform: translateX(4px);
  }
}

.blog-featured__link {
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 900px) {
  .blog-featured__link {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
}

.blog-featured__media {
  position: relative;
  overflow: hidden;
  /* Match the cover artwork aspect (1200×630, OG standard) on every viewport
     so the SVG headline, issue badge, glyph, and wordmark strapline are all
     visible without cropping the left edge. */
  aspect-ratio: 120 / 63;
  background: var(--color-bg-muted);
}

/* Blog page closing CTA — centered. */
.blog-bottom-cta {
  text-align: center;
}

.blog-bottom-cta .section-title {
  margin-left: auto;
  margin-right: auto;
}

.blog-bottom-cta p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.blog-featured__category {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-featured__sep {
  opacity: 0.5;
}

.blog-featured__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}

.blog-featured__excerpt {
  margin: 0;
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-accent-hover);
}

.blog-featured__cta svg {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Blog: refined card grid ---------- */
.blog-grid-section {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.blog-grid-section__head {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.blog-grid-section__heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}

.blog-grid-section__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.blog-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.blog-card-v2 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.07);
  box-shadow: 0 4px 14px rgba(26, 23, 20, 0.04);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease, border-color 0.42s ease;
}

@media (hover: hover) and (pointer: fine) {
  .blog-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(26, 23, 20, 0.12);
    border-color: rgba(20, 184, 166, 0.28);
  }

  .blog-card-v2:hover .blog-card-v2__media img {
    transform: scale(1.06);
  }

  .blog-card-v2:hover .blog-card-v2__cta svg {
    transform: translateX(3px);
  }
}

.blog-card-v2__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card-v2__media {
  position: relative;
  overflow: hidden;
  /* Match the cover artwork aspect (1200×630) so headline + wordmark display fully */
  aspect-ratio: 120 / 63;
  background: var(--color-bg-muted);
}

.blog-card-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card-v2__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(20, 23, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #5eead4;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card-v2__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.35rem 1.4rem 1.5rem;
}

.blog-card-v2__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.blog-card-v2__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--color-primary);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-v2__excerpt {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-v2__cta {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-accent-hover);
}

.blog-card-v2__cta svg {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero symmetry — small refinements on top of style.css token ---------- */
.regional-hero .page-hero-full__title,
main#main-content .page-hero-full .page-hero-full__title {
  margin-bottom: 1.25rem;
}

main#main-content .page-hero-full .page-hero-full__intro {
  margin-bottom: 1.85rem;
}

/* Eyebrow gets a bit more breathing room above the title in the larger hero */
main#main-content .page-hero-full .eyebrow {
  margin-bottom: 1rem;
}

/* Region trust pills — used on home + regional + about hero contexts */
.region-trust {
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  font-size: 0.74rem;
}

@media (max-width: 600px) {
  .region-trust {
    gap: 0.4rem 0.65rem;
  }
}

/* =====================================================================
   END PHASE 6
   ===================================================================== */


/* =====================================================================
   PHASE 7 — Premium blog post (single view): TOC, drop cap, callouts,
   refined typography, share bar, related grid
   ===================================================================== */

/* ---------- Article shell (replaces old container narrow body) ---------- */
.article-single--premium {
  --article-content-max: 68ch;
}

.article-shell {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

/* ---------- Meta bar (chip + date + reading time + author + share) ---------- */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(26, 23, 20, 0.08);
}

.article-meta-bar__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.article-meta-bar__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-hover);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-meta-bar__sep {
  opacity: 0.5;
}

.article-meta-bar__author {
  font-weight: 600;
  color: var(--color-primary);
}

.article-meta-bar__share {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.article-meta-bar__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(26, 23, 20, 0.05);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.article-meta-bar__share-btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* ---------- Article grid: TOC sidebar + body ----------
   Blog detail uses the same standard container as the rest of the site
   (1320px max) so the article frame visually matches the hero above and
   the footer below. The TOC and body column then fill that container,
   with the body's content stretching across the full body column. */
.page-blog-detail .container.article-shell,
.page-blog-detail .article-related,
.page-blog-detail .article-footer.container,
.page-blog-detail .author-bio.container {
  width: var(--container);
}

.page-blog-detail,
.page-blog-detail .article-single--premium {
  /* Body content now fills the full body column (no inner cap) — with the
     wider 1320 container plus the 260px TOC, the body column lands
     around 1000px which reads cleanly with the TOC narrowing the eye-line. */
  --article-content-max: none;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1180px) {
  .article-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem);
  }
}

/* Cap the prose width inside the body column. With the new tighter
   container, the column itself is roughly the same width as this max,
   so the body fills its column with no leftover rails. min-width: 0
   prevents long inline content (URLs, code) from pushing the column
   wider than its grid track. */
.article-body--premium {
  max-width: var(--article-content-max, 80ch);
  min-width: 0;
}

/* ---------- Table of Contents ---------- */
.article-toc {
  position: relative;
}

@media (min-width: 1024px) {
  .article-toc {
    position: sticky;
    top: calc(var(--header-stack) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--header-stack) - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
}

.article-toc__heading {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid rgba(26, 23, 20, 0.08);
}

.article-toc__item {
  margin: 0;
}

.article-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.article-toc__link:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  background: rgba(20, 184, 166, 0.04);
}

.article-toc__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  opacity: 0.7;
}

.article-toc__text {
  flex: 1;
}

/* ---------- Premium prose ---------- */
.article-body--premium {
  max-width: var(--article-content-max);
}

.prose-premium {
  font-size: 1.075rem;
  line-height: 1.78;
  color: #2a2520;
  letter-spacing: 0.005em;
}

.prose-premium > p {
  margin: 0 0 1.35rem;
}

/* Lead paragraph: first paragraph after the meta bar gets larger, tighter, brand-toned */
.prose-premium > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 1.85rem;
}

/* Drop cap on the lead paragraph */
.prose-premium > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 0.9;
  float: left;
  margin: 0.3rem 0.65rem 0 0;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

@media (max-width: 599px) {
  .prose-premium > p:first-of-type {
    font-size: 1.1rem;
  }
  .prose-premium > p:first-of-type::first-letter {
    font-size: 2.8rem;
  }
}

/* H2 */
.prose-premium > h2 {
  scroll-margin-top: calc(var(--header-stack) + 12px);
  margin: 2.6rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--color-primary);
  text-wrap: balance;
}

/* Decorative accent rule above each H2 */
.prose-premium > h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin: 0 0 0.85rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), #5eead4);
}

/* H3 */
.prose-premium > h3 {
  margin: 1.85rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

/* Lists */
.prose-premium ul,
.prose-premium ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.prose-premium ul {
  list-style: none;
  padding-left: 0;
}

.prose-premium ul > li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.65rem;
  line-height: 1.7;
}

.prose-premium ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.66em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

.prose-premium ol {
  counter-reset: prose-ol;
  list-style: none;
  padding-left: 0;
}

.prose-premium ol > li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.7rem;
  line-height: 1.7;
  counter-increment: prose-ol;
}

.prose-premium ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: rgba(20, 184, 166, 0.1);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  line-height: 1;
}

/* Strong & emphasis */
.prose-premium strong {
  color: var(--color-primary);
  font-weight: 700;
}

.prose-premium em {
  color: var(--color-primary);
  font-style: italic;
}

/* Inline code */
.prose-premium code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: rgba(20, 184, 166, 0.08);
  color: var(--color-accent-hover);
  border: 1px solid rgba(20, 184, 166, 0.16);
}

/* Inline links */
.prose-premium a {
  color: var(--color-accent-hover);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 600;
}

.prose-premium a:hover {
  color: var(--color-primary);
}

/* Blockquote */
.prose-premium blockquote {
  margin: 2rem 0;
  padding: 1.35rem 1.5rem 1.35rem 1.65rem;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.02));
  font-size: 1.1rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-primary);
}

.prose-premium blockquote p {
  margin: 0;
}

.prose-premium blockquote cite {
  display: block;
  margin-top: 0.65rem;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.prose-premium blockquote cite::before {
  content: "— ";
  opacity: 0.6;
}

/* Figure & caption */
.prose-premium figure {
  margin: 2rem 0;
}

.prose-premium figure img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.prose-premium figcaption {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Horizontal rule */
.prose-premium hr {
  margin: 2.5rem auto;
  width: 60px;
  border: 0;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.5;
}

/* Definition lists — generic */
.prose-premium dl {
  margin: 1.5rem 0;
}

.prose-premium dt {
  margin: 1.1rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-primary);
}

.prose-premium dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* ============================================================
   UNIFIED ACCORDION DESIGN
   Applies to both:
     • .accordion-item--premium (homepage FAQ section)
     • .prose-premium .prose-faq__item (in-post Q/A on blog detail)

   Both share: brand-tinted border, soft brand background when collapsed,
   white + shadow + lift on hover, white + shadow when [open], a Q/A
   badge on summary/answer, and a + → × chevron on the right.

   Markup differences are handled below:
     • prose-faq has explicit <span class="prose-faq__badge"> and
       <span class="prose-faq__chevron"> children.
     • accordion-item--premium uses the bare <summary>question</summary>
       <p>answer</p> markup, so we synthesize the badge and chevron via
       ::before / ::after pseudo-elements.
   ============================================================ */

.prose-premium .prose-faq--accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
}

/* Container */
.accordion-item--premium,
.prose-premium .prose-faq__item {
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.04);
  margin-bottom: 0.75rem;
  padding: 0;
  box-shadow: none;
  transition: border-color 0.24s ease, background 0.24s ease,
    box-shadow 0.24s ease, transform 0.24s ease;
}

.accordion-item--premium:last-child,
.prose-premium .prose-faq__item:last-child {
  margin-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .accordion-item--premium:hover,
  .prose-premium .prose-faq__item:hover {
    border-color: rgba(20, 184, 166, 0.4);
    background: var(--color-white);
    box-shadow: 0 14px 34px rgba(26, 23, 20, 0.08);
    transform: translateY(-2px);
  }
}

.accordion-item--premium[open],
.prose-premium .prose-faq__item[open] {
  border-color: rgba(20, 184, 166, 0.4);
  background: var(--color-white);
  box-shadow: 0 6px 22px rgba(26, 23, 20, 0.06);
}

/* Summary (question row) */
.accordion-item--premium > summary,
.prose-premium .prose-faq__q {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}

.accordion-item--premium > summary::-webkit-details-marker,
.prose-premium .prose-faq__q::-webkit-details-marker {
  display: none;
}

.accordion-item--premium > summary::marker,
.prose-premium .prose-faq__q::marker {
  content: "";
}

/* Q badge — explicit span on prose-faq, synthetic ::before on
   accordion-item--premium (placed at the start via flex order). */
.prose-premium .prose-faq__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.prose-premium .prose-faq__badge--q {
  color: var(--color-accent);
  background: rgba(20, 184, 166, 0.16);
}

.prose-premium .prose-faq__badge--a {
  color: var(--color-accent-hover);
  background: rgba(94, 234, 212, 0.22);
}

.accordion-item--premium > summary::before {
  content: "Q";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-accent);
  background: rgba(20, 184, 166, 0.16);
  letter-spacing: 0;
}

.prose-premium .prose-faq__q-text {
  flex: 1;
  min-width: 0;
}

/* Chevron (+ → ×) — identical visual across both accordions. Sits inline
   at the end of the flex row via `margin-left: auto`, vertically aligned
   with the first line of the question via `margin-top` (NOT absolutely
   positioned, so it tracks the question text correctly even on multi-line
   summaries). On [open] the whole pseudo rotates 45° turning + into ×.

   The blog detail uses an explicit `<span class="prose-faq__chevron">`
   while the homepage uses a synthesized `summary::after`. Both render
   identical visuals. */
.prose-premium .prose-faq__chevron,
.accordion-item--premium > summary::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 0.4rem;
  align-self: flex-start;
  width: 0.9rem;
  height: 0.9rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--color-accent-hover);
  transition: transform 0.25s ease;
}

.prose-premium .prose-faq__item[open] .prose-faq__chevron,
.accordion-item--premium[open] > summary::after {
  transform: rotate(45deg);
}

/* Answer row */
.prose-premium .prose-faq__item:not([open]) .prose-faq__a {
  display: none;
}

.prose-premium .prose-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0 1.1rem 1.1rem 1.1rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-text);
}

.prose-premium .prose-faq__a-text {
  flex: 1;
  min-width: 0;
}

/* Homepage accordion <p> — synthesize the A badge via ::before, padding
   matches the prose-faq layout. */
.accordion-item--premium > p {
  position: relative;
  margin: 0;
  padding: 0 1.1rem 1.1rem 3.5rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-text);
}

.accordion-item--premium > p::before {
  content: "A";
  position: absolute;
  left: 1.1rem;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-accent-hover);
  background: rgba(94, 234, 212, 0.22);
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item--premium,
  .prose-premium .prose-faq__item,
  .accordion-item--premium > summary::after,
  .prose-premium .prose-faq__chevron::after {
    transition: none;
  }
  .accordion-item--premium:hover,
  .prose-premium .prose-faq__item:hover {
    transform: none;
  }
}

/* Tables */
.prose-premium table {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26, 23, 20, 0.08);
}

.prose-premium thead th {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.04));
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}

.prose-premium tbody td,
.prose-premium tbody th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-top: 1px solid rgba(26, 23, 20, 0.06);
  vertical-align: top;
}

.prose-premium tbody tr:nth-child(even) td,
.prose-premium tbody tr:nth-child(even) th {
  background: rgba(26, 23, 20, 0.015);
}

/* Pull-quote / aside callout (uses .prose-premium .callout class if added) */
.prose-premium .callout,
.prose-premium aside.callout {
  display: block;
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(94, 234, 212, 0.04));
  border: 1px solid rgba(20, 184, 166, 0.18);
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1.65;
}

.prose-premium .callout::before {
  content: "💡";
  display: inline-block;
  margin-right: 0.5rem;
}

/* Ensure last element doesn't add bottom margin */
.prose-premium > *:last-child {
  margin-bottom: 0;
}

/* ---------- Article: related insights ---------- */
.article-related {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(0.5rem, 2vw, 1.5rem);
}

.article-related__head {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem);
  text-align: center;
}

.article-related__title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: -0.018em;
  color: var(--color-primary);
}

.article-related__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .article-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .article-related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Reading-progress bar at top of viewport ---------- */
.article-single--premium {
  --reading-progress: 0%;
}

@media (prefers-reduced-motion: no-preference) {
  .article-single--premium::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: var(--reading-progress);
    background: linear-gradient(90deg, var(--color-accent), #5eead4);
    z-index: 90;
    pointer-events: none;
    transition: width 0.05s linear;
  }
}

/* =====================================================================
   END PHASE 7
   ===================================================================== */


/* =====================================================================
   PHASE 8 — Services-overview (split layout) + Brand cover overlay
   ===================================================================== */

.services-overview {
  background:
    radial-gradient(900px 480px at 8% 10%, rgba(20, 184, 166, 0.07), transparent 55%),
    radial-gradient(700px 380px at 100% 100%, rgba(26, 23, 20, 0.04), transparent 55%),
    linear-gradient(180deg, var(--color-bg) 0%, #f3faf8 100%);
}

.services-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .services-overview__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.25rem, 4vw, 3.5rem);
  }
}

.services-overview__intro .section-title {
  margin: 0.35rem 0 1rem;
  text-wrap: balance;
}

.services-overview__intro .section-lead {
  margin: 0 0 1.5rem;
  max-width: 42ch;
}

.services-overview__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.services-overview__categories {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.services-overview__cat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid rgba(26, 23, 20, 0.08);
  box-shadow: 0 4px 14px rgba(26, 23, 20, 0.04);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.services-overview__cat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-accent), #5eead4);
  transform: scaleY(0.3);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .services-overview__cat:hover {
    transform: translateX(4px);
    box-shadow: 0 18px 44px rgba(26, 23, 20, 0.1);
    border-color: rgba(20, 184, 166, 0.28);
  }
  .services-overview__cat:hover::before {
    transform: scaleY(1);
  }
  .services-overview__cat:hover .services-overview__cat-icon {
    transform: rotate(-6deg) scale(1.05);
    background: rgba(20, 184, 166, 0.18);
  }
}

.services-overview__cat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.services-overview__cat-icon .fl-icon {
  width: 24px;
  height: 24px;
}

.services-overview__cat-body {
  flex: 1;
  min-width: 0;
}

.services-overview__cat-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.018em;
  color: var(--color-primary);
  line-height: 1.3;
}

.services-overview__cat-desc {
  margin: 0 0 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.services-overview__cat-tags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.services-overview__cat-tags a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.08);
  color: var(--color-accent-hover);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.services-overview__cat-tags a:hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-1px);
}

@media (max-width: 599px) {
  .services-overview__cat {
    flex-direction: column;
    gap: 0.65rem;
  }
}

/* =====================================================================
   END PHASE 8
   ===================================================================== */


/* =====================================================================
   PHASE 9 — Form runtime validation: inline errors, AJAX state, loader
   ===================================================================== */

/* Inline error message under each invalid field */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #b54034;
  font-weight: 500;
}

.form-error::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: #b54034;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M7 4v3M7 9.5v.01' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Field error state (red border + soft tint) */
.form-row.is-error input,
.form-row.is-error select,
.form-row.is-error textarea,
.newsletter__row.is-error .newsletter__input {
  border-color: #d1574f !important;
  background: rgba(209, 87, 79, 0.04);
  box-shadow: 0 0 0 3px rgba(209, 87, 79, 0.08);
}

.form-row.is-error label {
  color: #b54034;
}

.form-row.is-error input:focus,
.form-row.is-error select:focus,
.form-row.is-error textarea:focus,
.newsletter__row.is-error .newsletter__input:focus {
  outline-color: #d1574f;
  box-shadow: 0 0 0 3px rgba(209, 87, 79, 0.18);
}

/* Top-of-form alert (rendered by forms.js) */
.form-alert {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 500;
  border: 1px solid;
  animation: fl-alert-in 0.28s ease-out both;
}

@keyframes fl-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-alert.alert-success {
  background: #e8f7ee;
  color: #1e5c36;
  border-color: #b8e2c8;
}

.form-alert.alert-error {
  background: #fdecec;
  color: #8c1c1c;
  border-color: #f0b4b4;
}

.form-alert.alert-warning {
  background: #fff6e8;
  color: #7a4a12;
  border-color: #f5d39f;
}

/* Submit button busy state */
.btn.is-busy {
  cursor: progress;
  opacity: 0.92;
  pointer-events: none;
}

.btn.is-busy::after {
  display: none; /* shine sweep is distracting during submit */
}

/* ---------- Form overlay (full-form during submission) ---------- */
.form-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.24s ease;
  border-radius: inherit;
}

.form-overlay.is-visible {
  opacity: 1;
}

.form-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem 2rem;
  border-radius: 14px;
  background: var(--color-white);
  box-shadow:
    0 18px 48px rgba(26, 23, 20, 0.16),
    0 0 0 1px rgba(20, 184, 166, 0.18);
  text-align: center;
  min-width: 200px;
  transform: scale(0.96);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-overlay.is-visible .form-overlay__inner {
  transform: scale(1);
}

.form-overlay__spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(20, 184, 166, 0.18);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: foxlogic-form-overlay-spin 0.7s linear infinite;
}

@keyframes foxlogic-form-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}

.form-overlay__label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .form-overlay,
  .form-overlay__inner {
    transition: none;
  }
  .form-overlay__spinner {
    animation: none;
    border-top-color: var(--color-accent);
  }
}

/* Forms used inside dark sections (e.g. newsletter on mesh background) need dark-context overlay */
.section--dark .form-overlay,
.section--mesh .form-overlay {
  background: rgba(15, 14, 12, 0.55);
}

.section--dark .form-overlay__inner,
.section--mesh .form-overlay__inner {
  background: rgba(255, 255, 255, 0.98);
}

/* Newsletter row tweak for error visibility */
.newsletter__row.is-error {
  position: relative;
}

.newsletter__row.is-error + .newsletter__small {
  display: none;
}

/* When the row contains the error message, drop the inline padding-bottom that
   the row's flex normally controls so the error sits cleanly */
.newsletter__row .form-error {
  flex-basis: 100%;
}

/* =====================================================================
   END PHASE 9
   ===================================================================== */