/* ============================
   INDUSTRY PAGES (B2C / Small Biz)
   ============================ */

   :root {
    --ak-olive:  #939669;
    --ak-teal:   #699682;
    --ak-mauve:  #96697D;
    --ak-white:  #ffffff;
    --ak-bg:     #faf7f2;
    --ak-dark:   #1f2421;
    --ak-muted:  #61666a;
    --radius-lg: 18px;
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.08);
  }
  
  /* ============================
     HERO – VIDEO BACKGROUND
     ============================ */
  
  .sb-hero {
    position: relative;
    padding: 140px 0 120px;
    min-height: 72vh;
    overflow: hidden;
  }
  
  .sb-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  
  /* soft gradient over video */
  .sb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.10) 50%,
      rgba(0,0,0,0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  
  .sb-hero .wrapper {
    position: relative;
    z-index: 2;
    max-width: 900px;
  }
  
  /* eyebrow + hero text */
  
  .sb-eyebrow {
    display: inline-flex;
    padding: 4px 12px;
    background: rgba(255,255,255,0.25);
    color: white;
    font-size: 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
    letter-spacing: 0.05em;
  }
  
  .sb-hero h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    font-family: "Playfair Display", serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  
  .sb-hero p {
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    max-width: 640px;
    margin-bottom: 22px;
  }
  
  .sb-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  /* ============================
     WHAT WE DO – 2×3 GRID
     ============================ */
  
  .sb-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    margin-top: 32px;
  }
  
  .sb-service-card {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--ak-teal);
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease;
  }
  
  .sb-service-card:hover {
    transform: translateY(-4px);
  }
  
  /* square images, tight + consistent */
  .sb-service-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
  }
  
  .sb-service-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .sb-service-card p {
    font-size: 14px;
    color: var(--ak-muted);
  }
  
  /* ============================
     HOW IT WORKS – ICONS
     ============================ */
  
  #how-it-works .step img {
    width: 58px;
    margin-bottom: 10px;
  }
  
  /* ============================
     WHY CHOOSE US
     ============================ */
  
  .sb-why-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 36px;
    margin-top: 28px;
    align-items: flex-start;
  }
  
  .sb-testimonial {
    background: #f4f8f7;
    padding: 18px;
    border-radius: 12px;
    border-left: 4px solid var(--ak-teal);
    box-shadow: var(--shadow-soft);
    margin-bottom: 16px;
  }
  
  .sb-testimonial span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--ak-muted);
  }
  
  /* ============================
     FAQ ACCORDION
     ============================ */
  
  .sb-faq {
    max-width: 800px;
    margin: 40px auto 0;
  }
  
  .sb-faq button {
    width: 100%;
    padding: 18px 14px;
    background: #f7f4fa;
    border-radius: 14px;
    border: 1px solid rgba(150,105,125,0.25);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .sb-faq .panel {
    display: none;
    padding: 10px 14px 20px;
    font-size: 15px;
    color: var(--ak-muted);
  }
  
  /* ============================
     PROJECT CARDS
     ============================ */
  
  .sb-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 24px;
    margin-top: 30px;
  }
  
  .sb-project {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    border: 1px solid rgba(147,150,105,0.25);
  }
  
  .sb-project img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
  
  .sb-project div {
    padding: 20px;
  }
  
  /* ============================
     RESPONSIVE TWEAKS
     ============================ */
  
  @media (max-width: 900px) {
    .sb-services-grid {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  
    .sb-why-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 600px) {
    .sb-services-grid {
      grid-template-columns: 1fr;
    }
  
    .sb-hero {
      padding: 110px 0 90px;
    }
  }
  /* small square icon-style images inside each card */
.sb-service-card img {
  width: 88px;              /* size of the square */
  aspect-ratio: 1 / 1;      /* keep it square */
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 12px;
  display: block;
}
/* PERFECT SQUARE IMAGE WRAPPER */
.sb-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;          /* forces a perfect square */
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 14px;
  background: #f4f4f4;          /* fallback */
}

/* image fills the square without distortion */
.sb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============================
   HOW IT WORKS – SLIDE VIEWER
   ============================ */

   .how-section {
    margin-top: 40px;
  }
  
  .how-slider {
    margin-top: 28px;
    background: #fff;
    border-radius: 20px;
    padding: 24px 24px 20px;
    box-shadow: var(--shadow-soft);
  }
  
  /* Slide container */
  .how-slides {
    position: relative;
    min-height: 160px;
  }
  
  /* Individual slide */
  .how-slide {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding-right: 8px;
    transition:
      opacity 0.35s ease,
      transform 0.35s ease;
  }
  
  /* Active slide visible */
  .how-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
  }
  
  /* Icon / image */
  .how-slide-media img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    background: #f4f4f4;
  }
  
  /* Text */
  .how-step-label {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ak-muted);
    margin-bottom: 4px;
  }
  
  .how-slide-copy h3 {
    margin: 0 0 4px;
    font-size: 18px;
  }
  
  .how-slide-copy p {
    margin: 0;
    font-size: 14px;
    color: var(--ak-muted);
  }
  
  /* Nav row */
  .how-nav {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  
  .how-btn {
    border: 1px solid rgba(31,36,33,0.12);
    background: #faf7f2;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  
  .how-btn:hover {
    background: #f0ebe0;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  }
  
  /* Dots */
  .how-dots {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .how-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(105,150,130,0.3);
    padding: 0;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
  }
  
  .how-dot.is-active {
    width: 18px;
    background: var(--ak-teal);
  }
  
  /* Responsive */
  @media (max-width: 640px) {
    .how-slider {
      padding: 20px 18px 18px;
    }
  
    .how-slide {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  
    .how-slide-media img {
      width: 64px;
      height: 64px;
    }
  
    .how-nav {
      flex-direction: column;
      align-items: stretch;
    }
  
    .how-dots {
      justify-content: center;
    }
  }
  /* ============================
   HOW IT WORKS – SLIDE VIEWER
   ============================ */

.how-section {
  margin-top: 40px;
}

.how-slider {
  margin-top: 28px;
  background: #fffdf8;
  border-radius: 22px;
  padding: 26px 28px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
  border: 1px solid rgba(31,36,33,0.06);
}

/* container for slides */
.how-slides {
  position: relative;
  min-height: 170px;
}

/* each slide */
.how-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}

.how-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* icon */
.how-slide-media img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  background: #f4f4f4;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

/* text block */
.how-step-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ak-muted);
  margin-bottom: 4px;
}

.how-slide-copy h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.how-slide-copy p {
  margin: 0;
  font-size: 15px;
  color: var(--ak-muted);
}

/* nav row */
.how-nav {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.how-btn {
  border: 1px solid rgba(31,36,33,0.16);
  background: #faf7f2;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.how-btn:hover {
  background: #f0ebe0;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* dots */
.how-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.how-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(105,150,130,0.3);
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.how-dot.is-active {
  width: 18px;
  background: var(--ak-teal);
}

/* responsive */
@media (max-width: 640px) {
  .how-slider {
    padding: 20px 18px 18px;
  }

  .how-slide {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .how-slide-media img {
    width: 64px;
    height: 64px;
  }

  .how-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .how-dots {
    justify-content: center;
  }
}
/* drop-in animation for icon + text on slide change */

.how-slide-media,
.how-slide-copy {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.how-slide.is-active .how-slide-media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.how-slide.is-active .how-slide-copy {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}
/* ============================
   HOW IT WORKS – CUE CARD UPGRADE
   ============================ */

   .how-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  
  .how-section p {
    font-size: 16px;
    font-weight: 500;
    color: var(--ak-dark);
    opacity: 0.75;
  }
  
  /* Card */
  .how-slider {
    margin-top: 28px;
    background: #ffffff;
    border-radius: 26px;
    padding: 36px 38px 32px;
    box-shadow: 0 32px 70px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
  }
  
  /* Slide container */
  .how-slides {
    position: relative;
    min-height: 200px;
  }
  
  /* Individual slide */
  .how-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 120px 1fr;   /* BIGGER image column */
    gap: 28px;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  
  .how-slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Larger, square image */
  .how-slide-media img {
    width: 120px;
    height: 120px;
    border-radius: 22px;
    object-fit: contain;
    padding: 12px;
    background: #f6f6f4;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 14px 30px rgba(0,0,0,0.06);
  }
  
  /* Text block */
  .how-step-label {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.16em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ak-teal);
    margin-bottom: 6px;
  }
  
  .how-slide-copy h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
  }
  
  .how-slide-copy p {
    font-size: 16px;
    font-weight: 500;
    color: var(--ak-muted);
  }
  
  /* Nav */
  .how-nav {
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .how-btn {
    border: 1px solid rgba(31,36,33,0.2);
    background: #ffffff;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .how-btn:hover {
    background: #f4f4f4;
    transform: translateY(-1px);
  }
  
  /* Dots */
  .how-dots {
    display: flex;
    gap: 8px;
  }
  
  .how-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(105,150,130,0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .how-dot.is-active {
    width: 20px;
    border-radius: 8px;
    background: var(--ak-teal);
  }
  
  /* Drop-in animation */
  .how-slide-media,
  .how-slide-copy {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  
  .how-slide.is-active .how-slide-media {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.10s;
  }
  
  .how-slide.is-active .how-slide-copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
  }
  
  /* Mobile */
  @media (max-width: 700px) {
    .how-slide {
      grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
    }
  
    .how-slide-media img {
      width: 110px;
      height: 110px;
    }
  
    .how-slide-copy h2 {
      font-size: 22px;
    }
  
    .how-nav {
      flex-direction: column;
      gap: 16px;
    }
  }
  .sb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,   /* was 0.25 */
    rgba(0,0,0,0.05) 50%,  /* was 0.10 */
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* WHAT WE DO – show full icon/image (no cropping) */
.sb-service-card .sb-img-wrap{
  height: 160px;            /* keep consistent card height */
  border-radius: 12px;
  overflow: hidden;
  background: #f4f8f7;      /* soft backdrop for letterbox gaps */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-service-card .sb-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* <-- key change: no cropping */
  object-position: center;
  margin: 0;
  border-radius: 0;         /* wrapper handles rounding */
}
.sb-service-card .sb-card-icon{
  width: 54px;
  height: 34px;
  object-fit: contain;
  display: block;
  margin: 2px 0 12px;
  opacity: 0.95;
}
.sb-service-card .sb-card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
}
/* =========================================
   AGENCIES – HOW A PARTNERSHIP WORKS
   Bigger content + remove tall empty window
   ========================================= */

   #ag-how-it-works .how-slider{
    padding: 22px 0 10px;
  }
  
  #ag-how-it-works .how-slides{
    height: auto !important;
    min-height: 0 !important;
  }
  
  #ag-how-it-works .how-slide{
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 22px;
    align-items: center;
  
    padding: 28px 28px;
    border-radius: 18px;
  
    min-height: 0 !important;
    height: auto !important;
  }
  
  /* Bigger icon tile */
  #ag-how-it-works .how-slide-media{
    width: 132px;
    height: 132px;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  
  /* OVERRIDE your existing 58px icon rule */
  #ag-how-it-works .how-slide-media img{
    width: 96px !important;
    height: 96px !important;
    object-fit: contain;
    display: block;
  }
  
  #ag-how-it-works .how-step-label{
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.85;
    display: inline-block;
    margin-bottom: 6px;
  }
  
  #ag-how-it-works .how-slide-copy h3{
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
    margin: 0 0 8px;
  }
  
  #ag-how-it-works .how-slide-copy p{
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.55;
    margin: 0;
    max-width: 75ch;
  }
  
  #ag-how-it-works .how-nav{
    margin-top: 14px;
  }
  
  @media (max-width: 720px){
    #ag-how-it-works .how-slide{
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 22px 18px;
    }
    #ag-how-it-works .how-slide-media{
      width: 96px;
      height: 96px;
    }
    #ag-how-it-works .how-slide-media img{
      width: 72px !important;
      height: 72px !important;
    }
  }
  /* =========================================
   CASE STUDY SLIDE – TEXT CONTRAST FIX
   Bottom gradient overlay for readability
   ========================================= */

.case-slide-image{
  position: relative;
}

/* gradient overlay */
.case-slide-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 25%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.0) 65%
  );
  pointer-events: none;
}
.case-slide-overlay{
  position: relative;
  z-index: 2;
}
/* Ensure case study text is readable on dark images */
.case-slide-overlay h3{
  color: #ffffff;
}
.case-slide-overlay .case-tag{
  color: #e6f8f5; /* or pure white if you prefer */
}
.case-slide-overlay h3,
.case-slide-overlay .case-tag{
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
/* =========================================
   CASE STUDIES – IMAGE BRIGHTNESS (FIXED)
   Inactive = darker, Active = bright
   Also: lighten the gradient on Active
   ========================================= */

/* Inactive slides: darker image */
#case-studies .swiper-slide .case-slide-image{
  filter: brightness(0.60) contrast(1.02) saturate(0.95) !important;
  transition: filter 280ms ease;
}

/* Active slide: noticeably brighter */
#case-studies .swiper-slide.swiper-slide-active .case-slide-image{
  filter: brightness(1.12) contrast(1.06) saturate(1.05) !important;
}

/* Optional: neighbours slightly less dark than others */
#case-studies .swiper-slide.swiper-slide-prev .case-slide-image,
#case-studies .swiper-slide.swiper-slide-next .case-slide-image{
  filter: brightness(0.78) contrast(1.03) saturate(1.00) !important;
}

/* Your bottom gradient overlay — make it controllable */
#case-studies .case-slide-image::after{
  opacity: 0.70;                 /* inactive = stronger shelf */
  transition: opacity 280ms ease;
}

/* Active slide: reduce the overlay so the image pops */
#case-studies .swiper-slide.swiper-slide-active .case-slide-image::after{
  opacity: 0.40;                 /* active = lighter shelf */
}
/* =========================================
   CASE STUDIES – RIGHT PANEL UPGRADE
   ========================================= */

   .case-slide-copy{
    padding: 34px 38px;
    position: relative;
  }
  
  /* stronger hierarchy */
  .case-slide-copy h4{
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
  }
  
  .case-slide-copy > p{
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(0,0,0,0.72);
    margin: 0 0 16px;
    max-width: 62ch;
  }
  
  /* bullets: cleaner + more “designed” */
  .case-slide-copy ul{
    margin: 14px 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }
  
  .case-slide-copy ul li{
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(0,0,0,0.74);
  }
  
  .case-slide-copy ul li::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(54, 116, 98, 0.85); /* your green */
    position: absolute;
    left: 0;
    top: 0.6em;
    transform: translateY(-50%);
  }
  
  /* Outcome: turn your last <p><strong>Outcome:</strong> … into a box */
  .case-slide-copy p strong{
    color: rgba(0,0,0,0.82);
  }
  
  .case-slide-copy p:has(strong){
    margin-top: 14px;
  }
  
  .case-slide-copy p:has(strong):last-of-type{
    background: rgba(230, 248, 245, 0.55); /* soft teal */
    border-left: 4px solid rgba(54, 116, 98, 0.7);
    padding: 14px 14px 14px 14px;
    border-radius: 12px;
    color: rgba(0,0,0,0.75);
  }
  
  /* add a subtle divider rhythm */
  .case-slide-copy::before{
    content: "";
    position: absolute;
    left: 38px;
    right: 38px;
    top: 24px;
    height: 1px;
    background: rgba(0,0,0,0.06);
    display: none; /* flip to block if you want a top divider */
  }
  /* =========================================
   CASE STUDIES – THEMED RIGHT PANEL
   Uses AdKonnekt colour language
   ========================================= */

.case-slide-copy{
  background: linear-gradient(
    180deg,
    #f6f6f4 0%,
    #f1f5f2 100%
  ); /* soft cream → green-tinted base */

  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Headline stronger */
.case-slide-copy h4{
  color: #1f2f2a;
}

/* Supporting copy */
.case-slide-copy > p{
  color: rgba(31, 47, 42, 0.75);
}

/* Bullet list — make it feel intentional */
.case-slide-copy ul li{
  color: rgba(31, 47, 42, 0.78);
}

.case-slide-copy ul li::before{
  background: #3f7f6a; /* AdKonnekt green */
}

/* Outcome block — this should POP */
.case-slide-copy p:has(strong):last-of-type{
  background: linear-gradient(
    135deg,
    rgba(63, 127, 106, 0.14),
    rgba(63, 127, 106, 0.06)
  );
  border-left: 4px solid #3f7f6a;
  color: rgba(31, 47, 42, 0.85);
}
/* =========================================================
   CASE STUDIES — PER-SLIDE THEME COLOURS (RIGHT PANEL)
   CSS-only: uses nth-child() on .swiper-slide
   ========================================================= */

/* 1) Theme tokens per slide (edit colours if you want) */
#case-studies .swiper-slide:nth-child(1) { --cs-accent:#2f7a66; --cs-tint: rgba(47,122,102,.14); } /* green */
#case-studies .swiper-slide:nth-child(2) { --cs-accent:#2a6f8f; --cs-tint: rgba(42,111,143,.14); } /* teal/blue */
#case-studies .swiper-slide:nth-child(3) { --cs-accent:#6b4ea2; --cs-tint: rgba(107,78,162,.14); } /* purple */
#case-studies .swiper-slide:nth-child(4) { --cs-accent:#b04b3a; --cs-tint: rgba(176,75,58,.14); } /* terracotta */

/* if you ever add more slides, it will repeat in blocks of 4 */
#case-studies .swiper-slide:nth-child(4n+1) { --cs-accent:#2f7a66; --cs-tint: rgba(47,122,102,.14); }
#case-studies .swiper-slide:nth-child(4n+2) { --cs-accent:#2a6f8f; --cs-tint: rgba(42,111,143,.14); }
#case-studies .swiper-slide:nth-child(4n+3) { --cs-accent:#6b4ea2; --cs-tint: rgba(107,78,162,.14); }
#case-studies .swiper-slide:nth-child(4n+4) { --cs-accent:#b04b3a; --cs-tint: rgba(176,75,58,.14); }

/* 2) Apply theme to the RIGHT panel */
#case-studies .swiper-slide .case-slide-copy{
  background: linear-gradient(180deg, rgba(246,246,244,1) 0%, var(--cs-tint) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* 3) Apply theme accents */
#case-studies .swiper-slide .case-slide-copy ul li::before{
  background: var(--cs-accent) !important;
}

