/**
 * Patentia Premium CSS Layer
 * Enhancements on top of Webflow design system
 */

/* Page wrapper: remove Webflow overflow:clip so sticky sections work */
.page-wrapper {
  overflow: visible !important;
}

/* Font smoothing */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
#cookie-consent {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 3rem);
  max-width: 36rem;
  opacity: 1;
  transition: opacity 0.3s, transform 0.3s;
}

#cookie-consent.consent--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
}

.consent-inner {
  background: #fff;
  border: 1px solid #d7d3ce;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.consent-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.consent-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.consent-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
}

.consent-btn--accept {
  background: #222;
  color: #fff;
}

.consent-btn--accept:hover {
  background: #444;
}

.consent-btn--decline {
  background: transparent;
  color: #888;
  border: 1px solid #d7d3ce;
}

.consent-btn--decline:hover {
  background: #f7f5f1;
  color: #555;
}

@media (max-width: 479px) {
  .consent-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem;
  }
}

/* ============================================
   LENIS SMOOTH SCROLL
   ============================================ */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Hidden scrollbars (Lenis controls scroll) */
html,
body {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Timeline scroll-driven animation */
.timeline-scroll-container {
  position: relative;
  height: 300vh;
}

.timeline-sticky-inner {
  position: sticky;
  top: 0;
  width: 100%;
}

/* Timeline descriptions: JS controls opacity via initTimeline() */

/* ============================================
   DESIGN HARMONY SYSTEM
   Major Third (1.250) type scale, 8px grid,
   weight hierarchy, tracking per tier
   Reference: KNOWLEDGE/TYPOGRAPHY_AND_SPACING_REFERENCE.md
   ============================================ */

/* --- Font Family Enforcement --- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6 {
  font-family: 'Host Grotesk', 'Inter', system-ui, sans-serif;
}

/* --- Type Scale (Major Third 1.250, base 16px) --- */
h1,
.heading-style-h1 {
  font-weight: 400;
  /* regular — elegant, light at large size */
  line-height: 1.10;
  letter-spacing: -0.025em;
}

h2,
.heading-style-h2 {
  font-weight: 400;
  /* regular — clean, minimal */
  line-height: 1.17;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3,
.heading-style-h3 {
  font-weight: 400;
  line-height: 1.20;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h4,
.heading-style-h4 {
  font-weight: 500;
  /* medium — needs slight emphasis at smaller size */
  line-height: 1.33;
  letter-spacing: -0.01em;
}

h5,
.heading-style-h5 {
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.005em;
}

h6,
.heading-style-h6 {
  font-weight: 500;
  line-height: 1.40;
  letter-spacing: 0;
}

/* --- Body Text --- */
body,
p,
.text-body {
  line-height: 1.625;
}

/* --- ALL-CAPS Labels --- */
.text-all-caps,
.text_title,
.text_title-copy3,
.text_title-2 {
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* --- Buttons --- */
.button,
.w-button {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- Spacing: snap to 8px grid --- */
.padding-section-small {
  padding-top: 3rem !important;
  /* 48px (was 52px) */
  padding-bottom: 3rem !important;
}

/* --- Fluid type scale (responsive) --- */
@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8127rem + 0.2081vw);
  }
}

@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.7495rem + 0.8368vw);
  }
}

