/* =========================================================
       FLEX CAROUSEL — Opener
    ========================================================== */
    #flex-carousel {
      --fc-opener-pad-top: clamp(1.25rem, 2.6vw, 2.25rem);
      --fc-opener-pad-bottom: clamp(1.1rem, 2.2vw, 1.7rem);
      --fc-opener-card-radius: 18px;
      --fc-opener-card-radius-mobile: 16px;
      --fc-opener-card-pad-y: clamp(1.15rem, 2.2vw, 1.75rem);
      --fc-opener-card-pad-x: clamp(1.15rem, 2.4vw, 2.2rem);
      --fc-opener-card-max-mobile: 520px;
      --fc-opener-mobile-container-pad: 14px;
      --fc-opener-glint-duration: 9s;

      /* Layout sizing */
      --fc-max-width: 1400px;
      --fc-max-height: 720px;
      --fc-container-gutter: clamp(1.25rem, 2.2vw, 2.5rem);

      /* Section spacing */
      --fc-section-pad-top: clamp(1.5rem, 3vw, 3rem);
      --fc-section-pad-bottom: clamp(2.25rem, 4vw, 4.5rem);

      /* Panel sizing */
      --fc-info-w: 44%;
      --fc-image-w: 56%;
      --fc-info-pad-x: clamp(1.5rem, 2.8vw, 2.75rem);

      /* Surfaces */
      --fc-bg: #ffffff;
      --fc-ivory: #F6EFE6;

      /* Gradient stops */
      --fc-g1: #F6E6DA;
      --fc-g2: #E9F1EA;
      --fc-g3: #E3EEF4;
      --fc-g4: #F7F0E7;

      /* UI */
      --fc-title: #2C2C2C;
      --fc-muted: #7E7E7E;
      --fc-icon: #5d5d5d;
      --fc-divider: #b0b0b0;

      /* Accent */
      --fc-accent: var(--accent-color, #E27D60);
      --fc-cta-text: #F6EFE6;

      /* Timing */
      --fc-autoplay-ms: 6500;

      /* Fonts */
      --fc-font-headline: "Gloock", ui-serif, Georgia, "Times New Roman", serif;
      --fc-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --fc-font-accent: "Fraunces", ui-serif, Georgia, serif;

      /* Type scale */
      --fc-subtitle-size: clamp(0.60rem, 0.25vw + 0.55rem, 0.72rem);
      --fc-title-size: clamp(2.35rem, 2.2vw + 1.45rem, 3.25rem);
      --fc-body-size: clamp(0.98rem, 0.55vw + 0.78rem, 1.10rem);
      --fc-body-leading: clamp(1.45rem, 0.7vw + 1.2rem, 1.70rem);
      --fc-cta-size: clamp(0.70rem, 0.25vw + 0.65rem, 0.78rem);

      /* Rhythm */
      --fc-gap-1: clamp(0.6rem, 1vw, 0.9rem);
      --fc-gap-2: clamp(1.0rem, 1.8vw, 1.6rem);
      --fc-desc-mt: clamp(1.0rem, 1.8vw, 2.1rem);
      --fc-desc-mb: clamp(1.0rem, 1.8vw, 1.8rem);

      position: relative;
      padding: var(--fc-section-pad-top) 0 var(--fc-section-pad-bottom);
      background: var(--fc-ivory);
      overflow: hidden;
    }

    #flex-carousel .fc-anchor {
      display: block;
      position: relative;
      top: -90px;
      height: 0;
      overflow: hidden;
      pointer-events: none;
      visibility: hidden;
    }

    #flex-carousel .fc-opener {
      padding-top: var(--fc-opener-pad-top);
      padding-bottom: var(--fc-opener-pad-bottom);
    }

    #flex-carousel .fc-opener > .container {
      width: min(
        var(--fc-max-width, 1400px),
        calc(100% - (var(--fc-container-gutter, 2rem) * 2))
      ) !important;
      max-width: none !important;
    }

    #flex-carousel .fc-opener-card {
      position: relative;
      overflow: hidden;
      background: color-mix(in srgb, #fff 92%, var(--background-color, #f3eadf));
      border-radius: var(--fc-opener-card-radius);
      padding: var(--fc-opener-card-pad-y) var(--fc-opener-card-pad-x);
      border: 1px solid color-mix(in srgb, var(--accent-color, #e07a5f), transparent 55%);
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px color-mix(in srgb, var(--accent-color, #e07a5f), transparent 82%);
    }

    #flex-carousel .fc-opener-card::before {
      content: "";
      position: absolute;
      inset: -40% -10% auto -10%;
      height: 70%;
      background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
      pointer-events: none;
    }

    #flex-carousel .fc-opener-card::after {
      content: "";
      position: absolute;
      inset: -40%;
      background: linear-gradient(
        120deg,
        transparent 40%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 60%
      );
      transform: translateX(-35%);
      animation: fcCardGlint var(--fc-opener-glint-duration) ease-in-out infinite;
      pointer-events: none;
      mix-blend-mode: soft-light;
      opacity: 0.25;
    }

    #flex-carousel .fc-opener-card h2 {
      margin: 0;
      line-height: 1.05;
      letter-spacing: -0.01em;
      text-align: center;
    }

    #flex-carousel .fc-opener-card p.hide-on-mobile {
      margin: clamp(1.05rem, 1.6vw, 1.45rem) auto 0;
      max-width: 72ch;
      line-height: 1.7;
      font-size: clamp(1.10rem, 0.85vw + 0.90rem, 1.40rem);
      font-weight: 480;
      color: color-mix(in srgb, currentColor 82%, transparent);
      text-align: center;
      text-wrap: balance;
    }

    #flex-carousel .fc-opener-card.section-title > h2.mobile-only {
      font-size: clamp(2rem, 4.6vw, 2rem) !important;
      line-height: 1.15 !important;
      margin: 0 !important;
      letter-spacing: 0.02em;
    }

    #flex-carousel .fc-opener-card.section-title > h2.mobile-only::before,
    #flex-carousel .fc-opener-card.section-title > h2.mobile-only::after,
    #flex-carousel .fc-opener-card.section-title > h2.mobile-only .fc-rule,
    #flex-carousel .fc-opener-card.section-title > h2.mobile-only span[aria-hidden="true"] {
      content: none !important;
      display: none !important;
    }

    @keyframes fcCardGlint {
      0%, 60% { transform: translateX(-35%); opacity: 0; }
      70% { opacity: 0.22; }
      85% { transform: translateX(35%); opacity: 0.18; }
      100% { transform: translateX(35%); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      #flex-carousel .fc-opener-card::after {
        animation: none;
        display: none;
      }
    }

    /* =========================================================
       FLEX CAROUSEL — Background and frame
    ========================================================== */
    #flex-carousel::before {
      content: "";
      position: absolute;
      inset: -40%;
      z-index: 0;
      background:
        radial-gradient(55% 45% at 20% 25%, color-mix(in srgb, var(--fc-g2), transparent 25%), transparent 60%),
        radial-gradient(60% 55% at 75% 35%, color-mix(in srgb, var(--fc-g1), transparent 30%), transparent 62%),
        radial-gradient(65% 60% at 50% 80%, color-mix(in srgb, var(--fc-g3), transparent 35%), transparent 65%),
        linear-gradient(120deg, var(--fc-g4), var(--fc-g1), var(--fc-g2), var(--fc-g3));
      background-size: 140% 140%;
      filter: blur(24px) saturate(1.05);
      opacity: 0.85;
      animation: fcDream 18s ease-in-out infinite alternate;
      transform: translate3d(0, 0, 0);
    }

    @keyframes fcDream {
      0% { transform: translate(-2%, -1%) scale(1.02); background-position: 0% 40%; }
      50% { transform: translate(2%, 1%) scale(1.05); background-position: 55% 55%; }
      100% { transform: translate(-1%, 2%) scale(1.03); background-position: 100% 45%; }
    }

    @media (prefers-reduced-motion: reduce) {
      #flex-carousel::before {
        animation: none;
      }
    }

    #flex-carousel .fc-container {
      width: min(var(--fc-max-width), calc(100% - (var(--fc-container-gutter) * 2)));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    #flex-carousel .carousel {
      width: 100%;
      max-width: var(--fc-max-width);
      max-height: var(--fc-max-height);
      height: clamp(520px, 62vh, var(--fc-max-height));
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      background: var(--fc-bg);
      border-radius: clamp(14px, 1.2vw, 18px);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
      touch-action: pan-y;
    }

    /* =========================================================
       FLEX CAROUSEL — Slides and panels
    ========================================================== */
    #flex-carousel .carousel-item {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: flex-end;
      position: absolute;
      inset: 0;
      background: var(--fc-bg);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transition: opacity 420ms ease, z-index 0s linear 420ms;
    }

    #flex-carousel .carousel-item.active {
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
      transition: opacity 420ms ease;
    }

    #flex-carousel .carousel-item__info {
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      order: 1;
      width: var(--fc-info-w);
      padding: 0 var(--fc-info-pad-x);
    }

    #flex-carousel .carousel-item__container {
      max-width: 28rem;
    }

    #flex-carousel .carousel-item__image {
      order: 2;
      width: var(--fc-image-w);
      flex-basis: var(--fc-image-w);
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transform: translateX(100%);
      transition: transform 0.6s ease-in-out;
    }

    #flex-carousel .carousel-item.active .carousel-item__image {
      transform: translateX(0);
    }

    /* =========================================================
       FLEX CAROUSEL — Typography and motion
    ========================================================== */
    #flex-carousel .carousel-item__subtitle,
    #flex-carousel .carousel-item__title,
    #flex-carousel .carousel-item__description,
    #flex-carousel .carousel-item__btn {
      transform: translateY(25%);
      opacity: 0;
      visibility: hidden;
      transition: 0.6s all ease-in-out;
    }

    #flex-carousel .carousel-item.active .carousel-item__subtitle,
    #flex-carousel .carousel-item.active .carousel-item__title,
    #flex-carousel .carousel-item.active .carousel-item__description,
    #flex-carousel .carousel-item.active .carousel-item__btn {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    #flex-carousel .carousel-item__subtitle {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.9em;
      margin: 0 auto;
      font-family: var(--fc-font-accent);
      font-size: var(--fc-subtitle-size);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--fc-muted);
      font-weight: 600;
    }

    #flex-carousel .carousel-item__subtitle::before,
    #flex-carousel .carousel-item__subtitle::after {
      content: none !important;
      display: none !important;
    }

    #flex-carousel .carousel-item__subtitle .fc-subtitle-text {
      display: inline-block;
      white-space: nowrap;
    }

    #flex-carousel .carousel-item__subtitle .fc-rule {
      flex: 0 0 auto;
      width: clamp(2.25rem, 6vw, 4.75rem);
      height: 1px;
      background: var(--fc-accent);
      opacity: 0.9;
      transform: translateY(0.05em);
    }

    #flex-carousel .carousel-item__title {
      margin: var(--fc-gap-1) 0 0 0;
      margin-bottom: 0 !important;
      font-family: var(--fc-font-headline);
      font-weight: 400;
      font-size: var(--fc-title-size);
      line-height: 1.02;
      letter-spacing: 0.06em;
      color: var(--fc-title);
    }

    #flex-carousel .carousel-item__title + .carousel-item__description {
      margin-top: clamp(0.85rem, 0.6vw + 0.55rem, 1.35rem) !important;
    }

    #flex-carousel .carousel-item__description {
      margin: 0;
      font-family: var(--fc-font-body, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
      font-weight: 400 !important;
      font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.20rem) !important;
      line-height: 1.72 !important;
      letter-spacing: -0.01em !important;
      color: rgba(0, 0, 0, 0.72) !important;
      text-align: left !important;
      text-wrap: pretty;
      max-width: 56ch;
    }

    #flex-carousel .carousel-item__description strong {
      font-weight: 700 !important;
      color: rgba(0, 0, 0, 0.78) !important;
    }

    #flex-carousel .carousel-item__description br + br {
      display: block;
      content: "";
      margin-top: 0.9rem;
    }

    @media (max-width: 991.98px) {
      .carousel-item__title {
        display: none !important;
      }
    }

   /* =========================================================
   FLEX CAROUSEL — Slide images
========================================================= */
#flex-carousel .carousel-item--1 .carousel-item__image { background-image: url('../img/services/website.webp'); }
#flex-carousel .carousel-item--2 .carousel-item__image { background-image: url('../img/services/hosting.webp'); background-position: 90% center; }
#flex-carousel .carousel-item--3 .carousel-item__image { background-image: url('../img/services/paid-social.webp'); background-position: 90% center; }
#flex-carousel .carousel-item--4 .carousel-item__image { background-image: url('../img/services/seo.webp'); background-position: 70% center; }
#flex-carousel .carousel-item--5 .carousel-item__image { background-image: url('../img/services/tracking.webp'); }
#flex-carousel .carousel-item--6 .carousel-item__image { background-image: url('../img/services/reporting.webp'); }
    /* =========================================================
       FLEX CAROUSEL — Navigation controls
    ========================================================== */
    #flex-carousel .carousel__nav {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: var(--fc-bg);
      border-top-left-radius: 12px;
      overflow: hidden;
      display: inline-flex;
    }

    #flex-carousel .carousel__arrow {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: clamp(11px, 1vw, 14px) clamp(15px, 1.4vw, 18px);
      position: relative;
      user-select: none;
    }

    #flex-carousel .carousel__arrow:nth-child(1)::after {
      content: '';
      right: -3px;
      position: absolute;
      width: 1px;
      background-color: var(--fc-divider);
      height: 14px;
      top: 50%;
      margin-top: -7px;
    }

    #flex-carousel .carousel__icon {
      width: clamp(16px, 1.1vw, 18px);
      height: clamp(16px, 1.1vw, 18px);
      fill: var(--fc-icon);
    }

    @media (min-width: 768px) {
      #flex-carousel .carousel__nav {
        top: 14px;
        right: 14px;
        bottom: auto;
        left: auto;
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        background: color-mix(in srgb, var(--fc-bg), transparent 18%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
        padding: 6px;
        gap: 6px;
      }

      #flex-carousel .carousel__arrow {
        padding: 10px 12px;
        border-radius: 999px;
        transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
      }

      #flex-carousel .carousel__arrow:nth-child(1)::after {
        content: none !important;
        display: none !important;
      }

      #flex-carousel .carousel__arrow:hover {
        background: color-mix(in srgb, var(--fc-accent), white 88%);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-accent), transparent 55%);
        transform: translateY(-1px);
      }

      #flex-carousel .carousel__arrow:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--fc-accent), transparent 35%);
        outline-offset: 2px;
      }

      #flex-carousel .carousel__icon {
        width: 18px;
        height: 18px;
        fill: var(--fc-icon);
      }
    }

    /* =========================================================
       FLEX CAROUSEL — CTA
    ========================================================== */
    .carousel-item__container .fc-cta {
      --cta-h: clamp(2.6rem, 2.2vw, 3rem);
      --cta-numW: clamp(2.6rem, 2.2vw, 3rem);
      --cta-iconW: clamp(2.6rem, 2.2vw, 3rem);
      --cta-padX: clamp(0.95rem, 1.2vw, 1.15rem);

      max-width: 18.5rem;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: var(--cta-h);
      line-height: var(--cta-h);
      padding: 0 var(--cta-padX) 0 calc(var(--cta-numW) + var(--cta-padX));
      border-radius: 0.5rem;
      font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: clamp(0.85rem, 1vw, 0.95rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      border: 2px solid transparent;
      background: #ff7f50;
      color: #fff;
      transition:
        background-color 250ms linear,
        color 250ms linear,
        border-color 250ms linear,
        transform 150ms ease,
        padding 180ms ease;
    }

    .carousel-item__container .fc-cta:active {
      transform: translateY(1px);
    }

    .carousel-item__container .fc-cta__num {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--cta-numW);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.075);
      transition: transform 180ms ease;
      font-size: 1.05em;
    }

    .carousel-item__container .fc-cta__num i {
      font-size: 1.15em;
      line-height: 1;
      display: inline-block;
    }

    .carousel-item__container .fc-cta__label {
      display: inline-block;
      padding-right: calc(var(--cta-iconW) + 0.65rem);
    }

    .carousel-item__container .fc-cta__icon {
      position: absolute;
      inset: 0 calc(var(--cta-iconW) * -1) 0 auto;
      width: var(--cta-iconW);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.20);
      transition: transform 180ms ease;
      font-size: 1.05em;
    }

    @media (hover: hover) {
      .carousel-item__container .fc-cta:hover {
        padding-left: var(--cta-padX);
        padding-right: calc(var(--cta-iconW) + var(--cta-padX));
        background: #cc5434;
      }

      .carousel-item__container .fc-cta:hover .fc-cta__num {
        transform: translateX(calc(var(--cta-numW) * -1));
      }

      .carousel-item__container .fc-cta:hover .fc-cta__icon {
        transform: translateX(calc(var(--cta-iconW) * -1));
      }
    }

    /* =========================================================
       FLEX CAROUSEL — Mobile adjustments
    ========================================================== */
    @media (max-width: 767.98px) {
      #flex-carousel {
        --fc-section-pad-top: clamp(1rem, 3vw, 1.75rem);
        --fc-section-pad-bottom: clamp(1.75rem, 4vw, 2.5rem);
        --fc-title-size: clamp(2.15rem, 5.2vw + 1.1rem, 2.85rem);
        --fc-body-size: clamp(1.06rem, 1.2vw + 0.92rem, 1.20rem);
        --fc-body-leading: 1.62;
        --fc-desc-mt: 0.9rem;
        --fc-desc-mb: 1rem;
      }

      #flex-carousel .fc-opener > .container {
        width: 100% !important;
        padding-left: var(--fc-opener-mobile-container-pad) !important;
        padding-right: var(--fc-opener-mobile-container-pad) !important;
      }

      #flex-carousel .fc-opener {
        padding-top: 1.1rem;
        padding-bottom: 1.15rem;
      }

      #flex-carousel .fc-opener-card {
        width: 100%;
        max-width: var(--fc-opener-card-max-mobile);
        margin: 0 auto;
        border-radius: var(--fc-opener-card-radius-mobile);
        padding: 1.05rem 1.1rem;
      }

      #flex-carousel .fc-opener-card h2 {
        font-size: clamp(1.55rem, 5.6vw, 2rem);
      }

      #flex-carousel .carousel {
        height: auto !important;
        min-height: clamp(520px, 76vh, 760px);
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.08);
        position: relative;
      }

      #flex-carousel .carousel-item {
        display: block;
        height: auto !important;
        min-height: inherit;
        padding-bottom: 5.1rem;
      }

      #flex-carousel .carousel-item__image {
        display: none !important;
      }

      #flex-carousel .carousel-item__info {
        width: 100% !important;
        padding: 1.55rem 1.05rem 1.25rem !important;
      }

      #flex-carousel .carousel-item__container {
        max-width: 40rem;
        margin-inline: auto;
        max-height: calc(100vh - 220px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0 !important;
        text-align: center;
      }

      #flex-carousel .carousel-item__description {
        font-size: clamp(1.06rem, 1.1vw + 0.92rem, 1.20rem) !important;
        line-height: 1.70 !important;
        max-width: 44ch;
      }

      #flex-carousel .carousel__nav {
        position: absolute;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 14px;
        z-index: 5;
        background: transparent;
        border: 0;
        padding: 0;
        display: inline-flex;
        gap: 18px;
        align-items: center;
        justify-content: center;
      }

      #flex-carousel .carousel__arrow {
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--fc-accent), white 88%);
        border: 1px solid color-mix(in srgb, var(--fc-accent), transparent 45%);
        box-shadow: none;
        border-left: 0 !important;
      }

      #flex-carousel .carousel__icon {
        width: 22px;
        height: 22px;
        fill: var(--fc-accent);
      }

      #flex-carousel .carousel__arrow:nth-child(1)::after,
      #flex-carousel .carousel__nav::before,
      #flex-carousel .carousel__nav::after {
        content: none !important;
        display: none !important;
      }
    }

    @media (max-width: 991.98px) {
      .carousel-item__container .fc-cta {
        margin: 1.25rem auto 0;
      }

      .slide-actions {
        gap: 0.45rem;
      }

      .slide-actions .amicusae-portfolio-btn {
        padding: 0.5rem 0.75rem;
        border-width: 1.5px;
        font-size: 0.85rem;
        border-radius: 999px;
      }
    }