#case-studies .swiper-slide .case-slide-copy p:has(strong):last-of-type{
  border-left-color: var(--cs-accent) !important;
  background: linear-gradient(135deg, var(--cs-tint), rgba(255,255,255,.55)) !important;
}
/* =========================================
   CASE STUDIES – RIGHT PANEL (ON-BRAND FIX)
   Uses existing AdKonnekt palette ONLY
   ========================================= */

.case-slide-copy{
  background: #f6f6f4; /* same cream as site */
  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Headline */
.case-slide-copy h4{
  color: #1f2f2a;
}

/* Body text */
.case-slide-copy p,
.case-slide-copy ul li{
  color: rgba(31,47,42,0.75);
}

/* Bullet dots — olive accent */
.case-slide-copy ul li::before{
  background: #3f7f6a; /* your green */
}

/* OUTCOME box — subtle olive tint (NO red/pink) */
.case-slide-copy p:last-of-type{
  background: rgba(63,127,106,0.08);
  border-left: 4px solid #3f7f6a;
  border-radius: 14px;
  padding: 14px 16px;
  color: rgba(31,47,42,0.85);
}
/* =========================================================
   CASE STUDIES — PER-SLIDE BACKGROUND GRADIENT (ON BRAND)
   ONLY changes the RIGHT PANEL background
   ========================================================= */

/* Slide 1 – Olive */
#case-studies .swiper-slide:nth-child(1) {
  --cs-tint: color-mix(in srgb, var(--ak-olive) 14%, var(--ak-bg));
}

/* Slide 2 – Teal */
#case-studies .swiper-slide:nth-child(2) {
  --cs-tint: color-mix(in srgb, var(--ak-teal) 14%, var(--ak-bg));
}

/* Slide 3 – Mauve */
#case-studies .swiper-slide:nth-child(3) {
  --cs-tint: color-mix(in srgb, var(--ak-mauve) 14%, var(--ak-bg));
}

/* Slide 4 – Olive again (or change if you want) */
#case-studies .swiper-slide:nth-child(4) {
  --cs-tint: color-mix(in srgb, var(--ak-olive) 14%, var(--ak-bg));
}

/* APPLY THE GRADIENT */
#case-studies .swiper-slide .case-slide-copy {
  background: linear-gradient(
    180deg,
    var(--ak-bg) 0%,
    var(--cs-tint) 100%
  ) !important;
}
/* =========================================================
   CASE STUDIES – PRO RIGHT PANEL (ON BRAND)
   ========================================================= */

/* Slide tints (keep your order) */
#case-studies .swiper-slide:nth-child(1){ --cs-accent: var(--ak-olive); }
#case-studies .swiper-slide:nth-child(2){ --cs-accent: var(--ak-teal); }
#case-studies .swiper-slide:nth-child(3){ --cs-accent: var(--ak-mauve); }
#case-studies .swiper-slide:nth-child(4){ --cs-accent: var(--ak-olive); }

/* RIGHT PANEL base */
#case-studies .swiper-slide .case-slide-copy{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 42px 46px;
  background:
    radial-gradient(1200px 520px at 20% 0%,
      color-mix(in srgb, var(--cs-accent) 16%, var(--ak-bg)) 0%,
      var(--ak-bg) 55%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      color-mix(in srgb, var(--cs-accent) 10%, var(--ak-bg)) 100%
    ) !important;

  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(31,36,33,0.06);
  overflow: hidden;
}

/* subtle “pro” accent edge */
#case-studies .swiper-slide .case-slide-copy::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 8px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cs-accent) 85%, var(--ak-white)) 0%,
    var(--cs-accent) 55%,
    color-mix(in srgb, var(--cs-accent) 70%, var(--ak-dark)) 100%
  );
  opacity: .95;
}

/* subtle texture (very light, avoids “flat block”) */
#case-studies .swiper-slide .case-slide-copy::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(31,36,33,0.05) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.10;
  pointer-events:none;
}

/* Headings */
#case-studies .case-slide-copy h4{
  color: var(--ak-dark);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.18;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

#case-studies .case-slide-copy > p{
  color: color-mix(in srgb, var(--ak-dark) 68%, transparent);
  margin: 0 0 18px;
  line-height: 1.65;
  max-width: 66ch;
}

/* Bullets: replace the default look */
#case-studies .case-slide-copy ul{
  list-style: none;
  padding: 0;
  margin: 16px 0 18px;
  display: grid;
  gap: 12px;
}

#case-studies .case-slide-copy ul li{
  position: relative;
  padding-left: 22px;
  color: color-mix(in srgb, var(--ak-dark) 70%, transparent);
  line-height: 1.55;
}

#case-studies .case-slide-copy ul li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cs-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 14%, transparent);
  transform: translateY(-50%);
}

/* Outcome: proper callout block */
#case-studies .case-slide-copy p:has(strong):last-of-type{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(31,36,33,0.06);
  border-left: 4px solid var(--cs-accent);
  color: color-mix(in srgb, var(--ak-dark) 75%, transparent);
}

/* Outcome label */
#case-studies .case-slide-copy p:has(strong):last-of-type strong{
  color: var(--ak-dark);
}
/* ===========================
   SMALL BUSINESS — HOW IT WORKS
   Parallax background ONLY
   =========================== */

   #how-it-works.has-parallax-bg {
    position: relative;
    background-color: #f9f5ee;
    background-image: url("media/gear1.png");  /* same image as your demo parallax */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;             /* parallax feel */
  }
  
  /* soft wash so content stays readable */
  #how-it-works.has-parallax-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 247, 242, 0.65);
    pointer-events: none;
    z-index: 0;
  }
  
  /* keep ALL existing slider content above the wash */
  #how-it-works.has-parallax-bg > * {
    position: relative;
    z-index: 1;
  }
  
  /* iOS/mobile: disable fixed to avoid jitter */
  @media (max-width: 899px) {
    #how-it-works.has-parallax-bg {
      background-attachment: scroll;
    }
  }
  /* HERO EYEBROW — BOOST VISIBILITY */
.ag-eyebrow {
  background: rgba(255, 255, 255, 0.38);
  color: #0f2f27; /* dark teal, not pure black */
  font-weight: 600;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 6px 18px rgba(0,0,0,0.18);

  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
/* FORCE HERO PILL READABILITY (agencies page) */
.ag-eyebrow{
  background: rgba(0,0,0,0.72);            /* strong contrast */
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.28);
  font-weight: 600;
  letter-spacing: .2px;

  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.10) inset;

  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
/* ===========================
   SHARED PARALLAX BACKGROUND
   (used across How It Works sections)
   =========================== */

   .has-parallax-bg {
    position: relative;
    background-image: url("media/gear1.png"); /* same image as before */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  /* soft overlay for readability */
  .has-parallax-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 247, 242, 0.68);
    z-index: 0;
    pointer-events: none;
  }
  
  /* ensure content sits above overlay */
  .has-parallax-bg > * {
    position: relative;
    z-index: 1;
  }
  
  /* mobile safety */
  @media (max-width: 900px) {
    .has-parallax-bg {
      background-attachment: scroll;
    }
  }
  /* =========================================
   SHARED PARALLAX SECTION BACKGROUND
   ========================================= */

.has-parallax-bg {
  position: relative;
  background-image: url("media/gear1.png"); /* same asset as other sections */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* soft light overlay to match Events/Ecomm tone */
.has-parallax-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 247, 242, 0.7);
  pointer-events: none;
  z-index: 0;
}

/* ensure content sits above overlay */
.has-parallax-bg > .wrapper {
  position: relative;
  z-index: 1;
}

/* mobile fallback */
@media (max-width: 900px) {
  .has-parallax-bg {
    background-attachment: scroll;
  }
}
/* =========================================
   FAQ — PARALLAX BACKGROUND (GIF)
   ========================================= */

   .faq-parallax {
    position: relative;
    background-image: url("media/FAQ.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
  }
  
  /* readability overlay */
  .faq-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 247, 242, 0.78); /* matches site tone */
    z-index: 0;
    pointer-events: none;
  }
  
  /* ensure FAQ content sits above */
  .faq-parallax > .wrapper {
    position: relative;
    z-index: 1;
  }
  
  /* subtle separation from previous section */
  .faq-parallax {
    margin-top: 40px;
  }
  
  /* mobile safety (GIF + fixed = bad on iOS) */
  @media (max-width: 900px) {
    .faq-parallax {
      background-attachment: scroll;
    }
  }
  /* =========================================
   CASE STUDIES — WHITE BACKGROUND
   ========================================= */

.section-white {
  background: #ffffff;
}

/* remove inherited gradients or overlays if any */
.section-white::before {
  display: none;
}
/* =========================================
   FAQ — MAKE IT LOOK PRO (NO HTML/JS CHANGES)
   Targets: .faq-parallax + .sb-faq
   ========================================= */

.faq-parallax {
  /* your gif/parallax stays, but give the section stronger “structure” */
  padding: 90px 0;
}

.faq-parallax::before{
  /* increase readability vs the GIF */
  background: rgba(250, 247, 242, 0.86);
}

/* tighter, more intentional heading */
.faq-parallax .wrapper > h2{
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.faq-parallax .wrapper{
  max-width: 980px;           /* keeps it looking “designed” */
}

/* accordion container */
.sb-faq{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

/* buttons = real “cards” */
.sb-faq button{
  width: 100%;
  text-align: left;
  padding: 16px 54px 16px 18px; /* space on right for the icon */
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(17,24,39,0.92);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;

  position: relative;
  cursor: pointer;

  box-shadow:
    0 12px 26px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.9) inset;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.sb-faq button:hover{
  transform: translateY(-1px);
  border-color: rgba(47,122,102,0.25);
  box-shadow:
    0 16px 34px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.9) inset;
}

/* plus/minus icon */
.sb-faq button span{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(47,122,102,0.12);
  color: #2f7a66;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;

  border: 1px solid rgba(47,122,102,0.18);
}

/* open panel */
.sb-faq .panel{
  margin-top: -6px;           /* tucks under the button */
  padding: 14px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255,255,255,0.88);
  color: rgba(17,24,39,0.78);
  font-size: 15px;
  line-height: 1.55;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.06);
}

/* when the first button is open, make it feel “active”
   (works if your JS toggles + to - in the span text) */
.sb-faq button:has(span:contains("-")){
  border-color: rgba(47,122,102,0.28);
  background: rgba(255,255,255,0.96);
}

/* fallback: if :has isn't supported, still looks good */
/* =========================================
   FAQ — MAKE IT LOOK PRO (NO HTML/JS CHANGES)
   Targets: .faq-parallax + .sb-faq
   ========================================= */

   .faq-parallax {
    /* your gif/parallax stays, but give the section stronger “structure” */
    padding: 90px 0;
  }
  
  .faq-parallax::before{
    /* increase readability vs the GIF */
    background: rgba(250, 247, 242, 0.86);
  }
  
  /* tighter, more intentional heading */
  .faq-parallax .wrapper > h2{
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
  }
  
  .faq-parallax .wrapper{
    max-width: 980px;           /* keeps it looking “designed” */
  }
  
  /* accordion container */
  .sb-faq{
    margin-top: 18px;
    display: grid;
    gap: 12px;
  }
  
  /* buttons = real “cards” */
  .sb-faq button{
    width: 100%;
    text-align: left;
    padding: 16px 54px 16px 18px; /* space on right for the icon */
    border-radius: 14px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(255,255,255,0.92);
    color: rgba(17,24,39,0.92);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.01em;
  
    position: relative;
    cursor: pointer;
  
    box-shadow:
      0 12px 26px rgba(0,0,0,0.08),
      0 1px 0 rgba(255,255,255,0.9) inset;
  
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  }
  
  .sb-faq button:hover{
    transform: translateY(-1px);
    border-color: rgba(47,122,102,0.25);
    box-shadow:
      0 16px 34px rgba(0,0,0,0.10),
      0 1px 0 rgba(255,255,255,0.9) inset;
  }
  
  /* plus/minus icon */
  .sb-faq button span{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
  
    display: grid;
    place-items: center;
  
    background: rgba(47,122,102,0.12);
    color: #2f7a66;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
  
    border: 1px solid rgba(47,122,102,0.18);
  }
  
  /* open panel */
  .sb-faq .panel{
    margin-top: -6px;           /* tucks under the button */
    padding: 14px 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(255,255,255,0.88);
    color: rgba(17,24,39,0.78);
    font-size: 15px;
    line-height: 1.55;
  
    box-shadow:
      0 10px 22px rgba(0,0,0,0.06);
  }
  
  /* when the first button is open, make it feel “active”
     (works if your JS toggles + to - in the span text) */
  .sb-faq button:has(span:contains("-")){
    border-color: rgba(47,122,102,0.28);
    background: rgba(255,255,255,0.96);
  }
/* =========================================
   FAQ — VIDEO "PARALLAX" BACKGROUND
   ========================================= */

.faq-parallax.faq-video{
  position: relative;
  overflow: hidden;
  padding: 90px 0;
}

/* the video */
.faq-parallax.faq-video .faq-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* keeps the background feeling “fixed” while scrolling */
  transform: translateZ(0);
  will-change: transform;

  z-index: 0;
  pointer-events: none;
}

/* overlay for readability */
.faq-parallax.faq-video::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(250, 247, 242, 0.86);
  z-index: 1;
  pointer-events: none;
}

/* make sure content sits above video + overlay */
.faq-parallax.faq-video .wrapper{
  position: relative;
  z-index: 2;
}
.faq-parallax::before {
  content: "";
  position: absolute;
  inset: 0;

  /* lighter overlay so GIF shows through */
  background: rgba(250, 247, 242, 0.65);

  z-index: 1;
  pointer-events: none;
}
.faq-parallax::before {
  background: rgba(250, 247, 242, 0.62); /* lighter overlay */
}
.faq-parallax .wrapper > h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  color: var(--ak-dark);
}
.sb-faq button {
  position: relative;
  width: 100%;
  text-align: left;

  padding: 20px 64px 20px 24px;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 36, 33, 0.10);

  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ak-dark);

  cursor: pointer;
  transition: 
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.sb-faq button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  background: #ffffff;
}
/* =========================
   FAQ — PRO CARD UPGRADE
   ========================= */

   .sb-faq {
    max-width: 920px;
    margin: 32px auto 0;
    display: grid;
    gap: 14px;
  }
  
  /* Question row */
  .sb-faq button {
    width: 100%;
    text-align: left;
    padding: 20px 64px 20px 22px;
    border-radius: 18px;
    border: 1px solid rgba(31,36,33,0.12);
    background: rgba(255,255,255,0.96);
    font-size: 17px;
    font-weight: 600;
    color: var(--ak-dark);
    cursor: pointer;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  
  .sb-faq button:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.12);
  }
  
  /* + / – icon */
  .sb-faq button span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(105,150,130,0.18);
    color: var(--ak-teal);
    font-size: 18px;
    font-weight: 700;
  
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  
  /* Answer panel */
  .sb-faq .panel {
    margin-top: -6px;
    padding: 18px 22px 22px;
    border-radius: 0 0 18px 18px;
  
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(31,36,33,0.12);
    border-top: none;
  
    font-size: 16px;
    line-height: 1.6;
    color: var(--ak-muted);
  
    box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  }
  .faq-parallax h2 {
    font-size: clamp(32px, 3.5vw, 44px);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }
  
  .faq-parallax p {
    max-width: 640px;
    font-size: 17px;
    opacity: 0.85;
  }
  .faq-parallax h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: var(--ak-teal);
    opacity: 0.7;
  }
  /* ===== FAQ (PRO) ===== */
.sb-faq-title{
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.sb-faq-sub{
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--ak-muted);
  max-width: 760px;
}

.sb-faq.sb-faq-pro{
  margin-top: 22px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 14px;
}

.sb-faq-item{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(20,20,20,0.10);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
}

.sb-faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  text-align: left;
  padding: 18px 18px;

  border: 0;
  background: transparent;
  cursor: pointer;

  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 650;
  color: #111;
}

.sb-faq-q-text{
  line-height: 1.25;
}

.sb-faq-icon{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;

  background: rgba(47,122,102,0.12);
  border: 1px solid rgba(47,122,102,0.18);
  color: #2f7a66;

  font-weight: 800;
  font-size: 16px;
  flex: 0 0 auto;
}

.sb-faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
  background: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(20,20,20,0.08);
}

.sb-faq-a-inner{
  padding: 14px 18px 18px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10,10,10,0.78);
}

