/* ================================================================
   Sticky Image Scroll  v3.1
   .sis-desktop  — shown on > 768px,  hidden on mobile
   .sis-mobile   — shown on ≤ 768px,  hidden on desktop
   ================================================================ */

.sis-wrap { width: 100%; }

/* ── Section header (shared) ── */
.sis-sec-header { text-align: center; margin-bottom: 60px; padding: 0 16px; }
.sis-sec-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin: 0 0 14px; }
.sis-sec-heading { font-size: clamp(26px,3.5vw,48px); font-weight: 700; line-height: 1.15; color: #111827; margin: 0; }

/* ════════════════════════════════════════
   DESKTOP LAYOUT  (> 768px)
   ════════════════════════════════════════ */
.sis-desktop { display: flex; align-items: stretch; }
.sis-mobile  { display: none; }

.sis-img-right .sis-desktop { flex-direction: row-reverse; }

/* Left sticky image column */
.sis-img-col { width: 48%; flex-shrink: 0; }

.sis-sticky-wrap {
    position: sticky;
    top: 80px;
    padding: 0 40px 32px 0;
}
.sis-img-right .sis-sticky-wrap { padding: 0 0 32px 40px; }

/* Image box: height driven by first image naturally */
.sis-img-box { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #f3f4f6; }

/* Stack all slides; first stays in flow for natural height */
.sis-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; border-radius: inherit; }
.sis-slide:first-child { position: relative; inset: auto; }
.sis-slide.is-active { opacity: 1; }
.sis-slide img { width: 100%; height: auto; display: block; border-radius: inherit; }

/* Right scrollable content column */
.sis-content-col { width: 52%; position: relative; }

/* Vertical dashed timeline line */
.sis-timeline-line { position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px dashed #9ca3af; pointer-events: none; }

/* Content section */
.sis-section { position: relative; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; }

/* Dot on the line */
.sis-dot { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #9ca3af; transform: translateY(-50%); margin-left: -8px; transition: background .3s, border-color .3s; z-index: 1; }
.sis-section.is-active .sis-dot { background: #0d6b5e; border-color: #0d6b5e; }

/* Section inner */
.sis-section-inner { padding: 32px 0 32px 32px; }

/* Eyebrow */
.sis-eyebrow { font-size: 13px; font-style: italic; font-weight: 600; color: #9ca3af; margin: 0 0 10px; transition: color .3s; }
.sis-section.is-active .sis-eyebrow { color: #0d6b5e; }

/* Heading */
.sis-heading { font-size: clamp(22px,2.4vw,36px); font-weight: 700; line-height: 1.2; color: #9ca3af; margin: 0 0 18px; transition: color .3s; }
.sis-section.is-active .sis-heading { color: #111827; }

/* Body */
.sis-body { font-size: 15px; line-height: 1.8; color: #9ca3af; margin: 0 0 28px; transition: color .3s; }
.sis-body p:last-child { margin-bottom: 0; }
.sis-section.is-active .sis-body { color: #4b5563; }

/* Pill button */
.sis-btn { display: inline-block; padding: 10px 24px; border-radius: 50px; border: 1.5px solid #111827; background: transparent; color: #111827; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.sis-btn:hover { background: #111827; color: #fff; text-decoration: none; }
.sis-section:not(.is-active) .sis-btn { display: none; }

/* Divider between desktop sections */
.sis-divider { border: none; border-top: 1px solid #e5e7eb; margin: 0 0 0 32px; }


/* ════════════════════════════════════════
   MOBILE LAYOUT  (≤ 768px)

   Each item layout:
   ──────────────────────────────
   │● dot                        ← dashed line on LEFT of whole item
   │  ┌──────────────────────┐
   │  │  IMAGE (full width)  │
   │  └──────────────────────┘
   │
   │  Eyebrow
   │  Heading
   │  Body text
   │  [Button]
   ──────────────────────────────

   .sis-mobile-item has the border-left (the dashed line).
   Both image and content are padded-left inside it.
   ════════════════════════════════════════ */
@media (max-width: 768px) {

    .sis-desktop { display: none; }
    .sis-mobile  { display: block; }

    .sis-sec-header { margin-bottom: 32px; }

    /* Whole item: the dashed line runs down its entire left edge */
    .sis-mobile-item {
        position: relative;
        border-left: 2px dashed #9ca3af;
        padding-left: 24px;   /* gap between line and content/image */
        margin-left: 8px;     /* small offset so line+dot are visible */
    }

    /* Dot: sits on the line at the very top of the item */
    .sis-mobile-dot {
        position: absolute;
        left: -8px;           /* centre the 14px dot on the 2px line */
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #0d6b5e;
        border: 2px solid #0d6b5e;
        z-index: 1;
    }

    /* Image: full width, natural height, no crop */
    .sis-mobile-item-img {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    .sis-mobile-item-img img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

    /* Content below image: no extra indent needed, already indented by parent padding */
    .sis-mobile-item-content {
        padding-bottom: 28px;
    }

    /* Text — always fully visible on mobile */
    .sis-mobile-item .sis-eyebrow { color: #0d6b5e; font-style: italic; font-weight: 600; font-size: 13px; margin: 0 0 10px; display: block; }
    .sis-mobile-item .sis-heading { color: #111827; font-size: clamp(20px,5vw,26px); font-weight: 700; line-height: 1.2; margin: 0 0 14px; display: block; }
    .sis-mobile-item .sis-body    { color: #4b5563; font-size: 14px; line-height: 1.75; margin: 0 0 20px; display: block; }
    .sis-mobile-item .sis-btn     { display: inline-block; }

    /* Divider between items: spans across and clears the line gap */
    .sis-mobile-divider {
        border: none;
        border-top: 1px solid #e5e7eb;
        margin: 24px 0 24px -10px;  /* extend slightly left past the line */
    }
}