/* ============================================
   LOGO MARQUEE
   ============================================ */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 2rem 0;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  animation: marquee-scroll 40s linear infinite;
  width: max-content;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-item img {
  height: 2rem;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.marquee-item img:hover {
  opacity: 1;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ============================================
   HERO FULL VIEWPORT
   ============================================ */
.section_hero {
  min-height: calc(100vh - 8.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.section_hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(235, 242, 19, 0.4) 0%, rgba(250, 248, 245, 0) 70%);
  z-index: -1;
  filter: blur(60px);
  opacity: 0.6;
  animation: pulse-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes pulse-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.4;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}

.hero_content {
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bottom CTA banner: left-aligned text and content */
.section_cta .hero_content {
  text-align: left !important;
  align-items: flex-start !important;
  margin: 0 !important;
}

.section_hero-about {
  min-height: calc(100vh - 8.75rem);
}

.section_hero-about>.padding-global {
  min-height: calc(100vh - 8.75rem);
  display: flex;
  align-items: center;
}

/* ============================================
   BORDER-RADIUS SYSTEM (formal/elegant)
   Harmony rule: outer_radius = inner_radius + gap
   L1: 16px (sections/hero)  L2: 8px (cards)  L3: 4px (inner/buttons)  Pill: 100px (badges)
   ============================================ */

/* L1 — Outer sections, hero, CTA (16px) */
.padding-global.padding-section-bottom,
.padding-global-logoribbon.padding-section-bottom,
.section_consulting,
.section_logos,
.section_howit,
.section_trust,
.section_stats,
.section_blog,
.section_blog-two,
.section_cta-banner,
.section_testimonials,
.section_testimonials-two,
.section_testimonials-three,
.footer,
.section_services-two,
.section_services-three,
.section_features,
.section_product-features,
.section_features-alt,
.section_group-about,
.section_team,
.section_timeline,
.section_comparison,
.section_contact,
.section_hero-cases,
.section_hero-stats,
.section_cases,
.section_hero-blog,
.section_expertise,
.section_features,
.section_product-features,
.features_wrap,
.section_hero,
.section_hero-two,
.section_hero-lg-image,
.section_hero-product,
.section_hero-about,
.section_cta,
.section_faq,
.section_included,
.section_more,
.section_custom {
  border-radius: 16px;
}

/* Navbar (12px — slightly smaller than sections) */
.padding-global.is-navbar,
.padding-global-logoribbon.is-navbar {
  border-radius: 12px;
}

/* L2 — Cards inside sections (8px) */
.consulting_card,
.consulting_card-copy,
.team_card,
.nav_dropdown-wrap,
.map_img,
.timeline_img,
.component_img,
.cell_img,
.join_image,
.box-contact,
.dash_item,
.spark-pricing-column-2 {
  border-radius: 8px;
}

/* L3 — Inner elements, images, buttons (4px) */
.expertise_img,
.testimonials_img,
.testimonials_logo,
.hero-two_img,
.portfolio_img,
.portfolio-three_card_img,
.hero-three_img,
.hero-three_img-copy,
.hero-about_img,
.team_card_img,
.service_card_img,
.service_card_img-copy,
.service_card_img-copy-copy,
.cases-card-img,
.article-img,
.article_img,
.hero-case_img,
.cases_row_img,
.map_img.height-100,
.service_img,
.img-copy,
.img-copy-copy,
.button,
.button.is-form-submit,
.tag-blog,
.w-input,
.w-select {
  border-radius: 4px;
}

/* ============================================
   FEATURES HORIZONTAL — FULL BLEED CARDS
   ============================================ */
.section_features {
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* height set by JS in initHorizontalScroll() */
}

.features_wrap {
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
  top: 1rem !important;
}

.features_wrap>.padding-global.height-100 {
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.features_horizontal {
  padding-left: 1.5vw;
}

/* ============================================
   ANIMATION HELPERS
   ============================================ */
[data-animate],
[data-animate-slow],
[data-animate-stagger]>* {
  will-change: opacity, transform;
}

/* ============================================
   NAVBAR ENHANCEMENT — HIDE DOWN / SHOW UP
   ============================================ */
.navbar_component {
  background: transparent !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s ease, background-color 0.3s ease;
  overflow: visible !important;
}

.navbar--scrolled {
  background-color: transparent !important;
}

.navbar--scrolled .padding-global.is-navbar {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(29, 29, 27, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar--hidden {
  transform: translateY(-100%);
}

/* ============================================
   CARD HOVER ENHANCEMENTS
   ============================================ */
.card-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
.button-fill-hover {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button-fill-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

.button-fill-hover:hover::before {
  transform: scaleX(1);
}

/* ============================================
   COMPARISON TABLE (custom component)
   ============================================ */
.ptnt-t {
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d7d3ce;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ptnt-t thead th {
  padding: 24px 32px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: left;
  border-bottom: 1px solid #d7d3ce;
  background: #fff;
  color: #1d1d1d;
}

.ptnt-t thead th:first-child,
.ptnt-t tbody td:first-child {
  display: none;
}

.ptnt-t thead th:nth-child(2),
.ptnt-t thead th:nth-child(3) {
  width: 50%;
}

.ptnt-t thead th:nth-child(2) {
  border-right: 1px solid #eeebe7;
}

.ptnt-t thead th:last-child {
  border-right: none;
}

.ptnt-t__hsup {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
}

.ptnt-t tbody td {
  padding: 24px 32px;
  vertical-align: top;
  border-bottom: 1px solid #f0eeeb;
  text-align: left;
}

.ptnt-t tbody tr:last-child td {
  border-bottom: none;
}

.ptnt-t tbody td:nth-child(2) {
  border-right: 1px solid #f0eeeb;
}

.ptnt-t tbody td:nth-child(3) {
  background: #fff;
}

.ptnt-t__old {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #666;
  line-height: 1.3;
}

.ptnt-t__new {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #1d1d1d;
  line-height: 1.3;
}

.ptnt-t__detail {
  font-size: 0.8rem;
  color: #999;
  margin-top: 6px;
  line-height: 1.5;
}

.ptnt-t__badge {
  display: inline-block;
  background: #ebf213;
  color: #1d1d1d;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .ptnt-t thead th {
    padding: 16px 20px;
    font-size: 1.05rem;
  }

  .ptnt-t tbody td {
    padding: 20px 20px;
  }

  .ptnt-t__old,
  .ptnt-t__new {
    font-size: 1.125rem;
  }

  .ptnt-t__badge {
    font-size: 0.48rem;
    padding: 2px 5px;
    margin-left: 4px;
  }

  .ptnt-t__detail {
    font-size: 0.7rem;
  }
}

/* ============================================
   PRODUCT CATALOG (homepage) - extends ptnt-pricing pattern
   ============================================ */
/* Wrapper clips both grids into one visual table */
.ptnt-catalog-wrap {
  border: 1px solid #d7d3ce;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #d7d3ce;
}

.ptnt-pricing.ptnt-pricing--5col {
  grid-template-columns: repeat(5, 1fr);
  border: none;
  border-radius: 0;
}

.ptnt-pricing.ptnt-pricing--2col {
  grid-template-columns: 1fr 1fr;
  border: none;
  border-radius: 0;
}

.ptnt-pricing__banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  padding: 2rem 2.5rem;
}

.ptnt-pricing__banner--dark {
  background: #4a4641;
}

.ptnt-pricing__banner-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ptnt-pricing__banner-title {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.ptnt-pricing__banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #535353;
  margin: 0;
  line-height: 1.5;
}

.ptnt-pricing__banner--dark .ptnt-pricing__banner-title {
  color: #fff;
}

.ptnt-pricing__banner--dark .ptnt-pricing__banner-desc {
  color: #a0a0a0;
}

@media (max-width: 991px) {
  .ptnt-pricing.ptnt-pricing--5col {
    grid-template-columns: repeat(3, 1fr);
  }

  .ptnt-pricing.ptnt-pricing--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ptnt-pricing.ptnt-pricing--5col {
    grid-template-columns: repeat(2, 1fr);
  }

  .ptnt-pricing__banner {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1rem;
  }
}

@media (max-width: 479px) {
  .ptnt-pricing.ptnt-pricing--5col {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MEGA DROPDOWN NAV
   ============================================ */
/* Hover to open */
.nav_dropdown:hover .nav_link-dropdown {
  display: block;
}

.navbar--hidden .nav_link-dropdown {
  display: none !important;
}

/* Center dropdowns to page center */
.nav_dropdown {
  position: static;
}

.nav_dropdown .nav_link-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  padding-top: 2.2rem;
}

.nav_dropdown-content--mega {
  grid-template-columns: 1fr 1fr 1fr;
  padding: 2.5rem 3rem;
  gap: 0;
  min-width: 44rem;
}

.nav_dropdown-content--company {
  grid-template-columns: 1fr 1fr;
  padding: 2.5rem 3rem;
  gap: 0;
  min-width: 30rem;
}

.nav_dropdown-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #999;
  margin-bottom: 1.25rem;
  padding-left: 0.75rem;
  padding-bottom: 0;
}

.w-dropdown-list {
  background: transparent !important;
}

.nav_dropdown-wrap {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(29, 29, 27, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.nav_dropdown-content {
  background: transparent !important;
}

.nav_dropdown-content--mega .nav_dropdown-column,
.nav_dropdown-content--company .nav_dropdown-column {
  padding-right: 2.5rem;
  gap: 0.25rem;
}

.nav_dropdown-content--mega .nav_dropdown-column+.nav_dropdown-column,
.nav_dropdown-content--company .nav_dropdown-column+.nav_dropdown-column {
  border-left: 1px solid #e8e5e0;
  padding-left: 2.5rem;
}

.nav_dropdown-content--mega .nav_dropdown-link,
.nav_dropdown-content--company .nav_dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  opacity: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.2s;
}

.nav_dropdown-content--mega .nav_dropdown-link:hover,
.nav_dropdown-content--company .nav_dropdown-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.nav_dropdown-link-title {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #222;
  line-height: 1.35;
}

.nav_dropdown-link-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #999;
  line-height: 1.45;
}

.nav_dropdown-link--soon {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.nav_dropdown-link--soon .nav_dropdown-link-desc {
  font-style: italic;
}

/* ============================================
   TEAM CARD HOVER OVERLAY
   ============================================ */
.team_card_img {
  position: relative;
  overflow: hidden;
}

.team_card_overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.team_card_img:hover .team_card_overlay {
  opacity: 1;
}

.team_card_overlay p {
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
  margin: 0 0 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
}

.team_card_img:hover .team_card_overlay p {
  opacity: 1;
  transform: translateY(0);
}

.team_card_socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.team_card_img:hover .team_card_socials {
  opacity: 1;
  transform: translateY(0);
}

.team_card_socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.team_card_socials a:hover {
  background: rgba(0, 0, 0, 0.06);
}

.team_card_socials svg {
  width: 18px;
  height: 18px;
  fill: #999;
  transition: fill 0.2s ease;
}

.team_card_socials a:hover svg {
  fill: #222;
}

@media (max-width: 767px) {
  .team_card_overlay {
    display: none;
  }
}

/* ============================================
   PRICING CARDS (Studio page)
   ============================================ */
.ptnt-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d7d3ce;
  border: 1px solid #d7d3ce;
  border-radius: 8px;
  overflow: hidden;
}

.ptnt-pricing__card {
  background: #fff;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
}

.ptnt-pricing__card--featured {
  background: #fafaf8;
}

.ptnt-pricing__head {
  margin-bottom: 1.5rem;
}

.ptnt-pricing__name {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.ptnt-pricing__price {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1d1d1d;
}

.ptnt-pricing__unit {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.25rem;
}

.ptnt-pricing__btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease;
  background: #ebf213;
  color: #1d1d1d;
  border: 1px solid #ebf213;
  margin-top: auto;
}

.ptnt-pricing__btn:hover {
  background: #d9e011;
  border-color: #d9e011;
}

.ptnt-pricing__btn--outline {
  background: transparent;
  color: #1d1d1d;
  border: 1px solid #c8c5c0;
}

.ptnt-pricing__btn--outline:hover {
  background: #f5f3f0;
  border-color: #aaa;
}

.ptnt-pricing__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  margin: 0 0 1.5rem;
}

.ptnt-pricing__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #999;
  margin-bottom: 0.75rem;
}

.ptnt-pricing__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ptnt-pricing__list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: #444;
  border-top: 1px solid #f0eeeb;
}

.ptnt-pricing__list li:first-child {
  border-top: none;
}

.ptnt-pricing__list {
  margin-bottom: 1.5rem;
}

.ptnt-pricing__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1d1d1d;
}

@media (max-width: 767px) {
  .ptnt-pricing {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   NAVBAR DROPDOWN CHEVRON — replace broken icon font with CSS triangle
   ============================================ */
.nav_link-icon.w-icon-dropdown-toggle {
  font-size: 0;
  /* hide the broken icon glyph */
  width: 10px;
  height: 10px;
  position: relative;
}

.nav_link-icon.w-icon-dropdown-toggle::before {
  content: '' !important;
  /* override webflow-icons glyph */
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 1px;
}

/* Skip navigation (a11y) */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: #222;
  color: #fff;
  font-size: 14px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-nav:focus {
  top: 0;
}

/* ============================================
   IMPACT PAGE — VERTICAL CARDS
   ============================================ */
.ptnt-vertical {
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 8px;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ptnt-vertical__name {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #1d1d1d;
  margin: 0;
}

.ptnt-vertical__pain {
  font-size: 0.875rem;
  color: #888;
  line-height: 1.6;
  margin: 0;
}

.ptnt-vertical__help {
  font-size: 0.9375rem;
  color: #444;
  line-height: 1.65;
  margin: 0;
}

.ptnt-vertical__proof {
  font-size: 0.8rem;
  font-weight: 500;
  color: #1d1d1d;
  margin: 0;
}

.ptnt-vertical__logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.ptnt-vertical__logos img {
  height: 1.5rem;
  width: auto;
  opacity: 0.45;
}

/* IMPACT — 87% STAT SECTION */
.ptnt-stat-hero {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}

.ptnt-stat-hero__number {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1d1d1d;
}

.ptnt-stat-hero__label {
  font-size: 1.125rem;
  color: #444;
  line-height: 1.6;
  margin-top: 1rem;
}

.ptnt-stat-hero__source {
  font-size: 0.75rem;
  color: #999;
  margin-top: 1.5rem;
}

.ptnt-stat-hero__close {
  font-size: 1rem;
  color: #222;
  font-weight: 500;
  margin-top: 2rem;
}

/* IMPACT — Enterprise CTA */
.ptnt-enterprise-cta {
  background: #4a4641;
  border-radius: 8px;
  padding: 4rem 3rem;
  text-align: center;
}

.ptnt-enterprise-cta .text_title {
  color: #999;
}

.ptnt-enterprise-cta h2 {
  color: #fff;
}

.ptnt-enterprise-cta p {
  color: #a0a0a0;
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.65;
}

.ptnt-enterprise-cta .button-group {
  justify-content: center;
}

.ptnt-enterprise-tags {
  justify-content: center;
}

.ptnt-enterprise-tags span {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  background: transparent !important;
}

@media (max-width: 767px) {
  .ptnt-enterprise-cta {
    padding: 3rem 1.5rem;
  }
}

/* IMPACT — Split rows (image + text alternating) */
.ptnt-impact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.ptnt-impact-row--reverse .ptnt-impact-row__image {
  order: 2;
}

.ptnt-impact-row--reverse .ptnt-impact-row__text {
  order: 1;
}

.ptnt-impact-row__image {
  border-radius: 12px;
  overflow: hidden;
  background: #e8e5e0;
}

.ptnt-impact-row__image img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ptnt-impact-row__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.ptnt-impact-row__text h3 {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #1d1d1d;
  margin: 0;
}

.ptnt-impact-row__text p {
  font-size: 1rem;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

.ptnt-impact-row__text p.ptnt-impact-solution {
  color: #444;
}

.ptnt-impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.ptnt-impact-tags span {
  font-size: 0.8125rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  color: #444;
  white-space: nowrap;
}

.ptnt-impact-row .ptnt-vertical__logos {
  margin-top: auto;
}

.ptnt-impact-row .ptnt-vertical__logos img {
  height: auto;
  max-height: 2.25rem;
  width: auto;
  opacity: 0.45;
}

@media (max-width: 767px) {
  .ptnt-impact-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ptnt-impact-row--reverse .ptnt-impact-row__image {
    order: 1;
  }

  .ptnt-impact-row--reverse .ptnt-impact-row__text {
    order: 2;
  }
}

/* ============================================
   BLOG SECTION — CARD IMAGE + BACKGROUND FIX
   ============================================ */

/* Blog listing page: grey background so white cards contrast with cover images */
.section_hero-blog {
  background-color: #e8e4df !important;
}

/* Blog article cards: white background for contrast */
.section_hero-blog .article_card {
  background-color: #fff !important;
  border-radius: 12px;
}

/* Blog hero featured article: white background */
.section_hero-blog .hero-blog_article {
  background-color: #fff !important;
  border-radius: 12px;
  padding: 16px;
}

/* Blog card category labels: visible on white cards */
.section_hero-blog .category.is-white {
  background-color: #f0eeea !important;
}

/* Blog card image container: use 16:9 ratio to show full cover image */
.article_card_img {
  padding-top: 56.25% !important;
  /* 16:9 instead of 84.5% square */
}

/* Ensure card image fills properly with object-fit cover on our branded covers */
.article_card_img .img {
  object-fit: cover;
  object-position: center top;
}

/* Featured hero image on blog.html: padding-top % is relative to PARENT width,
   not element width. In flex layout the element is ~55% of parent, so the
   container becomes ~1.3:1 but bloghero images are 2.38:1 (1200x504).
   object-fit:cover then crops ~45% of the image. Fix: use aspect-ratio. */
.article-img {
  padding-top: 0 !important;
  aspect-ratio: 1200 / 504;
}

/* Prevent flex stretch from overriding aspect-ratio */
.hero-blog_article {
  align-items: start !important;
}

/* Show left side of image (where title text is) when cropped */
.article-img .img {
  object-position: left center;
}

/* Carousel cards in "Latest insights" at bottom of blog posts:
   blog_card_img is 84% (nearly square), matching thumb format (800x670 = 83.75%) */
.blog_card_img {
  padding-top: 84% !important;
}

/* ============================================
   TRUE MOBILE OVERRIDES (Navbar, Products, Dropdowns)
   ============================================ */
/* ============================================
   TRUE MOBILE OVERRIDES (Navbar, Products, Dropdowns)
   ============================================ */
/* ============================================
   TRUE MOBILE OVERRIDES (Navbar, Products, Dropdowns)
   ============================================ */
@media screen and (max-width: 991px) {

  /* On mobile, hero stacks vertically so padding-top % = element width.
     Keep original mobile ratio, don't use aspect-ratio */
  .article-img {
    aspect-ratio: auto;
    padding-top: 60% !important;
  }

  /* --- 1. Mobile Menu Container (Clean Light Stack) --- */
  .nav_mobile {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background-color: #ffffff !important;
    padding: 1.5rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-bottom: 1px solid #eee !important;
  }

  .nav_mobile[data-nav-menu-open] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .navbar_list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- 2. The Hamburger Button (BRUTE FORCE TRANSPARENCY) --- */
  /* Target the Webflow button class directly with extreme specificity */
  .navbar .menu-button,
  .navbar .w-nav-button,
  .navbar .menu-button.w--open,
  .navbar .w-nav-button.w--open {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Force the Lines to be Clean 3-Bars */
  .nav-button_component {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 24px !important;
    height: 18px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .nav-button_line {
    width: 24px !important;
    height: 2px !important;
    background-color: #000 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    margin: 0 !important;
    position: static !important;
  }

  /* X Animation (Centered & Precise) */
  .menu-button.w--open .is-first {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .menu-button.w--open .is-second {
    opacity: 0 !important;
  }

  .menu-button.w--open .is-third {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* --- 3. Navigation Links (Left Aligned) --- */
  .nav_links {
    width: 100% !important;
    padding: 1.25rem 0.5rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #1a1a1a !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background: transparent !important;
    margin: 0 !important;
    min-height: 48px !important;
  }

  .nav_link-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    margin-left: auto !important;
    /* Push chevron to right */
    opacity: 0.5 !important;
  }

  /* --- 4. Dropdowns (Force Vertical Pushing) --- */
  .nav_dropdown {
    width: 100% !important;
    position: static !important;
  }

  .nav_link-dropdown {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    background-color: #fafafa !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .nav_link-dropdown.w--open {
    display: block !important;
  }

  .nav_dropdown-wrap {
    width: 100% !important;
    padding: 1rem !important;
  }

  .nav_dropdown-content--mega,
  .nav_dropdown-content--company {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .nav_dropdown-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .nav_dropdown-heading {
    font-size: 0.7rem !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    padding-top: 1rem !important;
  }

  .nav_dropdown-link {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem 0.5rem !important;
    text-decoration: none !important;
    border-bottom: 1px solid #eee !important;
  }

  .nav_dropdown-link-title {
    font-size: 1rem !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
  }

  .nav_dropdown-link-desc {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin-top: 0.2rem !important;
    line-height: 1.3 !important;
  }

  /* Kill Desktop Grids */
  .w-layout-grid {
    display: block !important;
  }

  /* 7. Products Section Override - Stack Cards Vertically */
  .features_horizontal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 3rem !important;
    transform: none !important;
  }

  .horizontal_block {
    width: 100% !important;
    margin: 0 !important;
  }

  .section_features {
    height: auto !important;
  }

  .features_sticky {
    position: relative !important;
    height: auto !important;
  }
}

/* ============================================
   MOBILE TYPOGRAPHY RESPONSIVE FIXES
   ============================================ */

/* --- Typography: Webflow 479px vars set h1=6rem, h2=4.5rem which is too large --- */
@media screen and (max-width: 479px) {

  h1,
  .heading-style-h1 {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
    line-height: 1.05 !important;
  }

  h2,
  .heading-style-h2 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }

  h3,
  .heading-style-h3 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* Hero <br> causes bad breaks on mobile */
  .section_hero h1 br,
  .section_hero-product h1 br {
    display: none;
  }
}

@media screen and (max-width: 767px) {

  /* --- Touch targets: min 44px height on all interactive elements --- */
  .button,
  .w-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ptnt-pricing__btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.85rem;
  }

  /* --- Horizontal scroll cards: full width on mobile --- */
  .features_horizontal .horizontal_block {
    width: 95% !important;
  }

  /* --- Comparison table: tighter padding, readable text --- */
  .ptnt-t thead th {
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .ptnt-t tbody td {
    padding: 16px;
  }

  .ptnt-t__old,
  .ptnt-t__new {
    font-size: 1rem;
  }

  .ptnt-t__detail {
    font-size: 0.7rem;
  }

  .ptnt-t__badge {
    font-size: 0.45rem;
    padding: 2px 5px;
  }

  /* --- Cookie banner: readable text --- */
  .consent-text {
    font-size: 0.85rem;
  }

  /* --- Impact page: tighter gaps --- */
  .ptnt-impact-row {
    gap: 1.5rem;
  }

  .ptnt-vertical {
    padding: 2rem 1.5rem;
  }
}

/* --- Universal Grid Fallback for Mobile --- */
@media screen and (max-width: 767px) {
  .w-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 479px) {

  /* --- Comparison table: stack layout --- */
  .ptnt-t thead th:nth-child(2),
  .ptnt-t thead th:nth-child(3) {
    width: auto;
  }

  .ptnt-t thead th {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .ptnt-t tbody td {
    padding: 12px;
  }

  /* --- Cookie banner: full width buttons --- */
  .consent-buttons {
    width: 100%;
  }

  .consent-btn {
    flex: 1;
    min-height: 44px;
  }

  /* --- Hero section: less vertical space --- */
  .section_hero {
    min-height: auto;
  }

  .hero_space {
    display: none;
  }
}

/* ============================================
   HERO & CTA ALIGNMENT FIXES (LEFT ALIGN BLOCK)
   ============================================ */
/* HERO & CTA ALIGNMENT FIXES (PA & Legal pages focus) */
.section_hero .hero_content,
.section_hero-product .hero_content,
.section_cta-banner .join_left {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 60rem !important;
}

.section_hero .text-max,
.section_hero .button-wrap,
.section_hero .button-group {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* ============================================
   FAQ ACCORDION STATE FIX
   ============================================ */
.qa_item .answer {
  display: none;
}

.qa_item.is-open .answer {
  display: block;
}

.qa_item .question {
  cursor: pointer;
}

.qa_item .icon-1x1-large {
  transition: transform 0.3s ease;
}

.qa_item.is-open .icon-1x1-large {
  transform: rotate(45deg);
}