/* Open state */
.sb-faq-item.is-open .sb-faq-a{
  max-height: 220px; /* safe for your short answers; bump if needed */
}

.sb-faq-item.is-open .sb-faq-q{
  background: rgba(255,255,255,0.25);
}

.sb-faq-item.is-open .sb-faq-icon{
  background: rgba(47,122,102,0.18);
}

/* Hover polish */
.sb-faq-q:hover{
  background: rgba(255,255,255,0.18);
}
/* ===== FAQ (Pro Accordion + Parallax) ===== */

/* Parallax background + adjustable overlay strength */
.faq-parallax{
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  --faq-overlay: 0.28; /* <-- LOWER = see image more (try 0.18–0.35) */
}

.faq-parallax::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("media/FAQ.gif") center/cover no-repeat;
  background-attachment: fixed;
  transform: translateZ(0);
  filter: contrast(1.03) saturate(1.02);
  z-index: 0;
}

.faq-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(245, 244, 240, var(--faq-overlay));
  backdrop-filter: blur(1.5px);
  z-index: 1;
}

.faq-parallax > .wrapper{
  position: relative;
  z-index: 2;
}

.faq-parallax h2{
  margin-bottom: 10px;
}

/* Accordion layout */
.sb-faq{
  margin-top: 26px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Each FAQ becomes a proper “card” */
.sb-faq-item{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(17,17,17,0.08);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(7px);
}

.sb-faq-q{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;

  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;            /* bigger */
  line-height: 1.25;
  color: #141414;
}

.sb-faq-q:hover{
  background: rgba(47,122,102,0.06);
}

.sb-faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: rgba(47,122,102,0.12);
  border: 1px solid rgba(47,122,102,0.26);
  color: var(--ak-teal);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

/* Answer panel – THIS is the bit that looked cheap before */
.sb-faq-a{
  padding: 0 22px;
  color: rgba(20,20,20,0.78);
  font-size: 16px;
  line-height: 1.55;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}

.sb-faq-item.is-open .sb-faq-a{
  padding: 0 22px 18px;
  max-height: 220px; /* increase if you add longer answers */
  opacity: 1;
}

.sb-faq-item.is-open .sb-faq-q{
  background: rgba(255,255,255,0.35);
}
/* ========= FAQ (PRO) ========= */

.faq-head{
  max-width: 920px;
  margin: 0 auto 18px;
}

.faq-head h2{
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.faq-sub{
  margin: 0;
  color: rgba(20,20,20,0.68);
  font-size: 16px;
  font-weight: 500;
}

.sb-faq--pro{
  max-width: 920px;
  margin: 20px auto 0;
  display: grid;
  gap: 14px;
}

.sb-faq--pro .faq-row{
  border-radius: 20px;
  overflow: hidden;
  /* keeps it feeling like one component */
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

.sb-faq--pro .faq-q{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15,15,15,0.12);
  border-bottom: none;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);

  padding: 22px 64px 22px 22px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 750;
  color: #111;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.sb-faq--pro .faq-q:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.94);
  border-color: rgba(47,122,102,0.28);
}

.sb-faq--pro .faq-q:focus-visible{
  outline: 3px solid rgba(47,122,102,0.25);
  outline-offset: 2px;
}

.sb-faq--pro .faq-q[aria-expanded="true"]{
  background: rgba(255,255,255,0.97);
  border-color: rgba(47,122,102,0.35);
}

.sb-faq--pro .faq-q-text{
  display: block;
  padding-right: 14px;
  letter-spacing: -0.01em;
}

.sb-faq--pro .faq-icon{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(47,122,102,0.14);
  border: 1px solid rgba(47,122,102,0.22);
  color: #2f7a66;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}

.sb-faq--pro .faq-q[aria-expanded="true"] .faq-icon{
  transform: translateY(-50%) rotate(0deg);
  background: rgba(47,122,102,0.20);
}

.sb-faq--pro .faq-a{
  max-height: 0;
  overflow: hidden;
  border: 1px solid rgba(15,15,15,0.12);
  border-top: none;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);
  transition: max-height .26s ease;
}

.sb-faq--pro .faq-a-inner{
  padding: 16px 22px 18px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 520;
  color: rgba(10,10,10,0.78);
}

/* Mobile sizing */
@media (max-width: 600px){
  .sb-faq--pro .faq-q{ font-size: 16px; padding: 18px 58px 18px 18px; }
  .sb-faq--pro .faq-a-inner{ padding: 14px 18px 16px; font-size: 15px; }
}
/* ===== FAQ (PRO) – works with your existing markup ===== */

.faq-head{
  max-width: 920px;
  margin: 0 auto 18px;
}

.faq-head h2{
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.faq-sub{
  margin: 0;
  color: rgba(20,20,20,0.68);
  font-size: 16px;
  font-weight: 500;
}

/* keep your parallax background working */
.faq-parallax{
  position: relative;
  overflow: hidden;
}

/* (optional) overlay control — tweak alpha to see background more/less */
.faq-parallax::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.10); /* lower = see bg more */
  pointer-events:none;
  z-index:0;
}

.faq-parallax .wrapper{
  position: relative;
  z-index: 1;
}

.sb-faq-pro{
  max-width: 920px;
  margin: 22px auto 0;
  display: grid;
  gap: 14px;
}

/* QUESTION */
.sb-faq-pro .faq-btn{
  width: 100%;
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(15,15,15,0.14);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(6px);

  padding: 22px 64px 22px 22px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 750;
  color: #111;

  position: relative;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.sb-faq-pro .faq-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
  border-color: rgba(47,122,102,0.30);
}

.sb-faq-pro .faq-btn:focus-visible{
  outline: 3px solid rgba(47,122,102,0.25);
  outline-offset: 2px;
}

/* PLUS PILL */
.sb-faq-pro .faq-plus{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(47,122,102,0.14);
  border: 1px solid rgba(47,122,102,0.22);
  color: #2f7a66;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}

.sb-faq-pro .faq-btn[aria-expanded="true"] .faq-plus{
  background: rgba(47,122,102,0.22);
}

/* ANSWER */
.sb-faq-pro .panel{
  display: block;          /* we animate height instead */
  max-height: 0;
  overflow: hidden;

  border-radius: 18px;
  margin-top: -10px;       /* tucks under the question */
  border: 1px solid rgba(15,15,15,0.12);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);

  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  transition: max-height .26s ease;
}

.sb-faq-pro .panel-inner{
  padding: 16px 22px 18px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 520;
  color: rgba(10,10,10,0.78);
}

/* Mobile */
@media (max-width: 600px){
  .sb-faq-pro .faq-btn{ font-size: 16px; padding: 18px 58px 18px 18px; }
  .sb-faq-pro .panel-inner{ padding: 14px 18px 16px; font-size: 15px; }
}
/* =========================================================
   FAQ PARALLAX SECTION – AdKonnekt style
   ========================================================= */

   .ak-faq-parallax{
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    isolation: isolate;
  }
  
  /* Parallax background layer (GIF) */
  .ak-faq-parallax::before{
    content:"";
    position:absolute;
    inset:-18%;
    background-image: var(--faq-bg, url("media/gear1.png"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.12);
    filter: saturate(1.05) contrast(1.02);
    opacity: .26;
    z-index: -2;
    will-change: transform;
  }
  
  /* Soft overlay to keep text premium + readable */
  .ak-faq-parallax::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
      linear-gradient(180deg, rgba(246,246,244,.92), rgba(246,246,244,.88));
    z-index: -1;
  }
  
  /* Head */
  .sb-faq-head{
    max-width: 760px;
    margin: 0 auto 18px;
    text-align: left;
  }
  .sb-faq-head h2{
    margin: 0 0 8px;
    letter-spacing: -0.02em;
  }
  .sb-faq-head .faq-sub{
    margin: 0;
    opacity: .85;
  }
  
  /* Card container */
  .ak-faq-card{
    max-width: 920px;
    margin: 18px auto 0;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,26,23,.10);
    box-shadow:
      0 18px 40px rgba(15,26,23,.08),
      0 2px 10px rgba(15,26,23,.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
  }
  
  /* FAQ stack */
  .ak-faq{
    display: grid;
  }
  
  /* Question button */
  .ak-faq-q{
    appearance: none;
    border: 0;
    background: transparent;
    padding: 18px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    text-align: left;
    cursor: pointer;
  
    font-weight: 700;
    letter-spacing: -0.01em;
  
    border-top: 1px solid rgba(15,26,23,.08);
    transition: background .25s ease, transform .12s ease;
  }
  .ak-faq-q:first-child{
    border-top: 0;
  }
  .ak-faq-q:hover{
    background: rgba(230,248,245,.55); /* matches your light teal vibe */
  }
  .ak-faq-q:active{
    transform: translateY(1px);
  }
  .ak-faq-q:focus-visible{
    outline: 3px solid rgba(42,111,143,.30);
    outline-offset: 2px;
    border-radius: 12px;
  }
  
  .ak-faq-qtext{
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--ak-ink, #0f1a17);
  }
  
  /* Plus icon (turns into X on open) */
  .ak-faq-icon{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(15,26,23,.14);
    background: rgba(255,255,255,.7);
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: 0 6px 16px rgba(15,26,23,.08);
  }
  .ak-faq-icon::before,
  .ak-faq-icon::after{
    content:"";
    position: absolute;
    width: 14px;
    height: 2px;
    background: rgba(15,26,23,.72);
    border-radius: 2px;
    transition: transform .28s ease, opacity .28s ease;
  }
  .ak-faq-icon::after{
    transform: rotate(90deg);
  }
  
  /* Answer panel (animated height) */
  .ak-faq-a{
    max-height: 0px;
    overflow: hidden;
    transition: max-height .38s ease;
    background: rgba(255,255,255,.55);
  }
  .ak-faq-a-inner{
    padding: 0 18px 18px;
    color: rgba(15,26,23,.82);
    line-height: 1.55;
    font-weight: 500;
  }
  
  /* Open state */
  .ak-faq-q[aria-expanded="true"]{
    background: rgba(230,248,245,.70);
  }
  .ak-faq-q[aria-expanded="true"] .ak-faq-icon::after{
    transform: rotate(0deg);
    opacity: 0; /* plus -> minus -> fades to feel “premium” */
  }
  .ak-faq-q[aria-expanded="true"] .ak-faq-icon::before{
    transform: rotate(45deg);
  }
  .ak-faq-q[aria-expanded="true"] .ak-faq-icon{
    border-color: rgba(42,111,143,.28);
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .ak-faq-parallax::before{ transform: none !important; }
    .ak-faq-a, .ak-faq-q, .ak-faq-icon::before, .ak-faq-icon::after{ transition: none !important; }
  }
  /* =========================================================
   FAQ – per-row brand colouring (hover/open/icon)
   Add AFTER the existing FAQ CSS
   ========================================================= */

/* 1) Assign an accent colour per question row */
.ak-faq .ak-faq-q:nth-of-type(10n+1) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(10n+3) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q:nth-of-type(10n+5) { --faq-accent: var(--ak-mauve); }
.ak-faq .ak-faq-q:nth-of-type(10n+7) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(10n+9) { --faq-accent: var(--ak-olive); }

/* 2) If a panel opens, keep the same accent for its answer block too */
.ak-faq .ak-faq-q + .ak-faq-a { --faq-accent: inherit; }

/* 3) Premium hover wash + open wash using color-mix (with safe fallback) */
.ak-faq-q{
  position: relative;
  background: transparent;
  transition: background .25s ease, transform .12s ease, box-shadow .25s ease;
}

/* subtle left accent bar (optional but looks pro) */
.ak-faq-q::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--faq-accent) 55%, transparent);
  opacity: .0;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateX(-2px);
}

.ak-faq-q:hover{
  background: color-mix(in srgb, var(--faq-accent) 14%, transparent);
  box-shadow: 0 10px 24px rgba(15,26,23,.06);
}
.ak-faq-q:hover::before{
  opacity: .9;
  transform: translateX(0);
}

/* open state */
.ak-faq-q[aria-expanded="true"]{
  background: color-mix(in srgb, var(--faq-accent) 18%, transparent);
}
.ak-faq-q[aria-expanded="true"]::before{
  opacity: 1;
  transform: translateX(0);
}

/* 4) Icon ring + glow uses the row accent */
.ak-faq-q .ak-faq-icon{
  border-color: color-mix(in srgb, var(--faq-accent) 42%, rgba(15,26,23,.14));
  background: color-mix(in srgb, var(--faq-accent) 7%, rgba(255,255,255,.75));
  box-shadow:
    0 10px 22px rgba(15,26,23,.08),
    0 0 0 6px color-mix(in srgb, var(--faq-accent) 10%, transparent);
}
.ak-faq-q[aria-expanded="true"] .ak-faq-icon{
  box-shadow:
    0 12px 26px rgba(15,26,23,.10),
    0 0 0 7px color-mix(in srgb, var(--faq-accent) 14%, transparent);
}

/* 5) Answer background picks up the same accent (very subtle) */
.ak-faq-a{
  background: color-mix(in srgb, var(--faq-accent) 7%, rgba(255,255,255,.55));
}

/* 6) Fallback for older browsers without color-mix */
@supports not (background: color-mix(in srgb, white 10%, transparent)) {
  .ak-faq-q:hover{ background: rgba(105,150,130,.12); }          /* teal default */
  .ak-faq-q[aria-expanded="true"]{ background: rgba(105,150,130,.16); }
  .ak-faq-a{ background: rgba(105,150,130,.06); }
}
/* =========================================================
   FAQ – fixed colour per row, lighten on open
   ========================================================= */

/* 1) Assign a permanent accent colour per FAQ row */
.ak-faq .ak-faq-q:nth-of-type(1) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(2) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q:nth-of-type(3) { --faq-accent: var(--ak-mauve); }
.ak-faq .ak-faq-q:nth-of-type(4) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(5) { --faq-accent: var(--ak-olive); }

/* ensure answer panels inherit the same colour */
.ak-faq .ak-faq-q + .ak-faq-a {
  --faq-accent: inherit;
}

/* 2) Base (closed) state — colour is ALWAYS present */
.ak-faq-q{
  position: relative;
  background: color-mix(in srgb, var(--faq-accent) 12%, white);
  transition: background .25s ease, box-shadow .25s ease;
}

/* subtle left colour rail */
.ak-faq-q::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 99px;
  background: var(--faq-accent);
  opacity: .9;
}

/* no colour shift on hover — just depth */
.ak-faq-q:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}

/* 3) Open state — SAME colour, lighter */
.ak-faq-q[aria-expanded="true"]{
  background: color-mix(in srgb, var(--faq-accent) 22%, white);
}

/* 4) Icon styling — always coloured, softens when open */
.ak-faq-q .ak-faq-icon{
  border-color: var(--faq-accent);
  background: color-mix(in srgb, var(--faq-accent) 10%, white);
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 6px color-mix(in srgb, var(--faq-accent) 18%, transparent);
}

.ak-faq-q[aria-expanded="true"] .ak-faq-icon{
  background: color-mix(in srgb, var(--faq-accent) 18%, white);
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 0 0 8px color-mix(in srgb, var(--faq-accent) 26%, transparent);
}

/* 5) Answer panel — gentle tint, no harsh blocks */
.ak-faq-a{
  background: color-mix(in srgb, var(--faq-accent) 8%, white);
}
/* =========================================================
   FAQ – Answer reveal: richer, editorial, non-boring
   ========================================================= */

   .ak-faq-a{
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--faq-accent) 10%, white),
        color-mix(in srgb, var(--faq-accent) 6%, white)
      );
    border-top: 1px solid color-mix(in srgb, var(--faq-accent) 18%, transparent);
  }
  
  /* inner content styling */
  .ak-faq-a-inner{
    position: relative;
    padding: 18px 22px 20px 26px;
  
    font-size: 0.98rem;
    line-height: 1.6;
    font-weight: 500;
    color: color-mix(in srgb, var(--ak-dark) 85%, black);
  
    /* subtle depth so it doesn’t feel flat */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6);
  }
  
  /* soft vertical accent to anchor the answer */
  .ak-faq-a-inner::before{
    content:"";
    position:absolute;
    left: 12px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--faq-accent) 55%, transparent);
    opacity: .7;
  }
  
  /* optional: give the first line a little authority */
  .ak-faq-q[aria-expanded="true"] + .ak-faq-a .ak-faq-a-inner{
    letter-spacing: -0.005em;
  }
  
  /* mobile tuning */
  @media (max-width: 640px){
    .ak-faq-a-inner{
      font-size: 0.95rem;
      padding: 16px 18px 18px 22px;
    }
  }
  .ak-faq-parallax::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(
        900px 520px at 20% 15%,
        rgba(255,255,255,.35),
        rgba(255,255,255,0) 60%
      ),
      linear-gradient(
        180deg,
        rgba(246,246,244,.78),
        rgba(246,246,244,.72)
      );
    z-index: -1;
  }
  /* =========================================================
   PLATFORMS WE WORK WITH — "Typed Systems" Reveal
   Paste into your main stylesheet
   ========================================================= */

:root{
  /* If you already have tokens, keep yours — these are safe fallbacks */
  --ak-bg: #f6f3ec;
  --ak-card: rgba(255,255,255,0.86);
  --ak-ink: #141414;
  --ak-muted: rgba(20,20,20,0.68);
  --ak-line: rgba(20,20,20,0.12);
  --ak-shadow: 0 18px 45px rgba(0,0,0,0.08);

  /* Optional accent (swap to your palette if you want) */
  --ak-accent: #699682;
}

.ak-platforms{
  background: var(--ak-bg);
  padding: 70px 0 80px;
}

.ak-platforms__wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
}

.ak-platforms__head{
  max-width: 820px;
  margin: 0 auto 26px;
}

.ak-platforms__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ak-ink);
}

.ak-platforms__sub{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ak-muted);
}

.ak-platforms__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 860px){
  .ak-platforms{
    padding: 54px 0 62px;
  }
  .ak-platforms__grid{
    grid-template-columns: 1fr;
  }
}

/* Cards */
.ak-platform-card{
  position: relative;
  border-radius: 18px;
  padding: 22px 22px 18px;
  background: var(--ak-card);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--ak-shadow);
  overflow: hidden;

  /* Entrance */
  opacity: 0;
  transform: translateY(16px);
  animation: akCardIn 650ms cubic-bezier(.2,.8,.2,1) forwards;
}

.ak-platform-card:nth-child(2){
  animation-delay: 120ms;
}

/* Subtle “system grid” texture */
.ak-platform-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.12;
  mask-image: radial-gradient(circle at 30% 20%, #000 0 52%, transparent 78%);
}

/* Top accent line */
.ak-platform-card::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(105,150,130,0.0), rgba(105,150,130,0.8), rgba(105,150,130,0.0));
  opacity: 0.65;
}

.ak-platform-card__title{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}

/* List */
.ak-platform-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ak-platform-list li{
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(20,20,20,0.78);

  /* line reveal */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: akLineReveal 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* dot bullet */
.ak-platform-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(105,150,130,0.9);
  box-shadow: 0 0 0 3px rgba(105,150,130,0.15);
}

/* Stagger bullets per card */
.ak-platform-card:nth-child(1) .ak-platform-list li:nth-child(1){ animation-delay: 240ms; }
.ak-platform-card:nth-child(1) .ak-platform-list li:nth-child(2){ animation-delay: 330ms; }
.ak-platform-card:nth-child(1) .ak-platform-list li:nth-child(3){ animation-delay: 420ms; }
.ak-platform-card:nth-child(1) .ak-platform-list li:nth-child(4){ animation-delay: 510ms; }

.ak-platform-card:nth-child(2) .ak-platform-list li:nth-child(1){ animation-delay: 360ms; }
.ak-platform-card:nth-child(2) .ak-platform-list li:nth-child(2){ animation-delay: 450ms; }
.ak-platform-card:nth-child(2) .ak-platform-list li:nth-child(3){ animation-delay: 540ms; }
.ak-platform-card:nth-child(2) .ak-platform-list li:nth-child(4){ animation-delay: 630ms; }

/* Title “wipe” (subtle) */
.ak-title-reveal{
  display: inline-block;
  position: relative;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: akTitleReveal 650ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes akTitleReveal{
  to{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes akCardIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes akLineReveal{
  to{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ak-platform-card,
  .ak-platform-list li,
  .ak-title-reveal{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* =========================================================
   ROTATING "DROPPING WORDS" — AdKonnekt-friendly version
   No body overrides. No flashing backgrounds.
   ========================================================= */

   :root{
    /* Use your palette tokens if you already have them */
    --ak-ink: #141414;
    --ak-muted: rgba(20,20,20,0.68);
    --ak-accent: #699682;
  
    /* Optional: swap these to your exact palette values */
    --ak-olive:  #939669;
    --ak-teal:   #699682;
    --ak-mauve:  #96697D;
  }
  
  /* Layout for the animated lines */
  .ak-rotator-lines{
    margin-top: 10px;
    display: grid;
    gap: 8px;
  }
  
  .ak-rotator-line{
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ak-muted);
  }
  
  /* The rotating word slot */
  .ak-rotator{
    --h: 1.2em;          /* slot height */
    --dur: 10s;          /* total cycle duration */
    --ease: cubic-bezier(.2,.8,.2,1);
  
    display: inline-block;
    position: relative;
    height: var(--h);
    vertical-align: -0.2em;
    margin-left: 8px;
    min-width: 10ch;     /* keeps line from “jumping” too much */
  }
  
  /* Each word (stacked on top of each other) */
  .ak-rotator > span{
    position: absolute;
    left: 0;
    top: 0;
  
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ak-ink);
  
    opacity: 0;
    transform: translateY(-0.55em) rotate(-10deg);
    filter: blur(0.2px);
  
    /* subtle “chip” feel */
    padding: 1px 10px 2px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.65);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  
    animation: akDropWord var(--dur) var(--ease) infinite;
    will-change: transform, opacity;
  }
  
  /* Give each rotator its own accent tint (optional) */
  .ak-rotator--platforms > span{
    box-shadow: 0 10px 28px rgba(147,150,105,0.16);
  }
  .ak-rotator--tools > span{
    box-shadow: 0 10px 28px rgba(105,150,130,0.16);
  }
  
  /* Stagger each word with delay so they take turns */
  .ak-rotator--platforms > span:nth-child(1){ animation-delay: calc(var(--dur) * 0/5); color: var(--ak-teal); }
  .ak-rotator--platforms > span:nth-child(2){ animation-delay: calc(var(--dur) * 1/5); color: var(--ak-olive); }
  .ak-rotator--platforms > span:nth-child(3){ animation-delay: calc(var(--dur) * 2/5); color: var(--ak-mauve); }
  .ak-rotator--platforms > span:nth-child(4){ animation-delay: calc(var(--dur) * 3/5); color: var(--ak-teal); }
  .ak-rotator--platforms > span:nth-child(5){ animation-delay: calc(var(--dur) * 4/5); color: var(--ak-olive); }
  
  /* Tools list (6 items) */
  .ak-rotator--tools{ --dur: 12s; } /* slightly longer cycle */
  .ak-rotator--tools > span:nth-child(1){ animation-delay: calc(var(--dur) * 0/6); color: var(--ak-teal); }
  .ak-rotator--tools > span:nth-child(2){ animation-delay: calc(var(--dur) * 1/6); color: var(--ak-olive); }
  .ak-rotator--tools > span:nth-child(3){ animation-delay: calc(var(--dur) * 2/6); color: var(--ak-mauve); }
  .ak-rotator--tools > span:nth-child(4){ animation-delay: calc(var(--dur) * 3/6); color: var(--ak-teal); }
  .ak-rotator--tools > span:nth-child(5){ animation-delay: calc(var(--dur) * 4/6); color: var(--ak-olive); }
  .ak-rotator--tools > span:nth-child(6){ animation-delay: calc(var(--dur) * 5/6); color: var(--ak-mauve); }
  
  /* The motion: drop in, hold, then drop out */
  @keyframes akDropWord{
    0%{
      opacity: 0;
      transform: translateY(-0.65em) rotate(-10deg);
    }
    10%{
      opacity: 1;
      transform: translateY(0) rotate(0deg);
    }
    35%{
      opacity: 1;
      transform: translateY(0) rotate(0deg);
    }
    50%{
      opacity: 0;
      transform: translateY(0.85em) rotate(10deg);
    }
    100%{
      opacity: 0;
      transform: translateY(-0.65em) rotate(-10deg);
    }
  }
  
  /* Visually-hidden helper */
  .sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    .ak-rotator > span{
      animation: none !important;
      opacity: 1 !important;
      position: static !important;
      transform: none !important;
      display: inline-block !important;
      margin-left: 8px;
    }
    .ak-rotator{
      height: auto;
    }
  }
  /* =========================================================
   BIG ROTATOR — Make it POP (no pills)
   ========================================================= */

.ak-hero-rotator{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.ak-hero-line{
  margin: 0;
  /* make it headline-ish */
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(20,20,20,0.78);
}

/* Rotator slot */
.ak-word-rotator{
  --h: 1.1em;
  --dur: 10s;
  --ease: cubic-bezier(.2,.85,.2,1);

  display: inline-block;
  position: relative;
  height: var(--h);
  vertical-align: -0.12em;
  margin-left: 10px;

  /* prevents layout jump */
  min-width: 9ch;
}

/* Rotating word style = the “pop” */
.ak-word-rotator > span{
  position: absolute;
  left: 0;
  top: 0;

  opacity: 0;
  transform: translateY(-0.6em) rotate(-8deg);
  animation: akDropBig var(--dur) var(--ease) infinite;

  /* the punch */
  font-family: "Playfair Display", serif; /* or your title font */
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #141414;

  /* highlight bar (NOT a pill) */
  padding: 0 2px;
  background:
    linear-gradient(to top,
      rgba(105,150,130,0.22) 0%,
      rgba(105,150,130,0.22) 55%,
      transparent 55%);
  border-radius: 6px;

  /* subtle depth, not cheesy */
  text-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* different accent tints per set */
.ak-word-rotator--platforms > span{
  background:
    linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
}

.ak-word-rotator--tools{
  --dur: 12s;
}
.ak-word-rotator--tools > span{
  background:
    linear-gradient(to top,
      rgba(150,105,125,0.22) 0%,
      rgba(150,105,125,0.22) 55%,
      transparent 55%);
}

/* Stagger delays (platforms: 5 items) */
.ak-word-rotator--platforms > span:nth-child(1){ animation-delay: calc(var(--dur) * 0/5); }
.ak-word-rotator--platforms > span:nth-child(2){ animation-delay: calc(var(--dur) * 1/5); }
.ak-word-rotator--platforms > span:nth-child(3){ animation-delay: calc(var(--dur) * 2/5); }
.ak-word-rotator--platforms > span:nth-child(4){ animation-delay: calc(var(--dur) * 3/5); }
.ak-word-rotator--platforms > span:nth-child(5){ animation-delay: calc(var(--dur) * 4/5); }

/* Tools: 6 items */
.ak-word-rotator--tools > span:nth-child(1){ animation-delay: calc(var(--dur) * 0/6); }
.ak-word-rotator--tools > span:nth-child(2){ animation-delay: calc(var(--dur) * 1/6); }
.ak-word-rotator--tools > span:nth-child(3){ animation-delay: calc(var(--dur) * 2/6); }
.ak-word-rotator--tools > span:nth-child(4){ animation-delay: calc(var(--dur) * 3/6); }
.ak-word-rotator--tools > span:nth-child(5){ animation-delay: calc(var(--dur) * 4/6); }
.ak-word-rotator--tools > span:nth-child(6){ animation-delay: calc(var(--dur) * 5/6); }

/* Drop in -> hold -> drop out */
@keyframes akDropBig{
  0%   { opacity: 0; transform: translateY(-0.65em) rotate(-10deg); }
  10%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  40%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  55%  { opacity: 0; transform: translateY(0.85em) rotate(10deg); }
  100% { opacity: 0; transform: translateY(-0.65em) rotate(-10deg); }
}

/* Make your existing subcopy slightly calmer so the rotator leads */
.ak-platforms__sub{
  margin-top: 14px;
  max-width: 820px;
  color: rgba(20,20,20,0.60);
}

/* sr-only helper */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (prefers-reduced-motion: reduce){
  .ak-word-rotator > span{
    animation:none !important;
    opacity:1 !important;
    position:static !important;
    transform:none !important;
    display:inline-block !important;
    margin-left:10px;
  }
  .ak-word-rotator{ height:auto; }
}
/* Rotator slot */
.ak-word-rotator{
  --h: 1.15em;
  --dur: 10s;
  --ease: cubic-bezier(.2,.85,.2,1);

  display: inline-block;
  position: relative;
  height: var(--h);
  line-height: var(--h);
  vertical-align: -0.12em;
  margin-left: 10px;
  min-width: 9ch;

  /* IMPORTANT: prevents overlap outside the slot */
  overflow: hidden;
}

/* Each rotating word */
.ak-word-rotator > span{
  position: absolute;
  left: 0;
  top: 0;

  pointer-events: none;

  opacity: 0;
  transform: translateY(-120%) rotate(-6deg);
  animation: akDropOneAtATime var(--dur) var(--ease) infinite;

  font-family: "Playfair Display", serif;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #141414;

  padding: 0 2px;
  border-radius: 6px;

  /* highlight bar */
  background:
    linear-gradient(to top,
      rgba(105,150,130,0.22) 0%,
      rgba(105,150,130,0.22) 55%,
      transparent 55%);
}

/* Accent variants */
.ak-word-rotator--platforms > span{
  background:
    linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
}
.ak-word-rotator--tools{
  --dur: 12s;
}
.ak-word-rotator--tools > span{
  background:
    linear-gradient(to top,
      rgba(150,105,125,0.22) 0%,
      rgba(150,105,125,0.22) 55%,
      transparent 55%);
}

/* ONE-AT-A-TIME timing:
   - in quickly (0–10%)
   - hold (10–38%)
   - drop out FAST (38–45%)
   - fully gone before next word’s 10% hits due to stagger
*/
@keyframes akDropOneAtATime{
  0%   { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
  8%   { opacity: 1; transform: translateY(0%) rotate(0deg); }
  38%  { opacity: 1; transform: translateY(0%) rotate(0deg); }
  45%  { opacity: 0; transform: translateY(140%) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
}
@keyframes akDropOneAtATime{
  0%   { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
  8%   { opacity: 1; transform: translateY(0%) rotate(0deg); }
  32%  { opacity: 1; transform: translateY(0%) rotate(0deg); }
  40%  { opacity: 0; transform: translateY(140%) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
}
@keyframes akDropOneAtATime{
  0%   { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
  5%   { opacity: 1; transform: translateY(0%) rotate(0deg); }
  13%  { opacity: 1; transform: translateY(0%) rotate(0deg); }
  16%  { opacity: 0; transform: translateY(140%) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
}
/* Rotator slot */
.ak-word-rotator{
  --h: 1.15em;
  --dur: 10s;
  --ease: cubic-bezier(.2,.85,.2,1);

  display: inline-block;
  position: relative;
  height: var(--h);
  line-height: var(--h);
  vertical-align: -0.12em;
  margin-left: 10px;
  min-width: 9ch;

  /* IMPORTANT: prevents overlap outside the slot */
  overflow: hidden;
}

/* Each rotating word */
.ak-word-rotator > span{
  position: absolute;
  left: 0;
  top: 0;

  pointer-events: none;

  opacity: 0;
  transform: translateY(-120%) rotate(-6deg);
  animation: akDropOneAtATime var(--dur) var(--ease) infinite;

  font-family: "Playfair Display", serif;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #141414;

  padding: 0 2px;
  border-radius: 6px;

  /* highlight bar */
  background:
    linear-gradient(to top,
      rgba(105,150,130,0.22) 0%,
      rgba(105,150,130,0.22) 55%,
      transparent 55%);
}

/* Accent variants */
.ak-word-rotator--platforms > span{
  background:
    linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
}
.ak-word-rotator--tools{
  --dur: 12s;
}
.ak-word-rotator--tools > span{
  background:
    linear-gradient(to top,
      rgba(150,105,125,0.22) 0%,
      rgba(150,105,125,0.22) 55%,
      transparent 55%);
}

/* ONE-AT-A-TIME timing:
   - in quickly (0–10%)
   - hold (10–38%)
   - drop out FAST (38–45%)
   - fully gone before next word’s 10% hits due to stagger
*/
@keyframes akDropOneAtATime{
  0%   { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
  8%   { opacity: 1; transform: translateY(0%) rotate(0deg); }
  38%  { opacity: 1; transform: translateY(0%) rotate(0deg); }
  45%  { opacity: 0; transform: translateY(140%) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
}
@keyframes akDropOneAtATime{
  0%   { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
  8%   { opacity: 1; transform: translateY(0%) rotate(0deg); }
  32%  { opacity: 1; transform: translateY(0%) rotate(0deg); }
  40%  { opacity: 0; transform: translateY(140%) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-120%) rotate(-6deg); }
}
/* =========================================================
   ZERO-OVERLAP ROTATOR (track-based, clipped slot)
   ========================================================= */

.ak-hero-line{
  margin: 0;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(20,20,20,0.78);
}

/* the visible “slot” */
.ak-rot{
  --h: 1.15em;         /* slot height */
  --n: 5;              /* number of words (set inline) */
  --dur: 10s;          /* duration (set inline) */

  display: inline-block;
  position: relative;
  height: var(--h);
  line-height: var(--h);
  overflow: hidden;            /* KEY: nothing outside shows */
  vertical-align: -0.12em;
  margin-left: 10px;
  min-width: 10ch;             /* reduce layout jump */
}

/* the moving stack */
.ak-rot__track{
  display: block;
  will-change: transform;
  animation: akRotY var(--dur) steps(var(--n)) infinite;
}

/* each word row */
.ak-rot__word{
  display: flex;
  align-items: center;
  height: var(--h);

  /* POP styling */
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #141414;

  /* highlight bar (not a pill) */
  padding: 0 2px;
  border-radius: 6px;
  background:
    linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
}

/* Tools tint */
.ak-rot--tools .ak-rot__word{
  background:
    linear-gradient(to top,
      rgba(150,105,125,0.22) 0%,
      rgba(150,105,125,0.22) 55%,
      transparent 55%);
}

/* Move up exactly 1 word-height per step */
@keyframes akRotY{
  to { transform: translateY(calc(var(--n) * var(--h) * -1)); }
}

/* Reduced motion: show first word only */
@media (prefers-reduced-motion: reduce){
  .ak-rot__track{ animation: none !important; }
}
/* ================================
   WORD ROTATOR — no overlap timing
   Faster exit, later entry, hard clip
   Works with your markup:
   .ak-word-rotator > span (each word)
   ================================ */

/* 1) The “window” that clips the words */
.ak-word-rotator{
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;

  /* lock a consistent height so words never stack */
  line-height: 1.05;
  height: 1.05em;

  /* optional: a tiny padding so tall letters don’t clip */
  padding: 0.05em 0;
}

/* 2) All words sit on top of each other, animation handles visibility */
.ak-word-rotator > span{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(115%);         /* start below */
  will-change: transform, opacity;
  pointer-events: none;

  animation-name: akRotWord;
  animation-timing-function: cubic-bezier(.2,.9,.2,1);
  animation-iteration-count: infinite;
}

/* 3) Keyframes: enter -> hold -> EXIT EARLY/FAST -> stay hidden */
@keyframes akRotWord{
  /* hidden below */
  0%   { opacity: 0; transform: translateY(115%); }

  /* enter */
  10%  { opacity: 1; transform: translateY(0%); }

  /* hold */
  52%  { opacity: 1; transform: translateY(0%); }

  /* exit (faster + earlier so next never overlaps) */
  66%  { opacity: 0; transform: translateY(-115%); }

  /* remain hidden above until next cycle */
  100% { opacity: 0; transform: translateY(-115%); }
}

/* ================================
   PLATFORM ROTATOR (5 words)
   ================================ */

.ak-word-rotator--platforms{ --step: 1.15s; } /* tweak 1.0–1.3s */
.ak-word-rotator--platforms > span{ animation-duration: calc(var(--step) * 5); }

.ak-word-rotator--platforms > span:nth-child(1){ animation-delay: calc(var(--step) * 0); }
.ak-word-rotator--platforms > span:nth-child(2){ animation-delay: calc(var(--step) * 1); }
.ak-word-rotator--platforms > span:nth-child(3){ animation-delay: calc(var(--step) * 2); }
.ak-word-rotator--platforms > span:nth-child(4){ animation-delay: calc(var(--step) * 3); }
.ak-word-rotator--platforms > span:nth-child(5){ animation-delay: calc(var(--step) * 4); }

/* ================================
   TOOLS ROTATOR (6 words)
   ================================ */

.ak-word-rotator--tools{ --step: 1.15s; } /* tweak 1.0–1.3s */
.ak-word-rotator--tools > span{ animation-duration: calc(var(--step) * 6); }

.ak-word-rotator--tools > span:nth-child(1){ animation-delay: calc(var(--step) * 0); }
.ak-word-rotator--tools > span:nth-child(2){ animation-delay: calc(var(--step) * 1); }
.ak-word-rotator--tools > span:nth-child(3){ animation-delay: calc(var(--step) * 2); }
.ak-word-rotator--tools > span:nth-child(4){ animation-delay: calc(var(--step) * 3); }
.ak-word-rotator--tools > span:nth-child(5){ animation-delay: calc(var(--step) * 4); }
.ak-word-rotator--tools > span:nth-child(6){ animation-delay: calc(var(--step) * 5); }
/* ================================
   AK WORD ROTATOR — NO OVERLAP
   ================================ */

   .ak-hero-rotator {
    margin-top: 12px;
  }
  
  .ak-hero-line {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 6px 0;
    position: relative;
  }
  
  /* ROTATOR SLOT */
  .ak-word-rotator {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    height: 1.25em;
    line-height: 1.25em;
    vertical-align: baseline;
    min-width: 9ch;
  }
  
  /* WORDS */
  .ak-word-rotator > span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(-120%);
    white-space: nowrap;
    will-change: transform, opacity;
    animation-name: ak-drop-rotate;
    animation-timing-function: cubic-bezier(.25,.9,.25,1);
    animation-iteration-count: infinite;
  }
  
  /* PLATFORM TIMING (5 words) */
  .ak-word-rotator--platforms > span {
    animation-duration: 10s;
  }
  .ak-word-rotator--platforms > span:nth-child(1) { animation-delay: 0s; }
  .ak-word-rotator--platforms > span:nth-child(2) { animation-delay: 2s; }
  .ak-word-rotator--platforms > span:nth-child(3) { animation-delay: 4s; }
  .ak-word-rotator--platforms > span:nth-child(4) { animation-delay: 6s; }
  .ak-word-rotator--platforms > span:nth-child(5) { animation-delay: 8s; }
  
  /* TOOLS TIMING (6 words) */
  .ak-word-rotator--tools > span {
    animation-duration: 12s;
  }
  .ak-word-rotator--tools > span:nth-child(1) { animation-delay: 0s; }
  .ak-word-rotator--tools > span:nth-child(2) { animation-delay: 2s; }
  .ak-word-rotator--tools > span:nth-child(3) { animation-delay: 4s; }
  .ak-word-rotator--tools > span:nth-child(4) { animation-delay: 6s; }
  .ak-word-rotator--tools > span:nth-child(5) { animation-delay: 8s; }
  .ak-word-rotator--tools > span:nth-child(6) { animation-delay: 10s; }
  
  /* KEYFRAMES — ZERO OVERLAP GUARANTEED */
  @keyframes ak-drop-rotate {
    /* hidden above */
    0% {
      opacity: 0;
      transform: translateY(-120%);
    }
  
    /* drop in */
    8% {
      opacity: 1;
      transform: translateY(0);
    }
  
    /* hold */
    28% {
      opacity: 1;
      transform: translateY(0);
    }
  
    /* EXIT FAST — THIS IS THE KEY */
    36% {
      opacity: 0;
      transform: translateY(140%);
    }
  
    /* stay dead until next cycle */
    100% {
      opacity: 0;
      transform: translateY(140%);
    }
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .ak-word-rotator > span {
      animation: none !important;
      position: static;
      opacity: 1;
    }
  }
  /* 5 words => 10s cycle => step = 2s = 20% */
@keyframes ak-rotate-5 {
  0%   { opacity: 0; transform: translateY(-120%); }
  4%   { opacity: 1; transform: translateY(0); }      /* drop in */
  16%  { opacity: 1; transform: translateY(0); }      /* hold */
  20%  { opacity: 0; transform: translateY(140%); }   /* drop out (handoff starts) */
  24%  { opacity: 0; transform: translateY(140%); }   /* fully gone */
  100% { opacity: 0; transform: translateY(140%); }   /* stay dead */
}

/* 6 words => 12s cycle => step = 2s = 16.666% */
@keyframes ak-rotate-6 {
  0%     { opacity: 0; transform: translateY(-120%); }
  4%     { opacity: 1; transform: translateY(0); }
  13%    { opacity: 1; transform: translateY(0); }
  16.666%{ opacity: 0; transform: translateY(140%); }
  20%    { opacity: 0; transform: translateY(140%); }
  100%   { opacity: 0; transform: translateY(140%); }
}
/* keep your existing base rules for .ak-word-rotator > span, but change animation-name */

.ak-word-rotator--platforms > span {
  animation-name: ak-rotate-5;
  animation-duration: 10s;
  animation-timing-function: cubic-bezier(.25,.9,.25,1);
  animation-iteration-count: infinite;
}

.ak-word-rotator--tools > span {
  animation-name: ak-rotate-6;
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.25,.9,.25,1);
  animation-iteration-count: infinite;
}
/* ROTATOR WINDOW — make it wide enough for longest word */
.ak-word-rotator{
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  height:1.15em;
  margin-left:.35em;

  /* IMPORTANT: reserve space so words never clip */
  min-width: var(--ak-rotator-min, 12ch);

  /* keep the “window” tidy but not clipping text */
  overflow: visible;
}

.ak-word-rotator > span{
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap; /* prevents chopping via wrap */
}

/* tune per rotator */
.ak-word-rotator--platforms{ --ak-rotator-min: 14ch; } /* WooCommerce / Squarespace */
.ak-word-rotator--tools{ --ak-rotator-min: 10ch; }     /* Mailchimp / Calendly */
/* ================================
   PLATFORM STATEMENT BLOCK
   ================================ */

   .ak-platforms__statement {
    margin: 28px 0 18px;
    padding: 24px 0;
    text-align: center;
  }
  
  /* BIG LINE */
  .ak-hero-line--big {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.25;
    font-weight: 500;
    margin: 12px 0;
    color: #1f1f1f;
  }
  
  /* mobile breathing room */
  @media (max-width: 720px) {
    .ak-hero-line--big {
      font-size: clamp(1.6rem, 6vw, 2rem);
    }
  }
  /* ================================
   ROTATING WORD – EMPHASIS
   ================================ */

.ak-word-rotator {
  margin-left: 0.4em;
  min-width: 15ch; /* keep from jumping */
}

/* the word itself */
.ak-word-rotator > span {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a3f36; /* deep green from your palette */
}

/* optional soft highlight */
.ak-word-rotator > span::after {
  content: "";
  position: absolute;
  inset: 65% -0.15em 5% -0.15em;
  background: rgba(105, 150, 130, 0.18); /* muted teal */
  z-index: -1;
  border-radius: 6px;
}
/* =========================================================
   PLATFORMS — BANNER MOMENT + ROTATOR (PRO VERSION)
   ========================================================= */

.ak-platforms--banner {
  position: relative;
  padding: clamp(56px, 6vw, 92px) 0 clamp(44px, 5vw, 72px);
  /* subtle “moment” without changing your page bg */
  background:
    radial-gradient(900px 260px at 50% 10%, rgba(105,150,130,.12), rgba(0,0,0,0) 60%),
    radial-gradient(900px 260px at 50% 90%, rgba(147,150,105,.10), rgba(0,0,0,0) 60%);
}

.ak-platforms--banner::before,
.ak-platforms--banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(0,0,0,.06);
}

.ak-platforms--banner::before { top: 0; }
.ak-platforms--banner::after  { bottom: 0; }

.ak-platforms__head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.ak-platforms__eyebrow {
  margin: 0 0 18px;
  font-family: var(--ak-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.52);
}

.ak-platforms__hero {
  margin: 0 auto 16px;
}

.ak-hero-line {
  margin: 0;
  line-height: 1.05;
  color: rgba(0,0,0,.88);
  /* keep it “site-consistent” but bolder */
  font-family: var(--ak-serif, "Playfair Display", Georgia, serif);
  font-weight: 700;
}

.ak-hero-line--primary {
  font-size: clamp(34px, 4.2vw, 54px);
  margin-bottom: 10px;
}

.ak-hero-line--secondary {
  font-size: clamp(26px, 3.2vw, 42px);
  opacity: .92;
}

.ak-platforms__sub {
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0,0,0,.60);
}

/* =========================
   ROTATOR WINDOW (NO CUT-OFF)
   ========================= */

.ak-word-rotator {
  /* window width is controlled via --rw (set inline in HTML) */
  display: inline-grid;
  vertical-align: baseline;
  position: relative;
  width: var(--rw, 12ch);
  margin-left: .35em;
  padding: .08em .18em; /* breathing room */
}

/* each word occupies the same “window” */
.ak-word-rotator > span {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: center;

  position: relative;
  padding: .06em .22em .10em;
  border-radius: 12px;

  /* the confident highlight (less glow, more structure) */
  color: rgba(0,0,0,.84);
  background: rgba(105,150,130,.18);
  box-shadow:
    0 10px 18px rgba(0,0,0,.06),
    inset 0 -1px 0 rgba(0,0,0,.10);

  /* animation */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1px);

  animation: akDropSwap var(--dur, 7.5s) infinite;
  will-change: transform, opacity, filter;
}

/* alternate tint for tools so it’s not samey */
.ak-word-rotator--tools > span {
  background: rgba(150,105,125,.18); /* mauve tint */
}

/* Drop in + drop out at the same time (crossfade) */
@keyframes akDropSwap {
  0%   { opacity: 0; transform: translateY(12px); filter: blur(2px); }
  8%   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  28%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  36%  { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
  100% { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
}

/* stagger each word so one is always swapping in as another swaps out */
.ak-word-rotator > span:nth-child(1) { animation-delay: calc((var(--dur, 7.5s) / 6) * 0 * -1); }
.ak-word-rotator > span:nth-child(2) { animation-delay: calc((var(--dur, 7.5s) / 6) * 1 * -1); }
.ak-word-rotator > span:nth-child(3) { animation-delay: calc((var(--dur, 7.5s) / 6) * 2 * -1); }
.ak-word-rotator > span:nth-child(4) { animation-delay: calc((var(--dur, 7.5s) / 6) * 3 * -1); }
.ak-word-rotator > span:nth-child(5) { animation-delay: calc((var(--dur, 7.5s) / 6) * 4 * -1); }
.ak-word-rotator > span:nth-child(6) { animation-delay: calc((var(--dur, 7.5s) / 6) * 5 * -1); }

/* responsive: keep the hero from wrapping too awkwardly */
@media (max-width: 540px) {
  .ak-word-rotator { width: var(--rw, 12ch); }
  .ak-hero-line--primary { line-height: 1.08; }
  .ak-hero-line--secondary { line-height: 1.10; }
}
/* Replace the old keyframes with this tight, overlap-proof version */
@keyframes akDropSwap {
  /* hidden */
  0%   { opacity: 0; transform: translateY(12px); filter: blur(2px); }
  /* in */
  5%   { opacity: 1; transform: translateY(0);  filter: blur(0); }
  /* hold (short + clean) */
  13%  { opacity: 1; transform: translateY(0);  filter: blur(0); }
  /* out */
  16%  { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
  /* stay hidden for the remainder */
  100% { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
}
/* IMPORTANT: delays must match item count */

/* Ecommerce platforms = 8 items */
.ak-word-rotator--platforms > span:nth-child(1) { animation-delay: calc((var(--dur, 18s) / 9) * 0 * -1); }
.ak-word-rotator--platforms > span:nth-child(2) { animation-delay: calc((var(--dur, 18s) / 9) * 1 * -1); }
.ak-word-rotator--platforms > span:nth-child(3) { animation-delay: calc((var(--dur, 18s) / 9) * 2 * -1); }
.ak-word-rotator--platforms > span:nth-child(4) { animation-delay: calc((var(--dur, 18s) / 9) * 3 * -1); }
.ak-word-rotator--platforms > span:nth-child(5) { animation-delay: calc((var(--dur, 18s) / 9) * 4 * -1); }
.ak-word-rotator--platforms > span:nth-child(6) { animation-delay: calc((var(--dur, 18s) / 9) * 5 * -1); }
.ak-word-rotator--platforms > span:nth-child(7) { animation-delay: calc((var(--dur, 18s) / 9) * 6 * -1); }
.ak-word-rotator--platforms > span:nth-child(8) { animation-delay: calc((var(--dur, 18s) / 9) * 7 * -1); }
.ak-word-rotator--platforms > span:nth-child(9) { animation-delay: calc((var(--dur, 18s) / 9) * 8 * -1); }

/* Tools = 14 items */
.ak-word-rotator--tools > span:nth-child(1)  { animation-delay: calc((var(--dur, 18s) / 14) * 0  * -1); }
.ak-word-rotator--tools > span:nth-child(2)  { animation-delay: calc((var(--dur, 18s) / 14) * 1  * -1); }
.ak-word-rotator--tools > span:nth-child(3)  { animation-delay: calc((var(--dur, 18s) / 14) * 2  * -1); }
.ak-word-rotator--tools > span:nth-child(4)  { animation-delay: calc((var(--dur, 18s) / 14) * 3  * -1); }
.ak-word-rotator--tools > span:nth-child(5)  { animation-delay: calc((var(--dur, 18s) / 14) * 4  * -1); }
.ak-word-rotator--tools > span:nth-child(6)  { animation-delay: calc((var(--dur, 18s) / 14) * 5  * -1); }
.ak-word-rotator--tools > span:nth-child(7)  { animation-delay: calc((var(--dur, 18s) / 14) * 6  * -1); }
.ak-word-rotator--tools > span:nth-child(8)  { animation-delay: calc((var(--dur, 18s) / 14) * 7  * -1); }
.ak-word-rotator--tools > span:nth-child(9)  { animation-delay: calc((var(--dur, 18s) / 14) * 8  * -1); }
.ak-word-rotator--tools > span:nth-child(10) { animation-delay: calc((var(--dur, 18s) / 14) * 9  * -1); }
.ak-word-rotator--tools > span:nth-child(11) { animation-delay: calc((var(--dur, 18s) / 14) * 10 * -1); }
.ak-word-rotator--tools > span:nth-child(12) { animation-delay: calc((var(--dur, 18s) / 14) * 11 * -1); }
.ak-word-rotator--tools > span:nth-child(13) { animation-delay: calc((var(--dur, 18s) / 14) * 12 * -1); }
.ak-word-rotator--tools > span:nth-child(14) { animation-delay: calc((var(--dur, 18s) / 14) * 13 * -1); }
/* TOOLS: use a tighter keyframe so 14 items never overlap */
.ak-word-rotator--tools > span{
  animation-name: akDropSwap14; /* override the default */
}

/* ~7% total window (100/14 ≈ 7.14%) */
@keyframes akDropSwap14 {
  0%   { opacity: 0; transform: translateY(12px);  filter: blur(2px); }
  2%   { opacity: 1; transform: translateY(0);     filter: blur(0); }
  5%   { opacity: 1; transform: translateY(0);     filter: blur(0); }
  7%   { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
  100% { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
}
.ak-word-rotator--tools { --dur: 25s; }
/* PLATFORM HERO ROTATOR TWEAKS */
.ak-hero-rotator .ak-hero-line--primary {
  font-size: 5.25em;        /* +25% size */
  margin-bottom: 3.2rem;   /* more space before tools line */
}

.ak-hero-rotator .ak-hero-line--secondary {
  margin-top: 0;           /* ensure spacing is controlled by primary */
}
@keyframes akDissolveSwap{
  0%   { opacity:0; transform:translateY(6px) scale(.995); filter:blur(8px); }

  /* fade in */
  10%  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

  /* HOLD — increased ~56% */
  38%  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

  /* fade out */
  52%  { opacity:0; transform:translateY(-4px) scale(1.003); filter:blur(8px); }

  100% { opacity:0; transform:translateY(-4px) scale(1.003); filter:blur(8px); }
}
@keyframes akDissolveSwap14{
  0%   { opacity:0; transform:translateY(6px) scale(.995); filter:blur(8px); }

  /* fade in */
  2%   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

  /* HOLD — +56%, still under overlap limit */
  7%   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

  /* fade out */
  10%  { opacity:0; transform:translateY(-4px) scale(1.003); filter:blur(8px); }

  100% { opacity:0; transform:translateY(-4px) scale(1.003); filter:blur(8px); }
}
@keyframes akDissolveSwap {
  0%   { opacity: 0; filter: blur(6px); }
  10%  { opacity: 1; filter: blur(0); }

  /* HOLD */
  60%  { opacity: 1; filter: blur(0); }

  70%  { opacity: 0; filter: blur(6px); }
  100% { opacity: 0; filter: blur(6px); }
}
/* =========================================================
   AK WORD ROTATOR (CLEAN) — HOLDS EACH WORD ~1.5s
   Counts: Platforms = 9 items, Tools = 14 items
   Delete/disable ALL your older .ak-word-rotator rules first.
   ========================================================= */

/* the “window” */
.ak-word-rotator{
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  height: 1.15em;
  line-height: 1.15em;
  margin-left: .35em;
  overflow: hidden;              /* prevents any overlap showing */
  min-width: var(--rw, 14ch);    /* tweak per rotator if needed */
}

/* each word */
.ak-word-rotator > span{
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  opacity:0;
  transform: translateY(110%);
  will-change: transform, opacity, filter;
  filter: blur(2px);
  pointer-events:none;
}

/* ===== PLATFORMS (9 items) ===== */
.ak-word-rotator--platforms{ --rw: 15ch; } /* reserve width for longest word */
.ak-word-rotator--platforms > span{
  animation: akSwap9 13.5s cubic-bezier(.22,.9,.22,1) infinite;
}

/* 9 delays => 13.5s/9 = 1.5s per word */
.ak-word-rotator--platforms > span:nth-child(1){ animation-delay: calc((13.5s/9) * 0 * -1); }
.ak-word-rotator--platforms > span:nth-child(2){ animation-delay: calc((13.5s/9) * 1 * -1); }
.ak-word-rotator--platforms > span:nth-child(3){ animation-delay: calc((13.5s/9) * 2 * -1); }
.ak-word-rotator--platforms > span:nth-child(4){ animation-delay: calc((13.5s/9) * 3 * -1); }
.ak-word-rotator--platforms > span:nth-child(5){ animation-delay: calc((13.5s/9) * 4 * -1); }
.ak-word-rotator--platforms > span:nth-child(6){ animation-delay: calc((13.5s/9) * 5 * -1); }
.ak-word-rotator--platforms > span:nth-child(7){ animation-delay: calc((13.5s/9) * 6 * -1); }
.ak-word-rotator--platforms > span:nth-child(8){ animation-delay: calc((13.5s/9) * 7 * -1); }
.ak-word-rotator--platforms > span:nth-child(9){ animation-delay: calc((13.5s/9) * 8 * -1); }

/* visible window = 100/9 = 11.111% (keep it inside that) */
@keyframes akSwap9{
  0%      { opacity:0; transform:translateY(110%); filter:blur(2px); }
  2.2%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  8.6%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  10.4%   { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
}

/* ===== TOOLS (14 items) ===== */
.ak-word-rotator--tools{ --rw: 12ch; }
.ak-word-rotator--tools > span{
  animation: akSwap14 21s cubic-bezier(.22,.9,.22,1) infinite;
}

/* 14 delays => 21s/14 = 1.5s per word */
.ak-word-rotator--tools > span:nth-child(1) { animation-delay: calc((21s/14) * 0  * -1); }
.ak-word-rotator--tools > span:nth-child(2) { animation-delay: calc((21s/14) * 1  * -1); }
.ak-word-rotator--tools > span:nth-child(3) { animation-delay: calc((21s/14) * 2  * -1); }
.ak-word-rotator--tools > span:nth-child(4) { animation-delay: calc((21s/14) * 3  * -1); }
.ak-word-rotator--tools > span:nth-child(5) { animation-delay: calc((21s/14) * 4  * -1); }
.ak-word-rotator--tools > span:nth-child(6) { animation-delay: calc((21s/14) * 5  * -1); }
.ak-word-rotator--tools > span:nth-child(7) { animation-delay: calc((21s/14) * 6  * -1); }
.ak-word-rotator--tools > span:nth-child(8) { animation-delay: calc((21s/14) * 7  * -1); }
.ak-word-rotator--tools > span:nth-child(9) { animation-delay: calc((21s/14) * 8  * -1); }
.ak-word-rotator--tools > span:nth-child(10){ animation-delay: calc((21s/14) * 9  * -1); }
.ak-word-rotator--tools > span:nth-child(11){ animation-delay: calc((21s/14) * 10 * -1); }
.ak-word-rotator--tools > span:nth-child(12){ animation-delay: calc((21s/14) * 11 * -1); }
.ak-word-rotator--tools > span:nth-child(13){ animation-delay: calc((21s/14) * 12 * -1); }
.ak-word-rotator--tools > span:nth-child(14){ animation-delay: calc((21s/14) * 13 * -1); }

/* visible window = 100/14 = 7.142% (keep it inside that) */
@keyframes akSwap14{
  0%      { opacity:0; transform:translateY(110%); filter:blur(2px); }
  1.6%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  5.1%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  6.9%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-word-rotator{ overflow: visible; height:auto; line-height:inherit; }
  .ak-word-rotator > span{ position: static; opacity:1; transform:none; filter:none; animation:none !important; }
}
/* =========================================
   WORD ROTATOR — NO CLIP (width + height)
   Put this LAST in your CSS
   ========================================= */

   .ak-word-rotator{
    /* reserve space so the line doesn’t jump, but allow long words */
    min-width: var(--rw, 18ch);
    width: max-content;                 /* <-- key: expands to fit word */
  
    display: inline-grid;
    grid-auto-flow: row;
    align-items: center;
  
    /* stop vertical clipping */
    height: 1.45em;                     /* was too tight */
    line-height: 1.25;
    padding: 0.12em 0.30em;
  
    overflow: visible;                   /* <-- key: never clip */
    vertical-align: -0.08em;
    box-sizing: border-box;
  }
  
  /* each word sits in the same “slot” */
  .ak-word-rotator > span{
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
  
    white-space: nowrap;                /* never wrap mid-word */
    box-sizing: border-box;
  
    /* keep your animation stuff (don’t remove) */
  }
  
  /* OPTIONAL: tune widths per rotator */
  .ak-word-rotator--platforms{ --rw: 22ch; } /* e.g., “WooCommerce / Squarespace” */
  .ak-word-rotator--tools{ --rw: 20ch; }     /* longer tool names */
  
  /* Mobile safety: allow it to shrink without clipping */
  @media (max-width: 540px){
    .ak-word-rotator{ min-width: 14ch; }
  }
  /* =========================================================
   AGENCY FAQ – PARALLAX + PRO ACCORDION (same as small-biz)
   ========================================================= */

.ak-faq-parallax{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  isolation: isolate;
}

.ak-faq-parallax::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image: var(--faq-bg, url("media/gear1.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.12);
  opacity: .38;              /* visible gif */
  z-index: -2;
  will-change: transform;
}

.ak-faq-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(246,246,244,.78), rgba(246,246,244,.72));
  z-index: -1;
}

/* header matches your small-biz style */
.sb-faq-head{ max-width: 760px; margin: 0 auto 18px; }
.sb-faq-head .faq-sub{ margin: 6px 0 0; opacity: .85; }

/* card wrapper */
.ak-faq-card{
  max-width: 920px;
  margin: 18px auto 0;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,26,23,.10);
  box-shadow: 0 18px 40px rgba(15,26,23,.08), 0 2px 10px rgba(15,26,23,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* per-row accents */
.ak-faq .ak-faq-q:nth-of-type(1) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(2) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q:nth-of-type(3) { --faq-accent: var(--ak-mauve); }
.ak-faq .ak-faq-q:nth-of-type(4) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(5) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q + .ak-faq-a { --faq-accent: inherit; }

.ak-faq-q{
  appearance:none;
  border:0;
  width:100%;
  cursor:pointer;
  text-align:left;

  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;

  padding: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;

  position: relative;
  background: color-mix(in srgb, var(--faq-accent) 12%, white);
  border-top: 1px solid rgba(15,26,23,.08);
  transition: background .25s ease, box-shadow .25s ease, transform .12s ease;
}
.ak-faq-q:first-child{ border-top:0; }
.ak-faq-q:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.06); }
.ak-faq-q:active{ transform: translateY(1px); }
.ak-faq-q:focus-visible{
  outline: 3px solid rgba(42,111,143,.28);
  outline-offset: 2px;
  border-radius: 12px;
}

.ak-faq-q::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 99px;
  background: var(--faq-accent);
  opacity: .9;
}
.ak-faq-q[aria-expanded="true"]{
  background: color-mix(in srgb, var(--faq-accent) 22%, white);
}

.ak-faq-qtext{
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ak-dark);
}

.ak-faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  position: relative;
  display:grid;
  place-items:center;

  border: 1px solid var(--faq-accent);
  background: color-mix(in srgb, var(--faq-accent) 10%, white);
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 6px color-mix(in srgb, var(--faq-accent) 18%, transparent);
}
.ak-faq-icon::before,
.ak-faq-icon::after{
  content:"";
  position:absolute;
  width: 14px;
  height: 2px;
  background: rgba(15,26,23,.75);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
}
.ak-faq-icon::after{ transform: rotate(90deg); }

.ak-faq-q[aria-expanded="true"] .ak-faq-icon::after{
  transform: rotate(0deg);
  opacity: 0;
}

/* answer reveal (non-boring) */
.ak-faq-a{
  max-height: 0px;
  overflow: hidden;
  transition: max-height .38s ease;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--faq-accent) 10%, white),
      color-mix(in srgb, var(--faq-accent) 6%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--faq-accent) 18%, transparent);
}
.ak-faq-a-inner{
  position: relative;
  padding: 18px 22px 20px 26px;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(15,26,23,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.ak-faq-a-inner::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--faq-accent) 55%, transparent);
  opacity: .7;
}

@media (prefers-reduced-motion: reduce){
  .ak-faq-parallax::before{ transform:none !important; }
  .ak-faq-a, .ak-faq-icon::before, .ak-faq-icon::after{ transition:none !important; }
}
/* Agency FAQ – force gear background */
#ag-faq.ak-faq-parallax::before{
  background-image: url("media/gear1.png");
}
/* FAQ PARALLAX (the “perfect” system) */
.ak-faq-parallax{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  isolation: isolate;
}

.ak-faq-parallax::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image: var(--faq-bg, url("media/gear1.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.12);
  opacity: .38;
  z-index: -2;
  will-change: transform;
}

.ak-faq-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(246,246,244,.78), rgba(246,246,244,.72));
  z-index: -1;
}

/* header */
.sb-faq-head{ max-width: 760px; margin: 0 auto 18px; }
.sb-faq-head .faq-sub{ margin: 6px 0 0; opacity: .85; }

/* card wrapper */
.ak-faq-card{
  max-width: 920px;
  margin: 18px auto 0;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,26,23,.10);
  box-shadow: 0 18px 40px rgba(15,26,23,.08), 0 2px 10px rgba(15,26,23,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.ak-faq{ display: grid; }

/* Q rows */
.ak-faq-q{
  appearance:none;
  border:0;
  width:100%;
  cursor:pointer;
  text-align:left;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;
  padding: 18px;
  font-weight: 700;
}

.ak-faq-plus{
  width: 36px; height: 36px;
  border-radius: 999px;
  display:grid; place-items:center;
}

/* A rows */
.ak-faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .26s ease;
}

.ak-faq-a-inner{
  padding: 0 18px 18px;
  line-height: 1.7;
}
/* =========================================================
   FIX: Agencies FAQ parallax (single layer + clickable)
   ========================================================= */

   #ag-faq.ak-faq-parallax{
    position: relative;
    overflow: hidden;
    background: none !important; /* prevents “second” bg from other classes */
  }
  
  /* the ONLY cog background layer */
  #ag-faq.ak-faq-parallax::before{
    content:"";
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
  
    background-image: var(--faq-bg);
    background-size: cover;
    background-position: center;
    transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.08);
    will-change: transform;
    opacity: 0.62;
  }
  
  /* soft wash so text stays readable */
  #ag-faq.ak-faq-parallax::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background: radial-gradient(80% 120% at 50% 20%,
      rgba(255,255,255,0.72) 0%,
      rgba(255,255,255,0.48) 48%,
      rgba(255,255,255,0.30) 100%);
  }
  
  #ag-faq.ak-faq-parallax .wrapper{
    position: relative;
    z-index: 2;
  }
  
  /* ensure the card is ALWAYS above overlays */
  #ag-faq.ak-faq-parallax .ak-faq-card{
    position: relative;
    z-index: 2;
  }
  
  /* if any generic parallax class is adding its own background, kill it here */
  #ag-faq.has-parallax-bg{
    background: none !important;
  }
  /* =========================================================
   AGENCY FAQ – PARALLAX + PRO ACCORDION (same as small-biz)
   ========================================================= */

.ak-faq-parallax{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  isolation: isolate;
}

.ak-faq-parallax::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image: var(--faq-bg, url("media/gear1.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.12);
  opacity: .38;              /* visible gif */
  z-index: -2;
  will-change: transform;
}

.ak-faq-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(246,246,244,.78), rgba(246,246,244,.72));
  z-index: -1;
}

/* header matches your small-biz style */
.sb-faq-head{ max-width: 760px; margin: 0 auto 18px; }
.sb-faq-head .faq-sub{ margin: 6px 0 0; opacity: .85; }

/* card wrapper */
.ak-faq-card{
  max-width: 920px;
  margin: 18px auto 0;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,26,23,.10);
  box-shadow: 0 18px 40px rgba(15,26,23,.08), 0 2px 10px rgba(15,26,23,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* per-row accents */
.ak-faq .ak-faq-q:nth-of-type(1) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(2) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q:nth-of-type(3) { --faq-accent: var(--ak-mauve); }
.ak-faq .ak-faq-q:nth-of-type(4) { --faq-accent: var(--ak-teal); }
.ak-faq .ak-faq-q:nth-of-type(5) { --faq-accent: var(--ak-olive); }
.ak-faq .ak-faq-q + .ak-faq-a { --faq-accent: inherit; }

.ak-faq-q{
  appearance:none;
  border:0;
  width:100%;
  cursor:pointer;
  text-align:left;

  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;

  padding: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;

  position: relative;
  background: color-mix(in srgb, var(--faq-accent) 12%, white);
  border-top: 1px solid rgba(15,26,23,.08);
  transition: background .25s ease, box-shadow .25s ease, transform .12s ease;
}
.ak-faq-q:first-child{ border-top:0; }
.ak-faq-q:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.06); }
.ak-faq-q:active{ transform: translateY(1px); }
.ak-faq-q:focus-visible{
  outline: 3px solid rgba(42,111,143,.28);
  outline-offset: 2px;
  border-radius: 12px;
}

.ak-faq-q::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 99px;
  background: var(--faq-accent);
  opacity: .9;
}
.ak-faq-q[aria-expanded="true"]{
  background: color-mix(in srgb, var(--faq-accent) 22%, white);
}

.ak-faq-qtext{
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ak-dark);
}

.ak-faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  position: relative;
  display:grid;
  place-items:center;
  border: 1px solid rgba(15,26,23,.14);
  background: rgba(255,255,255,.7);
  box-shadow: 0 6px 16px rgba(15,26,23,.08);
}

.ak-faq-icon::before,
.ak-faq-icon::after{
  content:"";
  position: absolute;
  width: 14px;
  height: 2px;
  background: rgba(15,26,23,.72);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
}
.ak-faq-icon::after{
  transform: rotate(90deg);
}

.ak-faq-a{
  max-height: 0px;
  overflow: hidden;
  transition: max-height .38s ease;
  background: rgba(255,255,255,.55);
}
.ak-faq-a-inner{
  padding: 0 18px 18px;
  color: rgba(15,26,23,.82);
  line-height: 1.55;
  font-weight: 500;
}

.ak-faq-q[aria-expanded="true"] .ak-faq-icon::after{
  transform: rotate(0deg);
  opacity: 0;
}
.ak-faq-q[aria-expanded="true"] .ak-faq-icon::before{
  transform: rotate(45deg);
}
.ak-faq-q[aria-expanded="true"] .ak-faq-icon{
  border-color: rgba(42,111,143,.28);
}

@media (prefers-reduced-motion: reduce){
  .ak-faq-parallax::before{ transform:none !important; }
  .ak-faq-a, .ak-faq-icon::before, .ak-faq-icon::after{ transition:none !important; }
}
/* FAQ PARALLAX SECTION (uses --faq-bg and --faq-parallax-y set by JS) */
.ak-faq-parallax{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background-image: var(--faq-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center calc(50% + var(--faq-parallax-y, 0px));
}

.ak-faq-parallax::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(250,247,242,0.58); /* adjust overlay strength */
  pointer-events:none;
}

.ak-faq-parallax .wrapper{
  position:relative;
  z-index:1;
}

/* card */
.ak-faq-card{
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
  padding: 18px;
}

/* accordion */
.ak-faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(246,246,244,0.9);
  font-weight: 650;
  cursor: pointer;
}

.ak-faq-a{
  overflow:hidden;
  max-height: 0px;
  transition: max-height 280ms ease;
}

.ak-faq-a-inner{
  padding: 12px 16px 16px;
  color: var(--ak-muted);
  line-height: 1.55;
}
/* =========================================
   FAQ PARALLAX — LIGHTER HEADER TEXT
   ========================================= */

   .ak-faq-parallax .sb-faq-head h2 {
    color: rgba(255, 255, 255, 0.95); /* soft white */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  }
  
  .ak-faq-parallax .sb-faq-head .faq-sub {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  }
  /* =========================================
   FORCE FAQ PARALLAX (Ecomm + Agencies)
   Paste at VERY BOTTOM of industry.css
   ========================================= */

.ak-faq-parallax{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 0;
}

.ak-faq-parallax::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image: var(--faq-bg, url("media/gear.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translate3d(0, var(--faq-parallax-y, 0px), 0) scale(1.12);
  will-change: transform;

  opacity: .55;     /* raise/lower to taste */
  z-index: -2;
  pointer-events: none;
}

.ak-faq-parallax::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: -1;
  pointer-events:none;

  /* readable but still shows the gears */
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(246,246,244,.55), rgba(246,246,244,.50));
}

/* keep your header readable */
.ak-faq-parallax .sb-faq-head h2{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.ak-faq-parallax .sb-faq-head .faq-sub{
  color: rgba(255,255,255,0.72);
  text-shadow: 0 2px 12px rgba(0,0,0,0.28);
}
/* ================================
   AK WORD ROTATOR (CLEAN, NO CLIP, ~1.5s per word)
   Platforms = 9 items (13.5s total)
   Tools     = 14 items (21s total)
   ================================ */

.ak-hero-rotator{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.ak-hero-line{
  margin: 0;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(20,20,20,0.78);
}

/* the “window” */
.ak-word-rotator{
  display:inline-block;
  position:relative;
  vertical-align: -0.06em;

  /* IMPORTANT: don’t clip tops/bottoms */
  height: 1.45em;
  line-height: 1.25;
  padding: 0.10em 0.30em;

  /* IMPORTANT: prevents overlap being visible */
  overflow: hidden;

  /* prevents layout jump – tuned per set via --rw */
  min-width: var(--rw, 14ch);

  box-sizing: border-box;
}

/* each word sits on the same slot */
.ak-word-rotator > span{
  position:absolute;
  left:0;
  top:0;

  white-space:nowrap;
  opacity:0;
  transform: translateY(110%);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  pointer-events:none;

  /* word styling */
  font-family: "Playfair Display", serif;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #141414;

  border-radius: 8px;
  padding: 0 2px;

  /* default highlight (teal) */
  background:
    linear-gradient(to top,
      rgba(105,150,130,0.22) 0%,
      rgba(105,150,130,0.22) 55%,
      transparent 55%);
}

/* Accent variants */
.ak-word-rotator--platforms{ --rw: 22ch; }
.ak-word-rotator--platforms > span{
  background:
    linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
  animation: akSwap9 13.5s cubic-bezier(.22,.9,.22,1) infinite;
}

.ak-word-rotator--tools{ --rw: 22ch; }
.ak-word-rotator--tools > span{
  background:
    linear-gradient(to top,
      rgba(150,105,125,0.22) 0%,
      rgba(150,105,125,0.22) 55%,
      transparent 55%);
  animation: akSwap14 21s cubic-bezier(.22,.9,.22,1) infinite;
}

/* ---- Delays (NEGATIVE so it starts immediately at word 1) ---- */
/* Platforms: 9 delays => 13.5/9 = 1.5s per word */
.ak-word-rotator--platforms > span:nth-child(1){ animation-delay: calc((13.5s/9) * 0  * -1); }
.ak-word-rotator--platforms > span:nth-child(2){ animation-delay: calc((13.5s/9) * 1  * -1); }
.ak-word-rotator--platforms > span:nth-child(3){ animation-delay: calc((13.5s/9) * 2  * -1); }
.ak-word-rotator--platforms > span:nth-child(4){ animation-delay: calc((13.5s/9) * 3  * -1); }
.ak-word-rotator--platforms > span:nth-child(5){ animation-delay: calc((13.5s/9) * 4  * -1); }
.ak-word-rotator--platforms > span:nth-child(6){ animation-delay: calc((13.5s/9) * 5  * -1); }
.ak-word-rotator--platforms > span:nth-child(7){ animation-delay: calc((13.5s/9) * 6  * -1); }
.ak-word-rotator--platforms > span:nth-child(8){ animation-delay: calc((13.5s/9) * 7  * -1); }
.ak-word-rotator--platforms > span:nth-child(9){ animation-delay: calc((13.5s/9) * 8  * -1); }

/* Tools: 14 delays => 21/14 = 1.5s per word */
.ak-word-rotator--tools > span:nth-child(1) { animation-delay: calc((21s/14) * 0  * -1); }
.ak-word-rotator--tools > span:nth-child(2) { animation-delay: calc((21s/14) * 1  * -1); }
.ak-word-rotator--tools > span:nth-child(3) { animation-delay: calc((21s/14) * 2  * -1); }
.ak-word-rotator--tools > span:nth-child(4) { animation-delay: calc((21s/14) * 3  * -1); }
.ak-word-rotator--tools > span:nth-child(5) { animation-delay: calc((21s/14) * 4  * -1); }
.ak-word-rotator--tools > span:nth-child(6) { animation-delay: calc((21s/14) * 5  * -1); }
.ak-word-rotator--tools > span:nth-child(7) { animation-delay: calc((21s/14) * 6  * -1); }
.ak-word-rotator--tools > span:nth-child(8) { animation-delay: calc((21s/14) * 7  * -1); }
.ak-word-rotator--tools > span:nth-child(9) { animation-delay: calc((21s/14) * 8  * -1); }
.ak-word-rotator--tools > span:nth-child(10){ animation-delay: calc((21s/14) * 9  * -1); }
.ak-word-rotator--tools > span:nth-child(11){ animation-delay: calc((21s/14) * 10 * -1); }
.ak-word-rotator--tools > span:nth-child(12){ animation-delay: calc((21s/14) * 11 * -1); }
.ak-word-rotator--tools > span:nth-child(13){ animation-delay: calc((21s/14) * 12 * -1); }
.ak-word-rotator--tools > span:nth-child(14){ animation-delay: calc((21s/14) * 13 * -1); }

/* Keyframes:
   - each word is visible for “its slice” (100/N)
   - in fast, hold, out fast, then fully gone
*/
@keyframes akSwap9{
  0%      { opacity:0; transform:translateY(110%); filter:blur(2px); }
  2%      { opacity:1; transform:translateY(0%);   filter:blur(0); }
  9%      { opacity:1; transform:translateY(0%);   filter:blur(0); }
  11%     { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
}

@keyframes akSwap14{
  0%      { opacity:0; transform:translateY(110%); filter:blur(2px); }
  1.6%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  5.1%    { opacity:1; transform:translateY(0%);   filter:blur(0); }
  6.9%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  100%    { opacity:0; transform:translateY(-90%); filter:blur(2px); }
}

/* Visually-hidden helper */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-word-rotator{
    overflow: visible;
    height: auto;
    line-height: inherit;
    padding: 0;
    min-width: 0;
  }
  .ak-word-rotator > span{
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
    margin-left: 8px;
  }
}
/* =========================================================
   EVENTS/ECOMM ONLY — ROTATOR (scoped to this section)
   Counts: 10 + 10
   Hold: ~1.5s per word -> duration 15s
   ========================================================= */

   #platforms.ak-platforms--ecomm-benefits .ak-hero-rotator{
    margin-top: 10px;
    display: grid;
    gap: 6px;
  }
  
  #platforms.ak-platforms--ecomm-benefits .ak-hero-line{
    margin: 0;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: rgba(20,20,20,0.78);
  }
  
  /* the “window” */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator{
    display:inline-block;
    position:relative;
    vertical-align: -0.06em;
    height: 1.45em;
    line-height: 1.25;
    padding: 0.10em 0.30em;
    overflow: hidden;
    min-width: var(--rw, 22ch);
    box-sizing: border-box;
  }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator > span{
    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
    opacity:0;
    transform: translateY(110%);
    filter: blur(2px);
    will-change: transform, opacity, filter;
    pointer-events:none;
  
    font-family: "Playfair Display", serif;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #141414;
  
    border-radius: 8px;
    padding: 0 2px;
  }
  
  /* BENEFITS line (10 items) */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span{
    background: linear-gradient(to top,
      rgba(147,150,105,0.22) 0%,
      rgba(147,150,105,0.22) 55%,
      transparent 55%);
    animation: akSwap10 15s cubic-bezier(.22,.9,.22,1) infinite;
  }
  
  /* HANDLE line (10 items) */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span{
    background: linear-gradient(to top,
      rgba(105,150,130,0.22) 0%,
      rgba(105,150,130,0.22) 55%,
      transparent 55%);
    animation: akSwap10 15s cubic-bezier(.22,.9,.22,1) infinite;
  }
  
  /* Delays: 15s / 10 = 1.5s per word */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(1),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(1) { animation-delay: calc((15s/10) * 0 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(2),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(2) { animation-delay: calc((15s/10) * 1 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(3),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(3) { animation-delay: calc((15s/10) * 2 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(4),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(4) { animation-delay: calc((15s/10) * 3 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(5),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(5) { animation-delay: calc((15s/10) * 4 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(6),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(6) { animation-delay: calc((15s/10) * 5 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(7),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(7) { animation-delay: calc((15s/10) * 6 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(8),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(8) { animation-delay: calc((15s/10) * 7 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(9),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(9) { animation-delay: calc((15s/10) * 8 * -1); }
  
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(10),
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle  > span:nth-child(10){ animation-delay: calc((15s/10) * 9 * -1); }
  
  /* Keyframes for 10 items */
  @keyframes akSwap10{
    0%   { opacity:0; transform:translateY(110%); filter:blur(2px); }
    2%   { opacity:1; transform:translateY(0%);   filter:blur(0); }
    10%  { opacity:1; transform:translateY(0%);   filter:blur(0); }
    12%  { opacity:0; transform:translateY(-90%); filter:blur(2px); }
    100% { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    #platforms.ak-platforms--ecomm-benefits .ak-word-rotator{
      overflow: visible;
      height: auto;
      line-height: inherit;
      padding: 0;
      min-width: 0;
    }
    #platforms.ak-platforms--ecomm-benefits .ak-word-rotator > span{
      position: static;
      opacity: 1;
      transform: none;
      filter: none;
      animation: none !important;
      margin-left: 8px;
    }
  }
  /* =========================================================
   EVENTS/ECOMM ONLY — HERO LOOK (big like the original)
   ========================================================= */
#platforms.ak-platforms--ecomm-benefits{
  padding: 90px 0 70px;                 /* adjust to taste */
  text-align: center;
}

#platforms.ak-platforms--ecomm-benefits .ak-platforms__head{
  display:flex;
  justify-content:center;
}

#platforms.ak-platforms--ecomm-benefits .ak-hero-rotator{
  margin-top: 0;
  gap: 14px;
  align-items: center;
}

/* Primary line: big "We Give Customers..." */
#platforms.ak-platforms--ecomm-benefits .ak-hero-line--primary{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: rgba(20,20,20,0.72);
}

/* Secondary line: small, understated */
#platforms.ak-platforms--ecomm-benefits .ak-hero-line--secondary{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(20,20,20,0.55);
  letter-spacing: -0.01em;
}

/* Rotating word itself: bold + crisp like the old one */
#platforms.ak-platforms--ecomm-benefits .ak-word-rotator > span{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: rgba(15,15,15,0.95);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* Give the highlight some presence */
#platforms.ak-platforms--ecomm-benefits .ak-word-rotator{
  padding: 0.14em 0.34em;
  border-radius: 10px;
  min-width: var(--rw, 24ch);
}

@media (max-width: 720px){
  #platforms.ak-platforms--ecomm-benefits{
    padding: 60px 0 50px;
  }
}
/* =========================================================
   EVENTS/ECOMM — PALETTE-CORRECT WORD HIGHLIGHTS
   Uses ONLY brand variables
   ========================================================= */

   #platforms.ak-platforms--ecomm-benefits .ak-word-rotator > span{
    background: linear-gradient(
      to top,
      var(--hl, var(--ak-teal)) 0%,
      var(--hl, var(--ak-teal)) 62%,
      transparent 62%
    );
    border-radius: 10px;
    padding: 0 0.2em;
  }
  
  /* ---------- BENEFITS (10) ---------- */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(1){  --hl: rgba(147,150,105,.30); } /* olive */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(2){  --hl: rgba(105,150,130,.30); } /* teal */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(3){  --hl: rgba(150,105,125,.30); } /* mauve */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(4){  --hl: rgba(147,150,105,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(5){  --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(6){  --hl: rgba(150,105,125,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(7){  --hl: rgba(147,150,105,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(8){  --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(9){  --hl: rgba(150,105,125,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-benefits > span:nth-child(10){ --hl: rgba(147,150,105,.30); }
  
  /* ---------- HANDLE (10) ---------- */
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(1){  --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(2){  --hl: rgba(150,105,125,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(3){  --hl: rgba(147,150,105,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(4){  --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(5){  --hl: rgba(150,105,125,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(6){  --hl: rgba(147,150,105,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(7){  --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(8){  --hl: rgba(150,105,125,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(9){  --hl: rgba(147,150,105,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-word-rotator--ecomm-handle > span:nth-child(10){ --hl: rgba(105,150,130,.30); }
  #platforms.ak-platforms--ecomm-benefits .ak-hero-line--secondary{
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(21px, 2.2vw, 45px); /* ~50% bigger */
    color: rgba(31,36,33,0.65);
    letter-spacing: -0.01em;
  }
  /* =========================================================
   MARKETING AGENCIES PAGE ONLY — ROTATOR (10 + 10)
   Scoped to: #ag-rotator.ak-platforms--agency-rotator
   Duration: 15s (1.5s per word) | Items: 10
   ========================================================= */

#ag-rotator.ak-platforms--agency-rotator{
  padding: 90px 0 70px;
  text-align: center;
  background: var(--ak-bg);
}

#ag-rotator.ak-platforms--agency-rotator .ak-platforms__head{
  display:flex;
  justify-content:center;
}

#ag-rotator.ak-platforms--agency-rotator .ak-hero-rotator{
  margin-top: 0;
  display: grid;
  gap: 14px;
  align-items: center;
}

#ag-rotator.ak-platforms--agency-rotator .ak-hero-line{
  margin: 0;
}

/* Primary line (big) */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--primary{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: rgba(31,36,33,0.72);
}

/* Secondary line (50% bigger than your prior small style) */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px);
  color: rgba(31,36,33,0.65);
  letter-spacing: -0.01em;
}

/* Rotator window */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator{
  display:inline-block;
  position:relative;
  vertical-align: -0.06em;
  height: 1.45em;
  line-height: 1.25;
  padding: 0.14em 0.34em;
  overflow: hidden;
  min-width: var(--rw, 24ch);
  box-sizing: border-box;
  border-radius: 10px;
}

/* Each word */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator > span{
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;

  opacity:0;
  transform: translateY(110%);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  pointer-events:none;

  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.02em;
  color: rgba(15,15,15,0.95);

  /* highlight uses per-word --hl (brand palette only) */
  background: linear-gradient(
    to top,
    var(--hl, rgba(105,150,130,.30)) 0%,
    var(--hl, rgba(105,150,130,.30)) 62%,
    transparent 62%
  );
  border-radius: 10px;
  padding: 0 0.2em;
}

/* Animations (unique names so nothing collides) */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span{
  animation: akSwap10Ag 15s cubic-bezier(.22,.9,.22,1) infinite;
}
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span{
  animation: akSwap10Ag 15s cubic-bezier(.22,.9,.22,1) infinite;
}

/* Delays: 15s / 10 = 1.5s per word */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(1),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(1){  animation-delay: calc((15s/10) * 0 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(2),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(2){  animation-delay: calc((15s/10) * 1 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(3),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(3){  animation-delay: calc((15s/10) * 2 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(4),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(4){  animation-delay: calc((15s/10) * 3 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(5),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(5){  animation-delay: calc((15s/10) * 4 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(6),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(6){  animation-delay: calc((15s/10) * 5 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(7),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(7){  animation-delay: calc((15s/10) * 6 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(8),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(8){  animation-delay: calc((15s/10) * 7 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(9),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(9){  animation-delay: calc((15s/10) * 8 * -1); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix  > span:nth-child(10),
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(10){ animation-delay: calc((15s/10) * 9 * -1); }

/* Keyframes for 10 items */
@keyframes akSwap10Ag{
  0%   { opacity:0; transform:translateY(110%); filter:blur(2px); }
  2%   { opacity:1; transform:translateY(0%);   filter:blur(0); }
  10%  { opacity:1; transform:translateY(0%);   filter:blur(0); }
  12%  { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  100% { opacity:0; transform:translateY(-90%); filter:blur(2px); }
}

/* Per-word highlight colours (ONLY your palette) */
/* FIX line cycles: olive -> teal -> mauve (repeat) */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(1){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(2){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(3){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(4){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(5){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(6){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(7){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(8){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(9){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(10){ --hl: rgba(147,150,105,.30); }

/* SKILL line cycles: teal -> mauve -> olive (repeat) */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(1){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(2){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(3){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(4){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(5){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(6){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(7){  --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(8){  --hl: rgba(150,105,125,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(9){  --hl: rgba(147,150,105,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(10){ --hl: rgba(105,150,130,.30); }
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(11){ --hl: rgba(105,150,130,.30); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator{
    overflow: visible;
    height: auto;
    line-height: inherit;
    padding: 0;
    min-width: 0;
  }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator > span{
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
    margin-left: 8px;
  }
}
/* =========================================================
   MARKETING AGENCIES — SECOND LINE 100% BIGGER
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

/* Make the entire second line twice the size */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary{
  font-size: clamp(42px, 4.4vw, 54px); /* ~100% bigger than before */
  line-height: 1.05;
  font-weight: 600;
  color: rgba(31,36,33,0.78);
}

/* Make the rotating word itself scale with it */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator > span{
  font-size: 1.15em;   /* makes the rotating word slightly dominant */
  font-weight: 700;
}

/* Ensure the rotator window scales correctly */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator{
  height: 1.6em;
  padding: 0.18em 0.42em;
  min-width: var(--rw, 26ch);
}
/* =========================================================
   AGENCIES ROTATOR — MIXED ALIGNMENT LAYOUT
   Row 1: label + rotator LEFT
   Row 2: label CENTER, rotator RIGHT
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

   #ag-rotator.ak-platforms--agency-rotator .ak-hero-rotator{
    /* two-column layout so we can place each line differently */
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
    column-gap: 12px;
    align-items: start;
  }
  
  /* Each line becomes its own “stack” but we control alignment per line */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
  }
  
  /* ---------- ROW 1: WHAT WE FIX (LEFT) ---------- */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--primary{
    grid-column: 1 / -1;           /* span both columns */
    align-items: flex-start;       /* left */
    text-align: left;
    padding-left: clamp(10px, 2vw, 34px);
  }
  
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--primary .ak-word-rotator{
    align-self: flex-start;        /* rotator left under label */
  }
  
  /* ---------- ROW 2: OUR SKILLSET label CENTER, rotator RIGHT ---------- */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary{
    grid-column: 1 / -1;           /* span both columns */
    align-items: center;           /* label centered */
    text-align: center;
    padding-right: clamp(10px, 2vw, 34px);
  }
  
  /* Rotator below but justified to the right */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
    align-self: flex-end;          /* pushes the rotator to the right edge */
  }
  
  /* Keep it sensible on mobile: everything centered */
  @media (max-width: 720px){
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-rotator{
      grid-template-columns: 1fr;
    }
  
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--primary{
      align-items: center;
      text-align: center;
      padding-left: 0;
    }
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--primary .ak-word-rotator{
      align-self: center;
    }
  
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary{
      padding-right: 0;
    }
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
      align-self: center;
    }
  }
  /* =========================================================
   AGENCIES ROTATOR — SECOND LINE: LABEL CENTER, ROTATOR RIGHT (own line)
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary{
  text-align: center;
  align-items: center;
}

/* label stays centered */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-label{
  display: block;
  width: 100%;
}

/* rotator gets its own line and aligns right */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
  display: block;
  width: 100%;
  margin-top: 10px;               /* spacing between label and rotator line */
  text-align: right;              /* key: right align the line */
}

/* make sure the rotator itself sits to the right edge */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
  display: inline-block;
}

/* Mobile: keep it centered (right align can feel weird on narrow screens) */
@media (max-width: 720px){
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
    text-align: center;
  }
}
/* =========================================================
   HARD RIGHT-ALIGN (secondary rotator)
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

/* keep label centered */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-label{
  display:block;
  width:100%;
  text-align:center;
}

/* make the rotator row full width, then push the rotator to the right */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
  width: 100%;
  display: flex;
  justify-content: flex-end;   /* true right edge */
  margin-top: 10px;
}

/* CRITICAL: remove the min-width that prevents it looking right-aligned */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
  min-width: 0 !important;        /* kills 26ch constraint */
  width: max-content;              /* hug text */
  max-width: 100%;
  margin-left: auto;               /* safety */
}

/* if a long phrase ever overflows, allow wrapping instead of pushing left */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator > span{
  white-space: nowrap;
}

/* Mobile: center again */
@media (max-width: 720px){
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
    justify-content: center;
  }
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
    margin-left: 0;
  }
}
/* =========================================================
   AGENCIES ROTATOR — SECOND LINE: RIGHT (CONTROLLED), NO COLLAPSE
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

/* label stays centered */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-label{
  display:block;
  width:100%;
  text-align:center;
}

/* rotator row: right aligned BUT inset (so it doesn't sit in no-man’s-land) */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;

  /* control how far right it goes */
  padding-right: clamp(22px, 6vw, 110px);
}

/* rotator "window" MUST have a stable width/height for stacked spans */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
  /* stable window so text doesn't collapse to a single letter */
  width: clamp(18ch, 34vw, 28ch);   /* tune this if needed */
  height: 1.35em;

  display: inline-block;
  overflow: hidden;

  /* keep your look */
  padding: 0.12em 0.42em;
  border-radius: 12px;
}

/* spans should fill the window */
#ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator > span{
  display: block;
  width: 100%;
  white-space: nowrap;
}

/* Mobile: center it again */
@media (max-width: 720px){
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
    justify-content: center;
    padding-right: 0;
  }
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator{
    width: clamp(18ch, 70vw, 26ch);
  }
}
/* =========================================================
   AGENCIES ROTATOR — FIX OVERLONG HIGHLIGHT BAR
   Make highlight hug the word, not the window
   Scoped ONLY to #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

/* Keep the rotator window stable (do NOT remove this) */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator{
  position: relative;
  overflow: hidden;
}

/* Critical fix: spans shrink to text width */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator > span{
  display: inline-block;      /* not block */
  width: auto;                /* hug text */
  max-width: max-content;
  padding: 0 0.28em;          /* controls highlight length */
  box-sizing: border-box;
}

/* Re-apply highlight cleanly */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator > span{
  background: linear-gradient(
    to top,
    var(--hl, rgba(150,105,125,.28)) 0%,
    var(--hl, rgba(150,105,125,.28)) 62%,
    transparent 62%
  );
  border-radius: 10px;
}

/* Prevent weird centering artefacts during animation */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator{
  text-align: right;
}
/* =========================================================
   AGENCY PAGE ONLY — force SECOND rotator words to sit right
   (fixes “moved back left” with zero side effects)
   ========================================================= */

/* keep your rotator window stable (don’t remove) */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator{
  position: relative; /* already is, but make sure */
}

/* THE FIX: override the default left:0 for this line only */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-word-rotator > span{
  left: auto !important;
  right: 0 !important;
}

/* optional: ensure the whole line is actually right aligned */
#ag-rotator.ak-platforms--agency-rotator
.ak-hero-line--secondary
.ak-hero-rotline{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/* =========================================================
   AGENCIES ROTATOR — HARD FIX (10 + 11) NO OVERLAP
   Put this LAST in industry.css
   Scoped ONLY to: #ag-rotator.ak-platforms--agency-rotator
   ========================================================= */

   #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator{
    position: relative;
    overflow: hidden;
  }
  
  /* ---------- FIX ROTATOR (10 items) ---------- */
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix{
    --count: 10;
    --dur: 15s;                    /* 10 * 1.5s */
    --step: calc(var(--dur) / var(--count));
  }
  
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span{
    animation: agSwap10 var(--dur) cubic-bezier(.22,.9,.22,1) infinite;
  }
  
  /* negative delays = starts cycling immediately */
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(1){  animation-delay: calc(var(--step) * 0  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(2){  animation-delay: calc(var(--step) * 1  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(3){  animation-delay: calc(var(--step) * 2  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(4){  animation-delay: calc(var(--step) * 3  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(5){  animation-delay: calc(var(--step) * 4  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(6){  animation-delay: calc(var(--step) * 5  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(7){  animation-delay: calc(var(--step) * 6  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(8){  animation-delay: calc(var(--step) * 7  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(9){  animation-delay: calc(var(--step) * 8  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(10){ animation-delay: calc(var(--step) * 9  * -1); }
  
  /* ---------- SKILL ROTATOR (11 items) ---------- */
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill{
    --count: 11;
    --dur: 16.5s;                  /* 11 * 1.5s */
    --step: calc(var(--dur) / var(--count));
  }
  
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span{
    animation: agSwap11 var(--dur) cubic-bezier(.22,.9,.22,1) infinite;
  }
  
  /* delays for 11 */
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(1){  animation-delay: calc(var(--step) * 0  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(2){  animation-delay: calc(var(--step) * 1  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(3){  animation-delay: calc(var(--step) * 2  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(4){  animation-delay: calc(var(--step) * 3  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(5){  animation-delay: calc(var(--step) * 4  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(6){  animation-delay: calc(var(--step) * 5  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(7){  animation-delay: calc(var(--step) * 6  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(8){  animation-delay: calc(var(--step) * 7  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(9){  animation-delay: calc(var(--step) * 8  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(10){ animation-delay: calc(var(--step) * 9  * -1); }
  #ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(11){ animation-delay: calc(var(--step) * 10 * -1); }
  
  /* ---------- NO-OVERLAP KEYFRAMES ---------- */
  /* Window per word = 100/10 = 10%  (keep visible inside that) */
  @keyframes agSwap10{
    0%   { opacity:0; transform:translateY(110%); filter:blur(2px); }
    2%   { opacity:1; transform:translateY(0%);   filter:blur(0); }
    7%   { opacity:1; transform:translateY(0%);   filter:blur(0); }
    9%   { opacity:0; transform:translateY(-90%); filter:blur(2px); }
    100% { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  }
  
  /* Window per word = 100/11 = 9.09% */
  @keyframes agSwap11{
    0%   { opacity:0; transform:translateY(110%); filter:blur(2px); }
    2%   { opacity:1; transform:translateY(0%);   filter:blur(0); }
    6.3% { opacity:1; transform:translateY(0%);   filter:blur(0); }
    8.3% { opacity:0; transform:translateY(-90%); filter:blur(2px); }
    100% { opacity:0; transform:translateY(-90%); filter:blur(2px); }
  }
  
  /* ---------- SECOND LINE: label centered, rotator right (controlled) ---------- */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-label{
    display:block;
    width:100%;
    text-align:center;
  }
  
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top: 12px;
    padding-right: clamp(18px, 5vw, 90px); /* keeps it “right” but not in outer space */
  }
  
  /* critical: right-align the stacked words (not left:0) */
  #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator > span{
    left:auto !important;
    right:0 !important;
  
    /* highlight hugs text, not a long bar */
    display:inline-block;
    width:auto;
    max-width:max-content;
    padding: 0 0.28em;
    box-sizing:border-box;
  }
  
  /* mobile: center it again */
  @media (max-width: 720px){
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-hero-rotline{
      justify-content:center;
      padding-right:0;
    }
    #ag-rotator.ak-platforms--agency-rotator .ak-hero-line--secondary .ak-word-rotator > span{
      right:auto !important;
      left:0 !important;
    }
  }
  /* =========================================================
   AGENCIES ROTATOR — SLOW 20% + NEVER SAME COLOUR
   Paste LAST in industry.css
   ========================================================= */

#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix{
  /* was 15s (10 * 1.5s). +20% = 18s */
  --dur: 18s;
  --step: calc(var(--dur) / var(--count));
}

#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill{
  /* was 16.5s (11 * 1.5s). +20% = 19.8s */
  --dur: 19.8s;
  --step: calc(var(--dur) / var(--count));
}

/* ---------- COLOUR LOGIC: never let both lines be same colour ---------- */
/* We set FIX line to alternate olive/teal.
   We set SKILL line to alternate mauve/teal.
   That means:
   - When FIX is teal, SKILL will be mauve
   - When FIX is olive, SKILL will be teal
   -> never the same at the same time. */

/* FIX (10 items): odd=olive, even=teal */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(odd){
  --hl: rgba(147,150,105,.30); /* olive */
}
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-fix > span:nth-child(even){
  --hl: rgba(105,150,130,.30); /* teal */
}

/* SKILL (11 items): odd=mauve, even=teal */
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(odd){
  --hl: rgba(150,105,125,.28); /* mauve */
}
#ag-rotator.ak-platforms--agency-rotator .ak-word-rotator--ag-skill > span:nth-child(even){
  --hl: rgba(105,150,130,.26); /* teal (slightly lighter) */
}
/* =========================================================
   MARKETING AGENCIES PAGE ONLY — HOW IT WORKS PARALLAX
   ========================================================= */

   body[data-page="marketing-agencies"] #how-it-works{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: none !important; /* prevents shared has-parallax-bg rules winning */
  }
  
  body[data-page="marketing-agencies"] #how-it-works::before{
    content:"";
    position:absolute;
    inset:-18%;
    z-index:-2;
    pointer-events:none;
  
    background-image: var(--how-bg, url("media/gear1.png"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  
    transform: translate3d(0, var(--how-parallax-y, 0px), 0) scale(1.10);
    will-change: transform;
    opacity: 0.55;
  }
  
  body[data-page="marketing-agencies"] #how-it-works::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
  
    background:
      radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(250,247,242,.68), rgba(250,247,242,.62));
  }
  
  body[data-page="marketing-agencies"] #how-it-works > .wrapper{
    position: relative;
    z-index: 1;
  }
  
  @media (prefers-reduced-motion: reduce){
    body[data-page="marketing-agencies"] #how-it-works::before{
      transform: none !important;
    }
  }
  /* ==========================
   TOP PARALLAX (How We Work) — consistent across pages
   ========================== */
.how-section.has-parallax-bg{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* moving background layer */
.how-section.has-parallax-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--how-bg) center/cover no-repeat;
  transform: translate3d(0, var(--how-parallax-y, 0px), 0) scale(1.12);
  will-change: transform;
  z-index:0;
}

/* consistent overlay so top sections match everywhere */
.how-section.has-parallax-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--how-overlay, .40));
  z-index:1;
}

/* ensure content is above */
.how-section .wrapper{ position:relative; z-index:2; }
/* ==========================
   BOTTOM PARALLAX (FAQ) — this page’s unique look
   ========================== */
   body[data-page="marketing-agencies"] #ag-faq.ak-faq-parallax{
    --faq-overlay: .55;
    --faq-blur: 0px;
    --faq-card-bg: rgba(255,255,255,.92);
    --faq-border: rgba(255,255,255,.35);
    --faq-accent: var(--ak-mauve);
  }
  body[data-page="marketing-agencies"] #ag-faq .ak-faq-card{
    background: var(--faq-card-bg);
    border: 1px solid var(--faq-border);
    backdrop-filter: blur(var(--faq-blur));
  }
  
  body[data-page="marketing-agencies"] #ag-faq .ak-faq-q{
    border-left: 4px solid var(--faq-accent);
  }
  /* AGENCIES — match small-biz/ecom parallax behaviour */
#ag-how-it-works.has-parallax-bg{
  position: relative;
  overflow: hidden;
}

/* overlay tint */
#ag-how-it-works.has-parallax-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: rgba(0,0,0,.25);
}

/* keep content above overlay */
#ag-how-it-works.has-parallax-bg > .wrapper{
  position: relative;
  z-index: 1;
}

/* mobile safari: fixed backgrounds are often broken */
@media (max-width: 720px){
  #ag-how-it-works.has-parallax-bg{
    background-attachment: scroll !important;
  }
}
/* ---------------------------------------
   SMALL BUSINESS PAGE — FAQ ONLY
   Remove dark overlay from FAQ parallax
--------------------------------------- */

body .ak-faq-parallax.has-parallax-bg::before {
  display: none !important;
}
/* =========================================================
   SMALL-BUSINESS ONLY — keep GIF dark, but DO NOT darken cards
   Fixes both parallax sections on this page (slider + FAQ)
   ========================================================= */

/* Create a safe stacking context so ::before/::after can sit behind */
#how-it-works.has-parallax-bg{
  position: relative;
  isolation: isolate; /* key: prevents overlay from affecting children */
}

/* Make sure the parallax background layer stays at the back */
#how-it-works.has-parallax-bg::before{
  z-index: -2 !important;
  pointer-events: none;
}

/* Make sure the dark overlay sits BEHIND the content (not over it) */
#how-it-works.has-parallax-bg::after{
  z-index: -1 !important;
  pointer-events: none;
}

/* Force the actual section content above both pseudo layers */
#how-it-works.has-parallax-bg > .wrapper{
  position: relative;
  z-index: 1 !important;
}

/* Belt + braces: ensure the FAQ card never inherits any dimming */
#how-it-works.ak-faq-parallax .ak-faq-card{
  position: relative;
  z-index: 2;
  filter: none !important;
  opacity: 1 !important;
}