/* ==========================================================================
   Custom Sections Styles
   ========================================================================== */

:root {
    --section-pad: clamp(96px, 12vw, 160px) 0;
    --gap-header: 48px;
    --gap-grid: 22px;

    --surface: #E8EBE8;
}

/* Overriding default body to ensure correct background */
.custom-sections-body {
    background-color: var(--paper);
    color: var(--ink);
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    
    /* Match index spacing: keep --container 100% and inherit the responsive
       --gutter (10% / 7% / 5%) defined in styles.css instead of forcing 5%. */
    --container: 100%;
}

/* SECTION 1: What's slowing you down */
.s1-section {
    padding: clamp(140px, 18vh, 180px) 0 clamp(60px, 10vw, 120px);
    background-color: var(--paper);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}


.s1-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 1;
}

.s1-header {
    margin-bottom: clamp(24px, 4vw, 40px);
    max-width: 800px;
}

.s1-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
}

.s1-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s1-title {
    font-family: var(--font-display);
    font-size: var(--fs-display-xl);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 20px;
}

.s1-subtitle {
    font-size: var(--fs-lede);
    color: var(--ink-soft);
    line-height: 1.5;
}

.s1-br-desktop {
    display: block;
}

/* Grid Layout */
.s1-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--rule);
    border-radius: 0px;
}

/* Card Styling */
.s1-card {
    display: flex;
    flex-direction: column;
    background-color: var(--paper);
}

.s1-card-middle {
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}

.s1-card-content {
    padding: clamp(24px, 3vw, 40px);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.s1-card-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.s1-card-num {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 600;
    color: var(--ink);
}

.s1-card-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.s1-card-body {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    line-height: 1.6;
}

.s1-card-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
}

.s1-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
}

.s1-card:hover .s1-card-image {
    transform: scale(1.03);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .s1-grid {
        grid-template-columns: 1fr;
        border: none;
    }

    .s1-card {
        border: 1px solid var(--rule);
        margin-bottom: 24px;
        border-radius: 8px;
        overflow: hidden;
    }

    .s1-card-middle {
        border-left: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
    }
}

@media (max-width: 640px) {
    .s1-br-desktop {
        display: none;
    }
}

/* SECTION 22: ABOUT US */
.s22-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.s22-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s22-top {
    display: flex;
    gap: clamp(40px, 8vw, 100px);
    margin-bottom: 80px;
}

.s22-top-left {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s22-top-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s22-top-left .eyebrow {
    margin-bottom: 48px;
}

.s22-video-thumb {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    cursor: pointer;
}

.s22-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.s22-video-thumb:hover .s22-thumb-img {
    transform: scale(1.05);
}

.s22-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.s22-play-btn img {
    width: 100%;
    height: 100%;
}

.s22-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    max-width: 900px;
}

.s22-quote-area {
    display: flex;
    align-items: center;
    gap: 40px;
}

.s22-quote {
    flex: 1;
    max-width: 400px;
}

.s22-quote p {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
}

.s22-quote-divider {
    width: 1px;
    height: 60px;
    background-color: var(--ink);
    opacity: 0.2;
}

.s22-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.s22-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.s22-author-info h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px 0;
}

.s22-author-info p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
}

.s22-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.s22-card {
    background-color: var(--paper);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.s22-card-number {
    position: absolute;
    top: 40px;
    right: 40px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
}

.s22-card-stat {
    font-family: var(--font-display);
    font-size: clamp(56px, 6vw, 80px);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 24px 0;   /* was 40px top — dropped */
    line-height: 1;
    letter-spacing: -0.02em;
}

.s22-card-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
    max-width: 280px;
}

@media (max-width: 1100px) {
    .s22-top {
        flex-direction: column;
        gap: 48px;
    }
    .s22-video-thumb {
        max-width: 100%;
    }
    .s22-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .s22-top {
        margin-bottom: 40px;
        gap: 32px;
    }
    .s22-top-left {
        gap: 24px;
    }
    .s22-top-left .eyebrow {
        margin-bottom: 0;
    }
    .s22-top-right {
        gap: 24px;
    }
    .s22-quote-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .s22-quote-divider {
        width: 60px;
        height: 1px;
    }
    .s22-grid {
        grid-template-columns: 1fr;
    }
    .s22-card {
        padding: 32px 24px;
    }
    .s22-card-number {
        top: 24px;
        right: 24px;
    }
}

/* SECTION 23: WHAT WE WORK ON */
.s23-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.s23-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s23-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 48px;
}

.s23-header .eyebrow {
    margin-bottom: 16px;
}

.s23-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.s23-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.s23-left {
    flex: 0 0 420px;
    position: sticky;
    top: 120px;
}

.s23-card {
    background-color: var(--paper);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
}

.s23-card-stats {
    display: flex;
    gap: 32px;
}

.s23-stat {
    flex: 1;
}

.s23-stat h3 {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.03em;
}

.s23-stat h3 span {
    font-size: 40px;
}

.s23-stat h3 span.light-x {
    color: var(--ink-soft);
    opacity: 0.5;
}

.s23-stat p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 12px 0 0 0;
}

.s23-card-divider {
    width: 100%;
    height: 1px;
    background-color: var(--rule);
    margin: 32px 0;
}

.s23-card-stars {
    display: block;
    margin-bottom: 24px;
}

.s23-card-stars img {
    height: 20px;
    width: auto;
    max-width: 120px;
}

.s23-card-quote p {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
}

.s23-card-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.s23-card-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.s23-author-info h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px 0;
}

.s23-author-info p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
}

.s23-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s23-list-item {
    display: flex;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
}

.s23-list-item:first-child {
    padding-top: 0;
}

.s23-item-image {
    width: 320px;
    aspect-ratio: 1.5;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.s23-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.s23-list-item:hover .s23-item-image img {
    transform: scale(1.05);
}

.s23-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s23-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.s23-item-number {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
}

.s23-item-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.s23-item-arrow svg {
    color: var(--ink);
    transition: all 0.3s ease;
}

.s23-list-item:hover .s23-item-arrow {
    background-color: var(--ink);
}

.s23-list-item:hover .s23-item-arrow svg {
    color: var(--paper);
}

.s23-item-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 16px 0;
}

.s23-item-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    max-width: 500px;
}

@media (max-width: 1100px) {
    .s23-header {
        align-items: center;
        text-align: center;
    }
    .s23-content {
        flex-direction: column;
        gap: 40px;
    }
    .s23-left {
        flex: none;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        position: static;
    }
    .s23-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .s23-header {
        margin-bottom: 40px;
    }
    .s23-list-item {
        flex-direction: column;
        gap: 24px;
        padding: 32px 0;
    }
    .s23-item-image {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .s23-item-top {
        margin-bottom: 16px;
    }
    .s23-item-arrow {
        width: 40px;
        height: 40px;
    }
}

/* SECTION 24: HOW WE WORK (HORIZONTAL SCROLL) */
.s24-section {
    height: 300vh;
    background-color: var(--paper);
    border-top: 1px solid var(--rule);
}

.s24-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height, 80px);
}

.s24-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s24-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 64px;
}

.s24-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0;
}

.s24-eyebrow {
    margin-bottom: 16px;
}

.s24-track-wrapper {
    width: 100%;
    overflow: hidden; /* Hide cards before they slide up */
}

.s24-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.s24-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    will-change: transform;
}

.s24-text-card {
    aspect-ratio: 1;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    background-color: var(--paper);
}

.s24-step-number {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: auto;
}

.s24-text-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 16px 0;
}

.s24-text-card p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s24-highlight {
    background-color: #cce0ff;
    padding: 0 4px;
    border-radius: 2px;
}

.s24-img-card {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
}

.s24-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 992px) {
    .s24-section {
        height: auto;
        padding: 80px 0;
    }
    .s24-sticky {
        position: relative;
        height: auto;
        padding-top: 0;
    }
    .s24-track-wrapper {
        overflow: visible;
    }
    .s24-track {
        grid-template-columns: 1fr 1fr;
    }
    .s24-header {
        margin-bottom: 40px;
    }
    .s24-img-card {
        order: 1;
    }
    .s24-text-card {
        order: 2;
    }
}

@media (max-width: 768px) {
    .s24-track {
        grid-template-columns: 1fr;
    }
}

/* SECTION 21: WHY CHOOSE US */
.s21-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--paper);
}

.s21-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s21-grid {
    display: flex;
    gap: clamp(40px, 6vw, 80px);
    align-items: stretch;
}

.s21-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s21-right {
    flex: 0 0 45%;
    display: flex;
    align-items: stretch;
}

.s21-image-wrapper {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    min-height: 600px;
}

.s21-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s21-header {
    margin-bottom: 48px;
}

.s21-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 16px 0 0 0;
    line-height: 1.1;
}

.s21-left-content {
    display: flex;
    gap: 40px;
    flex: 1;
}

.s21-stats {
    flex: 0 0 45%;
    background-color: var(--ink);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--paper);
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.s21-stats::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
}
.s21-stats::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: -20px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
}

.s21-stats-top, .s21-stats-bottom {
    position: relative;
    z-index: 2;
}

.s21-stats-label {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.s21-stats-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1;
}

.s21-stats-value span {
    color: #3ceac7;
}

.s21-stats-progress-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.s21-stats-progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.s21-stats-progress-fill {
    height: 100%;
    background-color: #3ceac7;
    border-radius: 3px;
}

.s21-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s21-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 32px 0;
}

.s21-action {
    margin-bottom: 40px;
}

.s21-divider {
    width: 100%;
    height: 1px;
    background-color: var(--rule);
    margin-bottom: 32px;
}

.s21-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.s21-list-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.s21-list-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s21-list-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s21-list-text h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px 0;
}

.s21-list-text p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 1100px) {
    .s21-left-content {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .s21-grid {
        flex-direction: column;
    }
    .s21-right {
        flex: none;
        width: 100%;
    }
    .s21-image-wrapper {
        min-height: 400px;
    }
}

/* SECTION 20: OUR IMPACT */
.s20-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
}

.s20-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s20-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 64px;
}

.s20-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
}

.s20-content {
    display: flex;
    gap: 32px;
}

.s20-video-wrapper {
    flex: 0 0 45%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1/1;
}

.s20-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s20-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--paper);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--rule);
}

.s20-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.s20-card:nth-child(2n) {
    border-right: none;
}
.s20-card:nth-child(n+3) {
    border-bottom: none;
}

.s20-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.s20-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.s20-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.s20-card-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 992px) {
    .s20-header {
        margin-bottom: 32px;
    }
    .s20-content {
        flex-direction: column;
        gap: 24px;
    }
    .s20-video-wrapper {
        aspect-ratio: 1/1;
    }
}

@media (max-width: 768px) {
    .s20-grid {
        grid-template-columns: 1fr;
    }
    .s20-card:nth-child(2n) {
        border-right: none;
    }
    .s20-card {
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
    .s20-card:nth-child(n+3) {
        border-bottom: 1px solid var(--rule);
    }
    .s20-card:last-child {
        border-bottom: none;
    }
    .s20-card {
        padding: 32px 24px;
    }
}

/* ==========================================================================
   SECTION 2: OUR WORK (Sticky Stacking Cards)
   ========================================================================== */
.s2-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s2-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: clamp(60px, 10vw, 100px);
    position: sticky;
    top: 40px;
    z-index: 5;
    background-color: var(--paper); /* Ensures it remains readable if elements pass behind it */
    padding-bottom: 24px;
}

.s2-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 8vw, 100px);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #032128; /* Dark teal matching design */
    line-height: 0.9;
    margin: 0;
}

.s2-subtitle {
    max-width: 480px;
    font-size: var(--fs-body);
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

/* Stacking Container */
.s2-cards-container {
    position: relative;
    padding-bottom: 80px; /* Space to scroll past the stack */
}

/* Card Styling & Sticky Effect */
.s2-card {
    position: sticky;
    top: 200px;
    background-color: var(--paper);
    border: 1px solid var(--rule);
    padding: clamp(24px, 4vw, 40px);
    margin-bottom: 40px;
    
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: clamp(24px, 4vw, 40px);
    border-radius: 4px;
    z-index: 10;
}

/* Incremental top offsets for stacking below each other */
.s2-card:nth-child(1) { top: 200px; }
.s2-card:nth-child(2) { top: 230px; }
.s2-card:nth-child(3) { top: 260px; }
.s2-card:nth-child(4) { top: 290px; }
.s2-card:nth-child(5) { top: 320px; }
.s2-card:nth-child(6) { top: 350px; }

/* Card Internals */
.s2-card-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    text-transform: uppercase;
    font-weight: 800;
    color: #032128;
    margin: 0;
    letter-spacing: -0.02em;
}

.s2-card-middle {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.s2-card-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.s2-card-tag {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: #032128;
}

.s2-card-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s2-card-right {
    display: flex;
    justify-content: flex-end;
}

.s2-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .s2-header {
        flex-direction: column;
        gap: 24px;
        position: relative; /* Disable sticky on smaller screens */
        top: 0;
    }
    
    .s2-card {
        grid-template-columns: 1fr;
        gap: 32px;
        position: relative; /* Disable sticky on smaller screens for better UX */
        top: 0 !important;
    }
    
    .s2-card-img {
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   SECTION 3: RECENT BLOG
   ========================================================================== */
.s3-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s3-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s3-header {
    text-align: left;
    margin-bottom: clamp(48px, 8vw, 80px);
}

.s3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
}

.s3-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s3-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    color: #032128;
    line-height: 1.1;
    margin: 0;
    max-width: 800px;
    letter-spacing: -0.02em;
}

.s3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 40px);
}

.s3-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}

.s3-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 12px;
}

.s3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
}

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

.s3-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.s3-card-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 500;
    line-height: 1.35;
    color: #032128;
    margin: 0;
    letter-spacing: -0.01em;
}

.s3-card-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .s3-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ==========================================================================
   SECTION 4: PROCESS MARQUEE
   ========================================================================== */
.s4-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper); /* Same bg as other sections */
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}

.s4-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px; /* Reduced gap for mobile */
    padding-inline: var(--gutter);
}

@media (min-width: 992px) {
    .s4-wrapper {
        grid-template-columns: 450px 1fr; /* Wider column to fit title in one line */
        padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
        padding-right: 0; /* Let marquee bleed off the right edge */
        align-items: center;
        gap: 80px;
    }

    .s4-desc {
        margin: 0 0 56px 0; /* Restored gap for desktop */
    }
}

.s4-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.s4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
}

.s4-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s4-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 800;
    color: #032128; /* Dark teal */
    line-height: 1.1;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    white-space: nowrap; /* Ensure one line */
}

.s4-desc {
    font-size: 15px;
    color: var(--ink-soft);
    opacity: 1;
    line-height: 1.6;
    margin: 0 0 32px 0; /* Reduced margin for mobile */
}

.s4-actions {
    display: flex;
    gap: 12px;
}

.s4-right {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 2%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 95%, transparent);
}

.s4-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: s4-marquee 25s linear infinite;
    padding: 20px 0; /* So box-shadows don't get clipped */
}

.s4-track:hover {
    animation-play-state: paused; /* Pauses marquee when hovering */
}

@keyframes s4-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}

.s4-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 56px 48px; /* Slightly bigger padding */
    width: 420px; /* Wider card */
    min-height: 420px; /* Reduced taller card */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* One gap for both rows: label -> title and title -> body are both 14px. */
    gap: 14px;
    border: 1px solid rgba(0,0,0,0.02);
}

.s4-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s4-card-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--ink);
}

.s4-card-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 6vw, 36px); /* Fluid size: 26px on mobile, 36px on desktop */
    font-weight: 700;
    color: #032128;
    margin: 0;
    line-height: 1.2;
}

.s4-card-desc {
    font-size: 17px; /* Increased font size */
    color: var(--ink-soft);
    line-height: 1.7; /* Increased line-height */
    margin: 0;
}

@media (max-width: 991px) {
    .s4-right {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .s4-card {
        min-height: 300px;
        width: 340px;
        padding: 40px 32px;
        gap: 14px;   /* same step as desktop */
    }
}

/* ==========================================================================
   SECTION 5: STATS
   ========================================================================== */
.s5-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s5-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s5-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: clamp(60px, 10vw, 100px);
}

@media (min-width: 992px) {
    .s5-top {
        grid-template-columns: 280px 1fr;
        gap: 80px;
    }
}

.s5-eyebrow-col {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (min-width: 992px) {
    .s5-eyebrow-col {
        align-items: flex-start;
        padding-top: 16px;
    }
}

.s5-eyebrow {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    /* no white-space:nowrap — a long label ran off the right edge on narrow screens */
}

.s5-line-wrap {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
}

@media (min-width: 992px) {
    .s5-line-wrap {
        height: 18px; /* align center with text vertically */
    }
}

.s5-line {
    width: 100%;
    height: 1px;
    background-color: var(--rule);
}

.s5-plus {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
}

.s5-content-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.s5-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
}

.s5-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.s5-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 100px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

.s5-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.s5-btn-light {
    background-color: var(--surface);
    color: var(--ink) !important;
}

.s5-btn-light:hover {
    background-color: var(--surface);
}

.s5-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .s5-bottom {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s5-card {
    background-color: var(--surface);
    border-radius: 8px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(240px, 20vw, 300px);
}

.s5-card-num {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.s5-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.s5-card-label {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
}

.s5-card-index {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-soft);
}

/* ==========================================================================
   SECTION 6: TESTIMONIALS GRID
   ========================================================================== */
.s6-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s6-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s6-header {
    text-align: left;
    margin-bottom: clamp(32px, 5vw, 48px); /* Reduced gap */
}

.s6-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
}

.s6-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s6-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.s6-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.s6-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.02);
    /* no min-height: the old 300px floor left dead space under every short
       quote. Cards hug their content; the grid still equalises row heights. */
}

.s6-card.s6-bg-soft {
    background-color: var(--surface); /* A slightly darker, more visible gray */
    border: none;
}

.s6-card.s6-bg-dark {
    background-color: var(--ink);
}

.s6-card.s6-bg-dark .s6-card-value,
.s6-card.s6-bg-dark .s6-card-text {
    color: var(--paper);
}

.s6-invert {
    filter: invert(1) brightness(2);
}

.s6-span-3 { grid-column: span 3; }
.s6-span-4 { grid-column: span 4; }
.s6-span-6 { grid-column: span 6; }
/* was missing entirely: the full-bleed row card (client-reviews.html) fell back
   to `grid-column: auto` = 1 of the 12 tracks, so it rendered ~1/12 wide and its
   text overflowed. Full width at every breakpoint, so no media override needed. */
.s6-span-12 { grid-column: span 12; }

@media (max-width: 991px) {
    .s6-span-3 { grid-column: span 6; }
    .s6-span-4 { grid-column: span 6; }
    .s6-span-6 { grid-column: span 12; }
}

@media (max-width: 767px) {
    .s6-span-3, .s6-span-4, .s6-span-6 { grid-column: span 12; }
}

.s6-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s6-card-row {
    flex-direction: row;
    gap: 32px;
}

@media (max-width: 767px) {
    .s6-card-row {
        flex-direction: column;
    }
    /* space-between only had room to push because of the old min-height floor */
    .s6-card-left {
        justify-content: flex-start;
    }
}

/* CTA that sits BESIDE a review card rather than inside it — its own grid cell,
   no card chrome. Button hugs the card's left edge, centred against it. */
.s6-cta-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* flush to the grid's right edge */
    padding-block: clamp(24px, 3vw, 40px);
}
@media (max-width: 991px) {
    /* .s6-span-6 becomes span 12 here, so the CTA drops below the card and
       aligns with the card's text instead of the far right edge */
    .s6-cta-cell {
        padding-block: 0;
        justify-content: flex-start;
    }
}

.s6-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s6-card-right {
    flex: 1;
}

.s6-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}

.s6-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s6-play-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.s6-play-btn:hover {
    transform: scale(1.05);
}

.s6-play-btn img {
    width: 16px;
    height: 16px;
}

.s6-card-value {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.03em;
}

.s6-card-text {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s6-text-medium {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}

.s6-card-bottom {
    margin-top: 32px;
}

.s6-right-align {
    text-align: right;
}

.s6-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.s6-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.s6-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s6-author-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.s6-author-title {
    font-size: 13px;
    color: var(--ink-soft);
}

/* ==========================================================================
   SECTION 7: ARTICLES
   ========================================================================== */
.s7-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper); /* Ensure contrast with cards */
    border-bottom: 1px solid var(--rule);
}

.s7-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s7-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px; /* Reduced gap */
    margin-bottom: clamp(32px, 5vw, 48px); /* Reduced gap */
}

.s7-header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
}

.s7-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s7-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s7-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s7-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s7-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .s7-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s7-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.04);
    transition: border-color 0.3s;
}

.s7-card:hover {
    border-color: var(--ink);
}

.s7-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
}

.s7-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.s7-card:hover .s7-card-img {
    transform: scale(1.05);
}

.s7-card-content {
    padding: 0 8px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s7-card-date {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-soft);
}

.s7-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

/* ==========================================================================
   SECTION 8: LATEST PROJECTS (STICKY STACK)
   ========================================================================== */
.s8-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s8-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s8-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 48px;
}

.s8-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s8-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s8-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s8-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.s8-stack-container {
    display: flex;
    flex-direction: column;
    gap: 64px; /* Space between rows */
}

.s8-stack-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .s8-stack-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

.s8-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--paper);
}

.s8-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3; /* Reverted to taller height */
    background-color: var(--surface);
    overflow: hidden;
}

/* ==========================================================================
   SECTION 9: SERVICES / WHAT WE OFFER
   ========================================================================== */
.s9-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s9-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s9-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px; /* Reduced gap */
}

.s9-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s9-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s9-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s9-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.s9-list {
    display: flex;
    flex-direction: column;
    position: relative;
}

.s9-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0;
    border-top: 1px solid var(--rule);
    
    /* Sticky stacking magic */
    position: sticky;
    top: 40px;
    background-color: var(--paper); /* Solid background to occlude the rows underneath */
}

@media (min-width: 992px) {
    .s9-row {
        top: 80px; /* A bit more breathing room on desktop */
    }
}

.s9-row:last-child {
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 992px) {
    .s9-row {
        grid-template-columns: 60px 2.5fr 4fr 3.5fr;
        gap: 40px;
    }
}

.s9-index {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
}

.s9-row-title h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 992px) {
    .s9-row-title h3 {
        font-size: 24px;
    }
}

.s9-row-img-wrap {
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--surface);
    overflow: hidden;
}

.s9-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s9-row-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.s9-row-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0 0 32px 0;
}

.s9-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.s9-service {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* ==========================================================================
   SECTION 10: CORE VALUES
   ========================================================================== */
.s10-section {
    padding: clamp(80px, 12vw, 160px) 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s10-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s10-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px; /* Reduced gap to fix gap issue */
}

.s10-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s10-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s10-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 800px;
}

.s10-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .s10-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .s10-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.s10-card {
    background-color: var(--surface); /* Darker, more visible grey */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.02); /* Very subtle border to help edges */
}

.s10-card-top {
    padding: 32px;
    min-height: 0;
}
.s10-card { padding: 0 !important; overflow: hidden; }
.s10-card-bottom { padding: 32px !important; }

/* Mobile — tighter 24px inner padding on the numbered cards */
@media (max-width: 767px) {
    .s10-card-top { padding: 24px; }
    .s10-card-bottom { padding: 24px !important; }
}

.s10-icon-wrap {
    width: 48px;
    height: 48px;
    background-color: var(--ink); /* Matches your brand dark color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s10-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Turns the colored SVG icon perfectly white */
}

.s10-card-bottom {
    padding: 24px;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s10-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.s10-card-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   SECTION 11: FEATURES
   ========================================================================== */
.s11-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s11-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s11-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: var(--gap-header);
}

.s11-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s11-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s11-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s11-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.s11-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
}

@media (min-width: 768px) {
    .s11-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.s11-card {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.s11-card:hover {
    background-color: var(--ink);
    border-color: var(--ink);
}

.s11-card:hover .s11-card-title,
.s11-card:hover .s11-card-link {
    color: #ffffff;
}

.s11-card:hover .s11-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

.s11-card:hover .s11-icon-wrap {
    background-color: rgba(255, 255, 255, 0.1);
}

/* inline SVG icons (kubernetes-platform-engineering.html) — stroke inherits
   currentColor, i.e. --ink, which flips with the theme like --surface does */
.s11-icon-wrap svg {
    width: 26px;
    height: 26px;
    flex: none;
}
.s11-icon-wrap {
    width: 64px;
    height: 64px;
    background-color: var(--surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.s11-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.s11-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.s11-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px 0;
    transition: color 0.3s ease;
}

.s11-card-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;   /* was 0 0 24px — bottom margin dropped */
    flex-grow: 1;
    transition: color 0.3s ease;
}

.s11-card-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s ease, color 0.3s ease;
    margin-top: auto;
}

.s11-card-link:hover {
    gap: 12px;
}

/* ==========================================================================
   SECTION 12: RESULTS
   ========================================================================== */
.s12-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s12-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s12-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px; /* Reduced gap between header and cards */
}

@media (min-width: 992px) {
    .s12-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; /* Align text to top */
        gap: 64px;
    }
    
    .s12-header-right {
        flex: 0 0 400px;
    }
}

.s12-header-left {
    flex: 1;
    max-width: none;   /* was 800px — s12-title's 75% must resolve against the row */ /* Increased max width for the title */
}

.s12-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.s12-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s12-text-muted {
    color: var(--ink-soft);
}

.s12-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s12-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--ink);
    color: var(--paper);
    padding: 12px 16px 12px 24px;
    border-radius: 99px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.s12-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.s12-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--paper);
    color: var(--ink);
    border-radius: 50%;
    font-size: 14px;
}

.s12-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
}

@media (min-width: 768px) {
    .s12-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.s12-card {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

.s12-card-top {
    padding: 0;
    flex-grow: 1;
}

.s12-card-brand {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}

.s12-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
    margin-top: 24px;
}

.s12-metric {
    background-color: var(--surface);
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s12-metric-val {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
}

.s12-metric-label {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

/* ==========================================================================
   SECTION 14: FAQ
   ========================================================================== */
.s14-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s14-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s14-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: var(--gap-header);
    max-width: 800px;
}

.s14-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s14-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s14-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s14-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.s14-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s14-accordion-item {
    background-color: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.s14-accordion-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
}

.s14-accordion-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    padding-right: 24px;
    /* the btn is `justify-content: space-between`, so the title was shrink-to-fit.
       Fill the row; the icon keeps its own flex-shrink:0 slot on the right. */
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.s14-accordion-icon {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: transparent;
    color: var(--ink);
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.s14-accordion-icon::before,
.s14-accordion-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

/* Horizontal line of plus */
.s14-accordion-icon::before {
    width: 14px;
    height: 2px;
}

/* Vertical line of plus */
.s14-accordion-icon::after {
    width: 2px;
    height: 14px;
}

/* Hover */
.s14-accordion-item:hover .s14-accordion-icon {
    background-color: var(--teal);
    color: var(--paper);
    border-color: var(--teal);
}

/* Active State — plus collapses to minus */
.s14-accordion-item.active .s14-accordion-icon {
    background-color: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.s14-accordion-item.active .s14-accordion-icon::after {
    transform: scaleY(0);
}

.s14-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.s14-accordion-item.active .s14-accordion-content {
    max-height: 1000px;
    transition: max-height 0.6s ease-in-out;
}

.s14-accordion-content p {
    padding: 0 32px 32px 32px;
    margin: 0;
    font-size: 18px;              /* desktop */
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 80%;               /* desktop + tablet */
}
@media (max-width: 1024px) { .s14-accordion-content p { font-size: 16px; } }  /* tablet — 80% inherited */
@media (max-width: 640px)  { .s14-accordion-content p { font-size: 15px; max-width: 100%; } }  /* mobile */

/* ==========================================================================
   SECTION 15: FAQ STICKY IMAGE
   ========================================================================== */
.s15-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s15-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s15-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}

@media (min-width: 992px) {
    .s15-content-wrapper {
        grid-template-columns: 1fr 1.2fr;
        gap: 24px; /* Further reduced column gap */
    }
}

.s15-col-left {
    position: relative;
}

.s15-sticky-block {
    position: relative;
}

@media (min-width: 992px) {
    .s15-col-left {
        height: 100%;
    }
    .s15-sticky-block {
        position: sticky;
        top: 120px;
    }
}

.s15-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* Vertical portrait ratio */
    max-height: 80vh;
    object-fit: cover;
    border-radius: 0;
}

.s15-col-right {
    display: flex;
    flex-direction: column;
}

.s15-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: var(--gap-header);
}

.s15-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s15-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s15-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s15-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s15-accordion-item {
    background-color: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.s15-accordion-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
}

.s15-accordion-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    padding-right: 24px;
}

.s15-accordion-icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.s15-accordion-icon::before,
.s15-accordion-icon::after {
    content: '';
    position: absolute;
    background-color: var(--ink);
    transition: transform 0.3s ease;
}

.s15-accordion-icon::before {
    width: 12px;
    height: 2px;
}

.s15-accordion-icon::after {
    width: 2px;
    height: 12px;
}

.s15-accordion-item.active .s15-accordion-icon::before {
    transform: rotate(45deg);
}

.s15-accordion-item.active .s15-accordion-icon::after {
    transform: rotate(45deg);
}

.s15-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.s15-accordion-item.active .s15-accordion-content {
    max-height: 1000px;
    transition: max-height 0.6s ease-in-out;
}

.s15-accordion-content p {
    padding: 0 32px 32px 32px;
    margin: 0;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 800px;
}


.s8-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s8-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s8-card-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.s8-card-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s8-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.s8-tag {
    background-color: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 100px;
}

/* ==========================================================================
   SECTION 16: TESTIMONIALS
   ========================================================================== */
.s16-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
    overflow: hidden; /* Hide horizontal marquee scrollbar */
}

.s16-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-bottom: 64px;
}

.s16-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 600px;
}

.s16-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono, 11.5px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.s16-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ink);
}

.s16-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s16-desc {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s16-marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.s16-marquee {
    display: flex;
    width: max-content;
}

.s16-marquee-track {
    display: flex;
    flex-shrink: 0;
    animation: s16-scroll-left 40s linear infinite;
}

.s16-marquee-right .s16-marquee-track {
    animation: s16-scroll-right 40s linear infinite;
}

@keyframes s16-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes s16-scroll-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.s16-card {
    width: 450px;
    margin-right: 24px;
    padding: 40px;
    background-color: var(--surface);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.s16-quote-icon {
    color: var(--ink);
    opacity: 0.2;
}

.s16-quote-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.s16-card-text {
    font-size: 16px;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    flex-grow: 1;
}

.s16-card-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.s16-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.s16-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s16-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.s16-card-title {
    font-size: 14px;
    color: var(--ink-soft);
}

@media (max-width: 768px) {
    .s16-card {
        width: 300px;
        padding: 32px;
    }
}

/* ==========================================================================
   SECTION 17: VIDEO REEL
   ========================================================================== */
.s17-section {
    background-color: var(--paper);
    position: relative;
    border-bottom: 1px solid var(--rule);
}

.s17-scroll-container {
    height: 300vh; /* Creates the scrollable space */
    position: relative;
}

.s17-sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s17-text-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1; /* Behind video */
}

.s17-text-col {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
}

.s17-text-left-col {
    justify-content: flex-end;
    padding-right: 17%; /* 15% (half video) + 2% gap */
}

.s17-text-right-col {
    justify-content: flex-start;
    padding-left: 17%; /* 15% (half video) + 2% gap */
}

.s17-text-left, .s17-text-right {
    font-family: var(--font-display);
    font-size: clamp(40px, 10vw, 120px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.04em;
}

.s17-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* In front of text */
    clip-path: inset(30% 35% 30% 35% round 12px);
    -webkit-clip-path: inset(30% 35% 30% 35% round 12px);
    will-change: clip-path, -webkit-clip-path;
}

.s17-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .s17-video-wrapper {
        clip-path: inset(30% 10% 30% 10% round 12px);
        -webkit-clip-path: inset(30% 10% 30% 10% round 12px);
    }
}

/* ==========================================================================
   SECTION 18: FEATURES GRID
   ========================================================================== */
.s18-section {
    padding: var(--section-pad);
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.s18-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s18-header-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 64px;
}

.s18-title-centered {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.s18-desc-centered {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s18-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-grid);
}

.s18-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-grid);
}

.s18-card {
    background-color: var(--surface);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1; /* Stretch vertically */
    justify-content: flex-start;
}

.s18-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
}

.s18-icon-wrapper img {
    width: 20px;
    height: 20px;
    display: block;
    filter: invert(1);
    opacity: 0.8;
}

.s18-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.s18-card-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.s18-col-image {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s18-center-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

@media (max-width: 992px) {
    .s18-grid {
        grid-template-columns: 1fr;
    }
    .s18-col-image {
        order: -1; /* image on top on mobile */
    }
}

/* ==========================================================================
   SECTION 19: EXPERTISE ACCORDION
   ========================================================================== */
.s19-section {
    padding: clamp(60px, 10vw, 120px) 0;
    background-color: var(--paper);
    border-top: 1px solid var(--rule);
}
.s19-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s19-header-standard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
}
.s19-title-standard {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.s19-accordion {
    display: flex;
    gap: 0;
    height: 600px;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}

.s19-item {
    flex: 0 0 200px;
    border-right: 1px solid var(--rule);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: flex 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    background-color: var(--paper);
    display: flex;
    flex-direction: column;
}
.s19-item:last-child {
    border-right: none;
}
.s19-item.is-active {
    flex: 1;
    background: var(--paper);
    cursor: default;
}

.s19-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 16px;
    gap: 8px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.s19-item.is-active .s19-item-top {
    border-bottom: none;
}
.s19-item-label {
    flex-shrink: 0;
}
.s19-item-line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--rule);
}
.s19-item-num {
    flex-shrink: 0;
}

/* Expanded Content */
.s19-item-content {
    padding: 0 24px 24px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease 0s, visibility 0s 0.4s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.s19-item.is-active .s19-item-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.3s;
}

.s19-item-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 24px;
}

.s19-item-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 16px 0;
}

.s19-item-desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.s19-item-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.s19-pill {
    padding: 8px 16px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Collapsed Title */
.s19-item-collapsed {
    position: absolute;
    /* was `bottom:24px` + height:auto, which left the vertical title with no
       definite height to wrap against. Pin top and bottom so the rotated title
       has a real column height (item height - the "Q ... (0X)" bar - 24px). */
    top: 68px;
    right: 12px;
    bottom: 24px;
    left: 12px;
    transform: none;
    display: flex;
    align-items: flex-end;      /* title sits on the bottom edge, as before */
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.3s;
}
.s19-item.is-active .s19-item-collapsed {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease 0s, visibility 0s 0.2s;
}
.s19-item-collapsed-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--ink-soft);
    margin: 0;
    /* was `white-space: nowrap` — a long question ran past the 600px accordion
       and .s19-item{overflow:hidden} cut the top off. Let it wrap to a second
       column; max-height is the definite height set by .s19-item-collapsed. */
    white-space: normal;
    max-height: 100%;
    writing-mode: vertical-rl;
    position: static;
    transform-origin: center;
    transform: rotate(180deg);
}

@media (max-width: 992px) {
    .s19-accordion {
        flex-direction: column;
        height: auto;
        border: 1px solid var(--rule);
    }
    .s19-item {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--rule);
        width: 100%;
    }
    .s19-item:last-child {
        border-bottom: none;
    }
    .s19-item.is-active {
        flex: 1 0 auto;
    }
    .s19-item-top {
        padding: 16px 24px;
    }
    /* persistent title header — always visible, never animates (no cross-fade flash) */
    .s19-item-collapsed {
        position: static;
        display: block;   /* undo the desktop flex column used for the rotated title */
        inset: auto;
        order: 1;
        padding: 0 24px 14px 24px;
        transform: none;
        width: auto;
        text-align: left;
        max-height: none;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transition: none;
    }
    .s19-item.is-active .s19-item-collapsed {
        max-height: none;
        padding: 0 24px 14px 24px;
        opacity: 1;
        visibility: visible;
    }
    .s19-item-collapsed-title {
        writing-mode: horizontal-tb;
        transform: none;
        position: static;
        font-size: 24px;
        transition: color 0.3s ease;
    }
    .s19-item.is-active .s19-item-collapsed-title { color: var(--ink); }
    /* body (desc + pills) is the only thing that expands/collapses */
    .s19-item-content {
        order: 2;
        height: auto;
        max-height: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.45s ease-out, padding-bottom 0.45s ease-out, opacity 0.25s ease, visibility 0s 0.45s;
    }
    .s19-item-content .s19-item-title { display: none; }  /* duplicate of the persistent header */
    .s19-item.is-active .s19-item-content {
        max-height: 800px;
        padding-bottom: 24px;
        opacity: 1;
        visibility: visible;
        transition: max-height 0.45s ease-out, padding-bottom 0.45s ease-out, opacity 0.3s ease 0.05s, visibility 0s 0s;
    }
}

/* SECTION 25: PRICING */
.s25-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
    border-top: 1px solid var(--rule);
}

.s25-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.s25-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.s25-header .eyebrow {
    margin-bottom: 16px;
}

.s25-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.s25-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}

.s25-toggle {
    display: inline-flex;
    background-color: #f5f5f5;
    border-radius: 40px;
    padding: 4px;
}

.s25-toggle-btn {
    padding: 12px 32px;
    border-radius: 40px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;   /* keep the toggle label on one line */
}

/* s25 plan card: sections fill the card edge-to-edge with a single 32px inner padding (no double padding) */
.s25-card { padding: 0 !important; overflow: hidden; }
.s25-card-top, .s25-card-bottom { padding: 32px !important; }
/* space between the price and the CTA (they sit in the same price-block column) */
.s25-price-block { gap: 20px; }
/* smaller CTA button */
.s25-btn { padding: 13px 26px !important; }
/* contact box is an inner box — keep its own compact padding, not the global 32px */
.s25-contact-box { padding: 20px !important; }
/* action row wraps instead of overflowing the card padding, with space above (price -> button) */
.s25-plan-action-area { flex-wrap: wrap; min-width: 0; margin-top: 24px; }
.s25-plan-action-area > * { min-width: 0; }
/* let long plan titles wrap inside the card instead of overflowing the padding */
.s25-plan-word { white-space: normal !important; overflow-wrap: break-word; }
/* smaller card content fonts (title / subtitle / price were oversized) */
.s25-plan-name { font-size: clamp(28px, 3vw, 44px) !important; }
.s25-plan-desc { font-size: 18px !important; }
.s25-price { font-size: 42px !important; }
/* breathing room between the stacked card content (was congested) */
.s25-mode { margin-bottom: 12px !important; }
.s25-plan-name { margin-bottom: 18px !important; }
.s25-plan-desc { margin-bottom: 32px !important; line-height: 1.5 !important; }
.s25-plan-desc strong { display: inline-block; margin-top: 10px; }

.s25-toggle-btn.is-active {
    background-color: var(--ink);
    color: #fff;
}

.s25-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.s25-card {
    border: 1px solid var(--rule);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.s25-card-top {
    padding: 40px 20px;
}

.s25-top-light {
    background-color: #f7f7f7;
}

.s25-top-dark {
    background-color: #1a1a1a;
    color: #fff;
}

.s25-plan-name {
    font-family: var(--font-display);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--ink-soft);
}

.s25-top-dark .s25-plan-name {
    color: rgba(255, 255, 255, 0.5);
}

.s25-plan-desc {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 56px;
    letter-spacing: -0.01em;
}

.s25-plan-desc span {
    color: var(--ink-soft);
}

.s25-plan-desc strong {
    font-weight: 500;
}

.s25-top-dark .s25-plan-desc span {
    color: rgba(255, 255, 255, 0.5);
}

.s25-top-dark .s25-plan-desc strong {
    color: #fff;
    font-weight: 500;
}

.section-divider {
    max-width: var(--container);
    margin: 0 auto;
    border-top: 1px solid var(--rule);
}

.s25-plan-action-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.s25-price-block {
    display: flex;
    flex-direction: column;
}

.s25-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.s25-price {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}

.s25-price-period {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
}

.s25-top-dark .s25-price-period {
    color: rgba(255, 255, 255, 0.5);
}

.s25-btn {
    gap: 8px;
    width: max-content;
    padding: 16px 36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.s25-btn-white {
    background-color: #fff !important;
    color: var(--ink) !important;
    border-color: #fff !important;
}
.s25-btn-white:hover {
    background-color: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
}

.s25-contact-box {
    padding: 24px;
    border-radius: 16px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

.s25-contact-light {
    background-color: #ededed;
}

.s25-contact-dark {
    background-color: #2a2a2a;
}

.s25-contact-box p {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px 0;
    color: var(--ink-soft);
}

.s25-top-dark .s25-contact-box p {
    color: rgba(255, 255, 255, 0.7);
}

.s25-box-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #fff !important;
    color: var(--ink) !important;
    border-color: #fff !important;
}
.s25-box-btn:hover {
    background-color: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
}

.s25-box-btn-dark {
    background-color: #3a3a3a !important;
    color: #fff !important;
    border-color: #3a3a3a !important;
}
.s25-box-btn-dark:hover {
    background-color: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
}

.s25-card-bottom {
    padding: 40px 20px;
    background-color: #fff;
    flex: 1;
}

.s25-included-title {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 0 24px 0;
}

.s25-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.s25-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s25-features-list li {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.s25-features-list li svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Toggle Logic */
.s25-section:not(.is-project) .s25-card:nth-child(1) .s25-toggle-feature {
    opacity: 0.4;
}

.s25-section.is-project .s25-card:nth-child(2) .s25-toggle-feature {
    opacity: 0.4;
}

@media (max-width: 1100px) {
    .s25-card-top {
        padding: 32px;
    }
    .s25-card-bottom {
        padding: 32px;
    }
    .s25-plan-action-area {
        flex-direction: column;
        align-items: flex-start;
    }
    .s25-contact-box {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .s25-grid {
        grid-template-columns: 1fr;
    }
    .s25-features-grid {
        grid-template-columns: 1fr;
    }
}

/* SECTION 26: NEW PRICING */
.s26-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
}

.s26-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.s26-header {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s26-header .eyebrow {
    margin-bottom: 16px;
}

.s26-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    line-height: 1.1;
    color: var(--ink);
}

.s26-subtitle {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0;
}

.s26-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.s26-card {
    background-color: #fff;
    border: 1px solid var(--rule);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.s26-video-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    background-color: var(--ink);
}

.s26-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s26-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.s26-plan-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.s26-plan-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 24px;
    line-height: 1.4;
}

.s26-btn-group {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.s26-btn-group .btn-classy {
    flex: 1;
}

.s26-btn-icon {
    flex: 0 0 auto !important;
    padding: 16px !important;
}

.s26-btn-full {
    width: 100%;
    margin-bottom: 32px;
    justify-content: center;
}

.s26-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background-color: #f5f5f5;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    color: var(--ink-soft);
    margin-bottom: 24px;
    width: max-content;
}

.s26-price-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 32px;
}

.s26-price-amount {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
}

.s26-price-period {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 500;
}

.s26-section-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--ink);
}

.s26-feature-box {
    background-color: #f9f9f9;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.s26-feature-icon-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--ink);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s26-feature-icon-wrapper img {
    width: 20px;
    height: 20px;
}

.s26-feature-badge {
    position: absolute;
    top: -8px;
    right: -16px;
    background-color: #fff;
    border: 1px solid var(--rule);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.s26-feature-text {
    flex: 1;
}

.s26-feature-text strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink);
}

.s26-feature-text p {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-soft);
    margin: 0;
}

.s26-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s26-radio.is-active {
    border-color: var(--teal);
}

.s26-radio-inner {
    width: 8px;
    height: 8px;
    background-color: var(--teal);
    border-radius: 50%;
    opacity: 0;
}

.s26-radio.is-active .s26-radio-inner {
    opacity: 1;
}

.s26-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s26-list li {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.s26-list li svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .s26-grid {
        grid-template-columns: 1fr;
    }
}

/* SECTION 27: CTA BANNER */
.s27-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
}

.s27-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.s27-banner {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    display: flex;
    align-items: center;
    padding: 60px;   /* was 80px 60px — even inner padding on all four sides */
    min-height: 480px;
}

.s27-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.8;
}

.s27-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    color: #fff;
}

.s27-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.s27-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.8);
}

.s27-btn-white {
    background-color: #fff !important;
    color: var(--ink) !important;
    border: 1px solid #fff !important;
    font-weight: 600;
    padding: 16px 32px !important;
    border-radius: 100px;
}

.s27-btn-white:hover {
    background-color: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
}

.s27-images {
    position: absolute;
    right: 60px;
    bottom: -40px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.s27-img-1 {
    width: 240px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transform: rotate(-10deg) translateY(20px) translateX(40px);
    position: relative;
    z-index: 1;
}

.s27-img-2 {
    width: 260px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    transform: rotate(5deg) translateY(-20px);
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .s27-banner {
        flex-direction: column;
        padding: 40px;   /* was 60px 40px — even inner padding on all four sides */
        text-align: center;
        align-items: center;
    }
    .s27-content {
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .s27-images {
        position: relative;
        right: auto;
        bottom: auto;
        justify-content: center;
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {
    .s27-banner {
        /* one radius at every breakpoint — agencies.html and
           ai-startup-development.html each pinned this to 6px !important in their
           own <style>, so the same CTA had two different corners on mobile. */
        border-radius: 12px;
        padding: 24px;   /* was 40px 24px — even inner padding on all four sides */
        overflow: hidden;
    }
    .s27-images {
        transform: scale(0.7);
        margin-bottom: -80px;
    }
    .s27-img-1 {
        transform: rotate(-10deg) translateY(20px) translateX(20px);
    }
}

/* SECTION 28: BLOG ANIMATED CARDS */
.s28-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: var(--surface);
}

.s28-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.s28-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s28-header .eyebrow {
    margin-bottom: 16px;
}

.s28-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    line-height: 1.1;
    color: var(--ink);
}

.s28-subtitle {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0;
    max-width: 600px;
}

.s28-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.s28-card {
    background-color: #fff;
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-height: 480px;
}

.s28-card-top {
    position: relative;
    width: 100%;
    height: 160px;
    margin-bottom: 32px;
    display: flex;
    align-items: flex-start;
}

.s28-img-wrapper {
    width: 30%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.s28-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s28-card:hover .s28-img-wrapper {
    width: 50%;
}

.s28-tag {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f3f3f3;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.s28-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s28-card-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.s28-card-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 32px;
}

.s28-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.s28-author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

.s28-dot {
    color: var(--rule);
}

.s28-date {
    color: var(--ink-soft);
}

@media (max-width: 991px) {
    .s28-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .s28-img-wrapper {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .s28-header {
        margin-bottom: 40px;
    }
    .s28-grid {
        grid-template-columns: 1fr;
    }
}

/* SECTION 29: CONTACT FORM */
.s29-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-image: linear-gradient(#000000e6, #000000e6), url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
}

.s29-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.s29-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
}

/* LEFT FORM CARD */
.s29-form-card {
    background-color: #f7f7f7;
    border-radius: 24px;
    padding: 48px;
    color: var(--ink);
}

.s29-form-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--ink-soft);
}

.s29-form-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.s29-form-group {
    margin-bottom: 24px;
}

.s29-form-group label {
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--ink);
}

.s29-form-group input,
.s29-form-group textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.3s ease;
}

.s29-form-group textarea {
    height: 120px;
    resize: vertical;
}

.s29-form-group input:focus,
.s29-form-group textarea:focus {
    outline: none;
    border-color: var(--teal);
}

.s29-submit-btn {
    width: 100%;
    padding: 18px !important;
    font-size: 16px !important;
    justify-content: center;
}

.s29-form-status {
    margin: 14px 0 0;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    min-height: 1.2em;
}

.s29-form-status.is-ok { color: #15803d; }
.s29-form-status.is-err { color: #b91c1c; }

/* RIGHT CONTENT */
.s29-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.s29-desc {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 64px;
    max-width: 500px;
}

.s29-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.s29-feature h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.s29-feature p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 991px) {
    .s29-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .s29-right {
        order: -1;
    }
    .s29-desc {
        margin-bottom: 48px;
    }
}

@media (max-width: 768px) {
    .s29-form-card {
        padding: 32px 24px;
    }
    .s29-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==========================================================================
   THEME HARMONIZATION — match index.html design language
   Titles · eyebrows · card titles · pills/tags · card surfaces.
   Prefixed .custom-sections-body to win the cascade over per-section rules.
   Added by theme-port. Stat numbers, marquee cards & dark-image titles excluded.
   ========================================================================== */

/* ---- Eyebrows → index .eyebrow (mono, ink, dash) ---------------------- */
.custom-sections-body .s1-eyebrow,
.custom-sections-body .s3-eyebrow,
.custom-sections-body .s4-eyebrow,
.custom-sections-body .s5-eyebrow,
.custom-sections-body .s6-eyebrow,
.custom-sections-body .s7-eyebrow,
.custom-sections-body .s8-eyebrow,
.custom-sections-body .s9-eyebrow,
.custom-sections-body .s10-eyebrow,
.custom-sections-body .s11-eyebrow,
.custom-sections-body .s14-eyebrow,
.custom-sections-body .s15-eyebrow,
.custom-sections-body .s16-eyebrow,
.custom-sections-body .s24-eyebrow,
.custom-sections-body .s29-form-eyebrow {
  display: inline-flex;
  align-items: flex-start;   /* square sits on line 1 when the label wraps */
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  margin-bottom: 0;   /* .hdr / .s5-top gap owns label -> heading */
}
.custom-sections-body .s1-eyebrow::before,
.custom-sections-body .s3-eyebrow::before,
.custom-sections-body .s4-eyebrow::before,
.custom-sections-body .s5-eyebrow::before,
.custom-sections-body .s6-eyebrow::before,
.custom-sections-body .s7-eyebrow::before,
.custom-sections-body .s8-eyebrow::before,
.custom-sections-body .s9-eyebrow::before,
.custom-sections-body .s10-eyebrow::before,
.custom-sections-body .s11-eyebrow::before,
.custom-sections-body .s14-eyebrow::before,
.custom-sections-body .s15-eyebrow::before,
.custom-sections-body .s16-eyebrow::before,
.custom-sections-body .s24-eyebrow::before,
.custom-sections-body .s29-form-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--teal);
  flex: 0 0 auto;
  margin-top: calc((1.6em - 7px) / 2);   /* half-leading of line 1 */
}

/* ---- Section titles (h2) → index h2 type ------------------------------ */
.custom-sections-body .s1-title,
.custom-sections-body .s2-title,
.custom-sections-body .s3-title,
.custom-sections-body .s4-title,
.custom-sections-body .s5-title,
.custom-sections-body .s6-title,
.custom-sections-body .s7-title,
.custom-sections-body .s8-title,
.custom-sections-body .s9-title,
.custom-sections-body .s10-title,
.custom-sections-body .s11-title,
.custom-sections-body .s12-title,
.custom-sections-body .s14-title,
.custom-sections-body .s15-title,
.custom-sections-body .s16-title,
.custom-sections-body .s18-title-centered,
.custom-sections-body .s19-title-standard,
.custom-sections-body .s20-title,
.custom-sections-body .s21-title,
.custom-sections-body .s22-title,
.custom-sections-body .s23-title,
.custom-sections-body .s24-title,
.custom-sections-body .s25-title,
.custom-sections-body .s26-title,
.custom-sections-body .s27-title,
.custom-sections-body .s28-title,
.custom-sections-body .s29-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-transform: none;
  font-variation-settings: 'opsz' 96;
}
.custom-sections-body .s1-title em,  .custom-sections-body .s2-title em,
.custom-sections-body .s3-title em,  .custom-sections-body .s4-title em,
.custom-sections-body .s5-title em,  .custom-sections-body .s6-title em,
.custom-sections-body .s7-title em,  .custom-sections-body .s8-title em,
.custom-sections-body .s9-title em,  .custom-sections-body .s10-title em,
.custom-sections-body .s11-title em, .custom-sections-body .s12-title em,
.custom-sections-body .s14-title em, .custom-sections-body .s15-title em,
.custom-sections-body .s16-title em, .custom-sections-body .s18-title-centered em,
.custom-sections-body .s19-title-standard em, .custom-sections-body .s20-title em,
.custom-sections-body .s21-title em, .custom-sections-body .s22-title em,
.custom-sections-body .s23-title em, .custom-sections-body .s24-title em,
.custom-sections-body .s25-title em, .custom-sections-body .s26-title em,
.custom-sections-body .s28-title em, .custom-sections-body .s29-title em {
  font-style: normal;                 /* upright, like index — not italic */
  color: var(--teal);
  font-weight: 600;
  padding: 0 0.05em;
  background-image: linear-gradient(180deg, transparent 78%, var(--teal-light) 78%, var(--teal-light) 92%, transparent 92%);
  background-size: 0% 100%;            /* hidden until scrolled in */
  background-repeat: no-repeat;
  background-position: left center;
  transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
/* highlighter swipe fires when the title scrolls into view (JS adds .is-visible) */
.custom-sections-body h2 em.is-visible,
.custom-sections-body .reveal.is-visible h2 em {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .custom-sections-body h2 em { background-size: 100% 100%; transition: none; }
}
/* s12 lead-in "Trusted by 100+" — ink black, matching the rest of the title */
.custom-sections-body .s12-text-muted { color: var(--ink); }
/* dark-image banner title keeps its light colour */
.custom-sections-body .s27-title { color: var(--paper); }

/* ---- Subtitles / descriptions → index body tone ----------------------- */
.custom-sections-body .s1-subtitle,
.custom-sections-body .s2-subtitle,
.custom-sections-body .s11-desc,
.custom-sections-body .s12-desc,
.custom-sections-body .s14-desc,
.custom-sections-body .s16-desc,
.custom-sections-body .s18-desc,
.custom-sections-body .s21-desc,
.custom-sections-body .s26-subtitle,
.custom-sections-body .s28-subtitle,
.custom-sections-body .s4-desc,
.custom-sections-body .s7-desc,
.custom-sections-body .s8-desc,
.custom-sections-body .s9-desc {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
}

/* ---- Card / item / plan titles (h3) → index .wcard h3 ----------------- */
.custom-sections-body .s1-card-title,
.custom-sections-body .s2-card-title,
.custom-sections-body .s3-card-title,
.custom-sections-body .s4-card-title,
.custom-sections-body .s7-card-title,
.custom-sections-body .s8-card-title,
.custom-sections-body .s10-card-title,
.custom-sections-body .s11-card-title,
.custom-sections-body .s16-card-title,
.custom-sections-body .s18-card-title,
.custom-sections-body .s19-item-title,
.custom-sections-body .s20-card-title,
.custom-sections-body .s23-item-title,
.custom-sections-body .s26-plan-title,
.custom-sections-body .s28-card-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  font-variation-settings: 'opsz' 96;
}

/* s19 open title matches the collapsed (spine) title size — 32 desktop / 24 mobile */
.custom-sections-body .s19-item-title { font-size: 32px; }
@media (max-width: 992px) {
  .custom-sections-body .s19-item-title { font-size: 24px; }
}

/* ---- Pills / tags → index .cap-chip ----------------------------------- */
.custom-sections-body .s2-card-tag,
.custom-sections-body .s8-tag,
.custom-sections-body .s28-tag,
.custom-sections-body .s19-pill,
.custom-sections-body .s9-service {
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 100px;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.custom-sections-body .s2-card-tag:hover,
.custom-sections-body .s8-tag:hover,
.custom-sections-body .s28-tag:hover,
.custom-sections-body .s19-pill:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---- Card surfaces → index card feel (ruled, rounded, lift) ----------- */
.custom-sections-body .s1-card,
.custom-sections-body .s2-card,
.custom-sections-body .s3-card,
.custom-sections-body .s7-card,
.custom-sections-body .s8-card,
.custom-sections-body .s10-card,
.custom-sections-body .s11-card,
.custom-sections-body .s12-card,
.custom-sections-body .s18-card,
.custom-sections-body .s20-card,
.custom-sections-body .s23-card,
.custom-sections-body .s28-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.custom-sections-body .s1-card:hover,
.custom-sections-body .s2-card:hover,
.custom-sections-body .s3-card:hover,
.custom-sections-body .s7-card:hover,
.custom-sections-body .s8-card:hover,
.custom-sections-body .s10-card:hover,
.custom-sections-body .s11-card:hover,
.custom-sections-body .s12-card:hover,
.custom-sections-body .s18-card:hover,
.custom-sections-body .s20-card:hover,
.custom-sections-body .s23-card:hover,
.custom-sections-body .s28-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

/* ==========================================================================
   LEFT-ALIGN every section header — index pattern: eyebrow → title → subtext,
   stacked, flush-left. Overrides per-section centering + auto-margins.
   ========================================================================== */
.custom-sections-body .s1-header,
.custom-sections-body .s2-header,
.custom-sections-body .s3-header,
.custom-sections-body .s4-left,
.custom-sections-body .s5-top,
.custom-sections-body .s6-header,
.custom-sections-body .s7-header,
.custom-sections-body .s8-header,
.custom-sections-body .s9-header,
.custom-sections-body .s10-header,
.custom-sections-body .s11-header,
.custom-sections-body .s12-header,
.custom-sections-body .s14-header,
.custom-sections-body .s15-header,
.custom-sections-body .s16-header,
.custom-sections-body .s18-header-centered,
.custom-sections-body .s19-header-standard,
.custom-sections-body .s20-header,
.custom-sections-body .s21-header,
.custom-sections-body .s22-top,
.custom-sections-body .s23-header,
.custom-sections-body .s24-header,
.custom-sections-body .s25-header,
.custom-sections-body .s26-header,
.custom-sections-body .s27-content,
.custom-sections-body .s28-header,
.custom-sections-body .s29-right {
  align-items: flex-start;   /* flex headers → flush left */
  text-align: left;
}

/* s7 header was eyebrow | content split → stack it vertically */
.custom-sections-body .s7-header { flex-direction: column; }
.custom-sections-body .s7-header-content { width: 100%; text-align: left; }

/* All header text reads left, full width, no auto-centering margins */
.custom-sections-body [class$="-eyebrow"],
.custom-sections-body [class$="-title"],
.custom-sections-body [class$="-subtitle"],
.custom-sections-body [class$="-desc"],
.custom-sections-body .s18-title-centered,
.custom-sections-body .s18-desc-centered,
.custom-sections-body .s19-title-standard {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* ---- Tone for newly-added section subtexts (index muted body) ---- */
.custom-sections-body .s3-desc,
.custom-sections-body .s5-desc,
.custom-sections-body .s6-desc,
.custom-sections-body .s10-desc,
.custom-sections-body .s11-desc,
.custom-sections-body .s15-desc,
.custom-sections-body .s19-desc,
.custom-sections-body .s20-desc,
.custom-sections-body .s22-desc,
.custom-sections-body .s23-desc,
.custom-sections-body .s24-desc,
.custom-sections-body .s25-desc {
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.55;
  font-size: 1.05rem;
  max-width: 60ch;
  margin-top: 0;   /* .hdr-copy gap owns heading -> body */
}
/* light eyebrow dash on the dark s27 banner */
.custom-sections-body .eyebrow.is-light::before { background: var(--paper); }

/* ==========================================================================
   HEADER FIXES — full-width single-column left stack + wrapping titles
   (fix s2 row layout, s18 centered/narrow, s4 nowrap overflow, s29 dark bg)
   ========================================================================== */
.custom-sections-body .s1-header,
.custom-sections-body .s2-header,
.custom-sections-body .s3-header,
.custom-sections-body .s6-header,
.custom-sections-body .s7-header,
.custom-sections-body .s8-header,
.custom-sections-body .s9-header,
.custom-sections-body .s10-header,
.custom-sections-body .s11-header,
.custom-sections-body .s14-header,
.custom-sections-body .s15-header,
.custom-sections-body .s16-header,
.custom-sections-body .s18-header-centered,
.custom-sections-body .s19-header-standard,
.custom-sections-body .s20-header,
.custom-sections-body .s23-header,
.custom-sections-body .s24-header,
.custom-sections-body .s25-header,
.custom-sections-body .s26-header,
.custom-sections-body .s28-header,
.custom-sections-body .s4-left,
.custom-sections-body .s21-header,
.custom-sections-body .s27-content,
.custom-sections-body .s29-right {
  display: flex;
  flex-direction: column;   /* eyebrow → title → subtext stacked */
  align-items: flex-start;  /* flush left */
  text-align: left;
  max-width: none;          /* kill narrow centered boxes (s18) */
  margin-left: 0;
  margin-right: 0;
  gap: 0;   /* margins (eyebrow + title) control label/heading/body spacing, not gap */
}

/* Titles wrap inside their column — never force one line / overflow (s4) */
.custom-sections-body .s1-title,  .custom-sections-body .s2-title,
.custom-sections-body .s3-title,  .custom-sections-body .s4-title,
.custom-sections-body .s5-title,  .custom-sections-body .s6-title,
.custom-sections-body .s7-title,  .custom-sections-body .s8-title,
.custom-sections-body .s9-title,  .custom-sections-body .s10-title,
.custom-sections-body .s11-title, .custom-sections-body .s12-title,
.custom-sections-body .s14-title, .custom-sections-body .s15-title,
.custom-sections-body .s16-title, .custom-sections-body .s18-title-centered,
.custom-sections-body .s19-title-standard, .custom-sections-body .s20-title,
.custom-sections-body .s21-title, .custom-sections-body .s22-title,
.custom-sections-body .s23-title, .custom-sections-body .s24-title,
.custom-sections-body .s25-title, .custom-sections-body .s26-title,
.custom-sections-body .s27-title, .custom-sections-body .s28-title,
.custom-sections-body .s29-title {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* s29 is a dark section → title + eyebrow must read light */
.custom-sections-body .s29-title { color: var(--paper); }
.custom-sections-body .s29-head-eyebrow { color: var(--paper); }
.custom-sections-body .s29-head-eyebrow::before { background: var(--paper); }

/* s12 header → single-column stack (eyebrow → title → subtext below), like other sections */
.custom-sections-body .s12-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.custom-sections-body .s12-header-left,
.custom-sections-body .s12-header-right {
  width: 100%;
  max-width: none;
}
.custom-sections-body .s12-desc {
  margin-top: 0;
  max-width: 60ch;
  color: var(--muted);
}

/* s2 header was position:sticky → pinned and overlapped the cards. Make it scroll normally. */
.custom-sections-body .s2-header {
  position: static;
}

/* s12 stacked column: kill the desktop `flex:0 0 400px` (was a width, now reads as 400px HEIGHT → big empty gap) */
.custom-sections-body .s12-header-right {
  flex: 0 1 auto;
}

/* ==========================================================================
   CARDS → match index .wcard surface: paper bg, rule border, 6px radius,
   hover lift + teal border + shadow + teal top-line.
   ========================================================================== */
.custom-sections-body .s1-card,
.custom-sections-body .s2-card,
.custom-sections-body .s3-card,
.custom-sections-body .s7-card,
.custom-sections-body .s8-card,
.custom-sections-body .s10-card,
.custom-sections-body .s11-card,
.custom-sections-body .s12-card,
.custom-sections-body .s18-card,
.custom-sections-body .s20-card,
.custom-sections-body .s23-card,
.custom-sections-body .s28-card {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.custom-sections-body .s1-card::before,
.custom-sections-body .s2-card::before,
.custom-sections-body .s3-card::before,
.custom-sections-body .s7-card::before,
.custom-sections-body .s8-card::before,
.custom-sections-body .s10-card::before,
.custom-sections-body .s11-card::before,
.custom-sections-body .s12-card::before,
.custom-sections-body .s18-card::before,
.custom-sections-body .s20-card::before,
.custom-sections-body .s23-card::before,
.custom-sections-body .s28-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  background: linear-gradient(180deg, var(--teal), transparent);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: height var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.custom-sections-body .s1-card:hover,
.custom-sections-body .s2-card:hover,
.custom-sections-body .s3-card:hover,
.custom-sections-body .s7-card:hover,
.custom-sections-body .s8-card:hover,
.custom-sections-body .s10-card:hover,
.custom-sections-body .s11-card:hover,
.custom-sections-body .s12-card:hover,
.custom-sections-body .s18-card:hover,
.custom-sections-body .s20-card:hover,
.custom-sections-body .s23-card:hover,
.custom-sections-body .s28-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.10);
}
.custom-sections-body .s1-card:hover::before,
.custom-sections-body .s2-card:hover::before,
.custom-sections-body .s3-card:hover::before,
.custom-sections-body .s7-card:hover::before,
.custom-sections-body .s8-card:hover::before,
.custom-sections-body .s10-card:hover::before,
.custom-sections-body .s11-card:hover::before,
.custom-sections-body .s12-card:hover::before,
.custom-sections-body .s18-card:hover::before,
.custom-sections-body .s20-card:hover::before,
.custom-sections-body .s23-card:hover::before,
.custom-sections-body .s28-card:hover::before {
  height: 3px;
  opacity: 1;
}

/* colour-variant / special cards (s6 bento, s26 pricing): keep own bg, add index frame + lift */
.custom-sections-body .s6-card,
.custom-sections-body .s26-card {
  border-radius: 6px;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.custom-sections-body .s6-card:hover,
.custom-sections-body .s26-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.10);
}

/* Stat tiles (s5, s22) + pricing card (s25) → index frame + hover + teal top-line (own bg kept) */
.custom-sections-body .s5-card,
.custom-sections-body .s22-card,
.custom-sections-body .s25-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.custom-sections-body .s5-card::before,
.custom-sections-body .s22-card::before,
.custom-sections-body .s25-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  background: linear-gradient(180deg, var(--teal), transparent);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: height var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.custom-sections-body .s5-card:hover,
.custom-sections-body .s22-card:hover,
.custom-sections-body .s25-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.10);
}
.custom-sections-body .s5-card:hover::before,
.custom-sections-body .s22-card:hover::before,
.custom-sections-body .s25-card:hover::before {
  height: 3px;
  opacity: 1;
}

/* Image-wraps: round to match card radius directly (card's overflow-clip fails
   while the card is transformed on hover — Chrome border-radius+transform bug) */
.custom-sections-body .s3-img-wrap,
.custom-sections-body .s7-card-img-wrap,
.custom-sections-body .s8-card-img-wrap,
.custom-sections-body .s28-img-wrapper {
  border-radius: 6px 6px 0 0;   /* image sits at card top */
  overflow: hidden;
}
.custom-sections-body .s1-card-image-wrapper {
  border-radius: 0 0 6px 6px;   /* image sits at card bottom */
  overflow: hidden;
}

/* RESTORE s2 card-stacking animation — surface block wrongly set position:relative.
   position:sticky still anchors the ::before teal line (acts as containing block). */
.custom-sections-body .s2-card {
  position: sticky;
  top: 200px;
}

/* Round the IMG itself so corners stay clipped even while it scales on hover
   (scale transform defeats the wrap's overflow-clip → square corners) */
.custom-sections-body .s3-img,
.custom-sections-body .s7-card-img,
.custom-sections-body .s8-card-img,
.custom-sections-body .s28-img-wrapper img {
  border-radius: 6px 6px 0 0;
}
.custom-sections-body .s1-card-image {
  border-radius: 0 0 6px 6px;
}

/* Inset boxed-card content from the border — images stay full-bleed, text gets side padding */
.custom-sections-body .s3-card-content,
.custom-sections-body .s7-card-content,
.custom-sections-body .s8-card-content,
.custom-sections-body .s28-card-body,
.custom-sections-body .s28-card-footer {
  padding-left: 24px;
  padding-right: 24px;
}
.custom-sections-body .s8-card-content { padding-bottom: 24px; }
.custom-sections-body .s28-card-footer { padding-bottom: 24px; }
/* s2 stacked row: keep image flush, inset the text columns */
.custom-sections-body .s2-card-left { padding-left: 32px; }
.custom-sections-body .s2-card-middle { padding-right: 24px; }

/* s5 → standard stacked title format (eyebrow → title → subtext), not 2-col split */
.custom-sections-body .s5-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-label);         /* label -> heading */
  /* no margin-bottom — .s5-container's gap owns header -> section content */
}
.custom-sections-body .s5-eyebrow-col {
  align-items: center;
  padding-top: 0;
  width: auto;
}
.custom-sections-body .s5-line-wrap {
  flex-grow: 0;
  width: 140px;          /* short marker rule, not full-width */
}
.custom-sections-body .s5-content-col {
  gap: var(--gap-label); /* padding deltas in styles.css do heading->body / body->content */
  width: 100%;
}

/* s5: drop the line + plus marker → plain dash eyebrow like every other section */
.custom-sections-body .s5-line-wrap { display: none; }

/* belief: remove the eyebrow-row bottom margin (was 40px from shared --head-mb !important).
   Needs !important + higher specificity to beat the shared `.belief-head {...!important}`. */
.custom-sections-body .belief-head { margin-bottom: 0 !important; }

/* belief highlight: each wrapped line of the teal em gets its own underline
   sized to that line's text width. inline + box-decoration-break: clone does
   this per line-fragment. !important beats the is-visible swipe trigger. */
.custom-sections-body .belief-statement em {
  display: inline !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
}

/* ==========================================================================
   Match index header measure — titles wrap at 880px, subtext at 56ch.
   (Card titles/descs are narrower than these caps, so unaffected.)
   ========================================================================== */
/* Section headings only. The old [class$="-title"] suffix match also caught
   card/item titles (s4-card-title, s11-card-title, s19-item-title, jstep-title,
   s14-accordion-title ...). At 880px that never bit -- cards are <=420px wide --
   but at 75pct it would wrap every card title early. Listed explicitly instead.
   .s27-title is excluded: its parent .s27-content is already capped at 500px, so
   75pct there would compound to 375px on a full-bleed banner heading. */
.custom-sections-body .s4-title,
.custom-sections-body .s5-title,
.custom-sections-body .s6-title,
.custom-sections-body .s8-title,
.custom-sections-body .s9-title,
.custom-sections-body .s10-title,
.custom-sections-body .s11-title,
.custom-sections-body .s12-title,
.custom-sections-body .s14-title,
.custom-sections-body .s18-title-centered,
.custom-sections-body .s19-title-standard,
.custom-sections-body .s20-title,
.custom-sections-body .s22-title,
.custom-sections-body .s23-title,
.custom-sections-body .s25-title,
.custom-sections-body .s26-title,
.custom-sections-body .s28-title,
.custom-sections-body .s29-title {
  max-width: 75%;
}
/* s4 slider heading spans the full column on desktop (overrides the 75% cap
   above + the global `:is(...,.s4-left,...) > h2` 75% rule). Section-scoped,
   desktop only. .s4-left is a flex column with align-items:flex-start, so
   width:100% is needed to actually fill — max-width alone is only a ceiling. */
@media (min-width: 992px) {
  body.custom-sections-body section:not(.hero) .s4-left > h2.s4-title {
    max-width: 100%;
    width: 100%;
  }
}
.custom-sections-body [class$="-subtitle"],
.custom-sections-body [class$="-desc"] {
  max-width: 56ch;
}

/* ==========================================================================
   Section header subtexts → EXACT index lede (var(--fs-lede), 56ch, lh 1.55).
   Same font-size as index so the pixel width (~56ch) matches too.
   ========================================================================== */
.custom-sections-body .s1-subtitle,
.custom-sections-body .s2-subtitle,
.custom-sections-body .s26-subtitle,
.custom-sections-body .s28-subtitle,
.custom-sections-body .s3-desc,
.custom-sections-body .s4-desc,
.custom-sections-body .s5-desc,
.custom-sections-body .s6-desc,
.custom-sections-body .s7-desc,
.custom-sections-body .s8-desc,
.custom-sections-body .s9-desc,
.custom-sections-body .s10-desc,
.custom-sections-body .s11-desc,
.custom-sections-body .s12-desc,
.custom-sections-body .s14-desc,
.custom-sections-body .s15-desc,
.custom-sections-body .s16-desc,
.custom-sections-body .s18-desc-centered,
.custom-sections-body .s19-desc,
.custom-sections-body .s20-desc,
.custom-sections-body .s21-desc,
.custom-sections-body .s22-desc,
.custom-sections-body .s23-desc,
.custom-sections-body .s24-desc,
.custom-sections-body .s25-desc {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
/* dark-bg sections keep light subtext, same measure */
.custom-sections-body .s27-desc,
.custom-sections-body .s29-desc {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.78);
  max-width: 56ch;
}

/* ==========================================================================
   DARK MODE — custom sections hardcode light surfaces that don't flip with
   the theme tokens. Redefine --surface + flip the literal light backgrounds.
   (Text/titles/pills already flip via tokens.)
   ========================================================================== */
:root[data-theme="dark"] .custom-sections-body { --surface: #171922; }

/* white card containers → dark surface */
:root[data-theme="dark"] .custom-sections-body .s4-card,
:root[data-theme="dark"] .custom-sections-body .s6-card,
:root[data-theme="dark"] .custom-sections-body .s26-card,
:root[data-theme="dark"] .custom-sections-body .s29-form-card,
:root[data-theme="dark"] .custom-sections-body .s25-card-bottom,
:root[data-theme="dark"] .custom-sections-body .s25-top-light {
  background-color: #171922;
}

/* s6 "bg-dark" tile uses var(--ink) → would invert to light; pin it dark + light text */
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark {
  background-color: #20222c;
}
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark .s6-card-value,
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark .s6-card-text {
  color: var(--ink);
}

/* light-grey chips / panels → darker */
:root[data-theme="dark"] .custom-sections-body .s26-feature-box,
:root[data-theme="dark"] .custom-sections-body .s26-status-pill,
:root[data-theme="dark"] .custom-sections-body .s25-toggle,
:root[data-theme="dark"] .custom-sections-body .s25-contact-light {
  background-color: #22242e;
}

/* contact form inputs */
:root[data-theme="dark"] .custom-sections-body .s29-form-group input,
:root[data-theme="dark"] .custom-sections-body .s29-form-group textarea {
  background-color: #171922;
  color: var(--ink);
  border-color: var(--rule);
}

:root[data-theme="dark"] .custom-sections-body .s29-form-status.is-ok { color: #4ade80; }
:root[data-theme="dark"] .custom-sections-body .s29-form-status.is-err { color: #f87171; }

/* s27 banner + s29 are ALWAYS dark-background → text must stay light in BOTH themes.
   (They used var(--paper), which flips dark in dark mode → invisible.) Pin fixed light. */
.custom-sections-body .s27-title,
.custom-sections-body .s29-title,
.custom-sections-body .s27-eyebrow,
.custom-sections-body .s29-head-eyebrow,
.custom-sections-body .s27-content .eyebrow {
  color: #fafaf7;
}
.custom-sections-body .s27-eyebrow::before,
.custom-sections-body .s29-head-eyebrow::before,
.custom-sections-body .s27-content .eyebrow::before {
  background: #fafaf7;
}

/* ==========================================================================
   DARK MODE v2 — use index's exact dark palette (overrides the block above):
   cards = var(--paper) #0e0f14 + var(--rule) border (like index .wcard),
   nested tiles/chips = var(--paper-2) #171922, text = index --ink.
   ========================================================================== */
:root[data-theme="dark"] .custom-sections-body { --surface: var(--paper); }

/* top-level cards → index card colour + rule border */
:root[data-theme="dark"] .custom-sections-body .s4-card,
:root[data-theme="dark"] .custom-sections-body .s6-card,
:root[data-theme="dark"] .custom-sections-body .s26-card,
:root[data-theme="dark"] .custom-sections-body .s29-form-card,
:root[data-theme="dark"] .custom-sections-body .s25-top-light,
:root[data-theme="dark"] .custom-sections-body .s25-card-bottom {
  background-color: var(--paper);
  border-color: var(--rule);
}

/* s6 bento variants → elevated --paper-2, index light text */
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-soft,
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark {
  background-color: var(--paper-2);
}
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark .s6-card-value,
:root[data-theme="dark"] .custom-sections-body .s6-card.s6-bg-dark .s6-card-text {
  color: var(--ink);
}

/* nested tiles / chips / panels → elevated --paper-2 */
:root[data-theme="dark"] .custom-sections-body .s12-metric,
:root[data-theme="dark"] .custom-sections-body .s26-feature-box,
:root[data-theme="dark"] .custom-sections-body .s26-status-pill,
:root[data-theme="dark"] .custom-sections-body .s25-toggle,
:root[data-theme="dark"] .custom-sections-body .s25-contact-light {
  background-color: var(--paper-2);
  border-color: var(--rule);
}

/* contact form inputs */
:root[data-theme="dark"] .custom-sections-body .s29-form-group input,
:root[data-theme="dark"] .custom-sections-body .s29-form-group textarea {
  background-color: var(--paper-2);
  color: var(--ink);
  border-color: var(--rule);
}

/* always-dark banners: pin text to index light --ink (token, matches index) */
.custom-sections-body .s27-title,
.custom-sections-body .s29-title,
.custom-sections-body .s27-eyebrow,
.custom-sections-body .s29-head-eyebrow,
.custom-sections-body .s27-content .eyebrow { color: #f4f5f1; }
.custom-sections-body .s27-eyebrow::before,
.custom-sections-body .s29-head-eyebrow::before,
.custom-sections-body .s27-content .eyebrow::before { background: #f4f5f1; }

/* ==========================================================================
   CTAs + theme-inverting text — match index, fix both light & dark.
   ========================================================================== */
/* White buttons on dark surfaces → index dark-context primary
   (fixed light bg / dark text, hover teal-bright). Were #fff bg + var(--ink)
   text → invisible in dark. */
.custom-sections-body .s25-box-btn,
.custom-sections-body .s25-btn-white,
.custom-sections-body .s27-btn-white {
  background-color: #fafaf7 !important;
  color: #0a0a10 !important;
  border-color: #fafaf7 !important;
}
.custom-sections-body .s25-box-btn:hover,
.custom-sections-body .s25-btn-white:hover,
.custom-sections-body .s27-btn-white:hover {
  background-color: var(--teal-bright) !important;
  color: #0a0a10 !important;
  border-color: var(--teal-bright) !important;
}

/* Elements with background:var(--ink) (inverts per theme) → text must track
   var(--paper) so it stays readable in BOTH modes (was fixed white). */
.custom-sections-body .s25-toggle-btn.is-active { color: var(--paper); }
.custom-sections-body .s21-stats-label { color: var(--paper); opacity: 0.9; }
.custom-sections-body .s11-card:hover .s11-card-title,
.custom-sections-body .s11-card:hover .s11-card-link { color: var(--paper); }
.custom-sections-body .s11-card:hover .s11-card-desc { color: var(--paper); opacity: 0.78; }
.custom-sections-body .s11-card:hover .s11-icon-wrap { background-color: rgba(125,125,135,0.18); }

/* s19 collapsed accordion titles: --ink-soft is too dim on dark bg → brighten in dark */
:root[data-theme="dark"] .custom-sections-body .s19-item-collapsed-title {
  color: var(--ink-2);
}

/* s24 "strategy" highlight: blue (#cce0ff) → theme teal, per mode */
.custom-sections-body .s24-highlight {
  background-color: var(--teal-light);
}
:root[data-theme="dark"] .custom-sections-body .s24-highlight {
  background-color: rgba(var(--accent-bright-rgb), 0.42);
}

/* ==========================================================================
   ALL CARDS → index card colour in BOTH modes: var(--paper) bg + var(--rule)
   border (flips with theme). Unifies the cards still using #fff / var(--surface).
   ========================================================================== */
.custom-sections-body .s1-card,
.custom-sections-body .s2-card,
.custom-sections-body .s3-card,
.custom-sections-body .s4-card,
.custom-sections-body .s5-card,
.custom-sections-body .s6-card,
.custom-sections-body .s7-card,
.custom-sections-body .s8-card,
.custom-sections-body .s10-card,
.custom-sections-body .s11-card,
.custom-sections-body .s12-card,
.custom-sections-body .s18-card,
.custom-sections-body .s20-card,
.custom-sections-body .s23-card,
.custom-sections-body .s26-card,
.custom-sections-body .s28-card {
  background-color: var(--paper);
  border: 1px solid var(--rule);
}
/* s6 bento soft variant → uniform paper; the one bg-dark tile stays a dark feature */
.custom-sections-body .s6-card.s6-bg-soft { background-color: var(--paper); }

/* keep the s6 "bg-dark" tile a dark feature card (light mode) — like index wcard-feature.
   Higher specificity than the uniform-card rule so it isn't flattened to paper. */
.custom-sections-body .s6-card.s6-bg-dark { background-color: var(--ink); }

/* ==========================================================================
   HOVER FIXES — match index (lift + teal border + top-line), no broken states.
   ========================================================================== */
/* s11 used a dark-invert hover that breaks against the uniform card bg
   (content vanished). Drop the invert → index hover, content stays visible. */
.custom-sections-body .s11-card:hover {
  background-color: var(--paper);
  border-color: var(--teal);
}
.custom-sections-body .s11-card:hover .s11-card-title,
.custom-sections-body .s11-card:hover .s11-card-link { color: var(--ink); }
.custom-sections-body .s11-card:hover .s11-card-desc { color: var(--ink-soft); }
.custom-sections-body .s11-card:hover .s11-icon-wrap { background-color: var(--paper-2); }

/* s20 is a continuous divider grid, not separate boxes → the lift made the
   hovered card pop out of the grid. Keep teal border + top-line, drop the lift. */
.custom-sections-body .s20-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--teal);
}

/* s20 → separated boxed cards with gap (like index bento). Drop the unified
   panel (no overflow-clip), space the cards, give each the index card + hover. */
.custom-sections-body .s20-grid {
  gap: 22px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background-color: transparent;
}
.custom-sections-body .s20-card {
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--paper);
}
.custom-sections-body .s20-card:nth-child(2n) { border-right: 1px solid var(--rule); }
.custom-sections-body .s20-card:nth-child(n+3) { border-bottom: 1px solid var(--rule); }
.custom-sections-body .s20-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.10);
  background-color: var(--paper);
}

/* s1 → separated boxed cards with gap (was a bordered panel of touching cells) */
.custom-sections-body .s1-grid {
  gap: 22px;
  border: none;
  border-radius: 0;
}
/* kill the middle card's leftover left/right borders (from the old touching
   3-cell panel) — now each card is boxed, they showed as a double border */
.custom-sections-body .s1-card-middle {
  border-left: none;
  border-right: none;
}

/* s2 card image (inset in the padded card) → rounded corners per theme */
.custom-sections-body .s2-card-img {
  border-radius: 12px;
}

/* ==========================================================================
   Theme border-radius for all card / section images (12px cards, 16px standalone)
   ========================================================================== */
.custom-sections-body .s3-card,
.custom-sections-body .s7-card,
.custom-sections-body .s8-card,
.custom-sections-body .s28-card { border-radius: 12px; }

/* flush top-image cards → round top corners to match card */
.custom-sections-body .s7-card-img,
.custom-sections-body .s7-card-img-wrap,
.custom-sections-body .s8-card-img,
.custom-sections-body .s8-card-img-wrap { border-radius: 12px 12px 0 0; }

/* distinct image blocks (gap below) → fully rounded */
.custom-sections-body .s3-img,
.custom-sections-body .s3-img-wrap,
.custom-sections-body .s28-img-wrapper,
.custom-sections-body .s28-img-wrapper img { border-radius: 12px; }

/* bottom-image card */
.custom-sections-body .s1-card-image,
.custom-sections-body .s1-card-image-wrapper { border-radius: 0 0 12px 12px; }

/* standalone images → theme radius */
.custom-sections-body .s15-image,
.custom-sections-body .s18-center-img,
.custom-sections-body .s21-image,
.custom-sections-body .s21-image-wrapper { border-radius: 16px; }

/* ==========================================================================
   s25 pricing toggle → sliding pill animation (Monthly ⇄ Project).
   Driven by .s25-section.is-project (already toggled by JS).
   ========================================================================== */
.custom-sections-body .s25-toggle { position: relative; }
.custom-sections-body .s25-toggle-btn {
  flex: 1 1 0;
  min-width: 110px;
  position: relative;
  z-index: 1;
  text-align: center;
  background: transparent;            /* pill is the ::before now, not the button */
  color: var(--ink);
  transition: color 0.3s ease;
}
.custom-sections-body .s25-toggle-btn.is-active {
  background: transparent;
  color: var(--paper);                /* sits on the dark pill; flips with theme */
}
/* the sliding pill */
.custom-sections-body .s25-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--ink);
  border-radius: 40px;
  z-index: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-sections-body .s25-section.is-project .s25-toggle::before {
  transform: translateX(100%);
}

/* ==========================================================================
   UNIFIED THEME RADIUS — every card + image = 12px (directional for flush
   top/bottom images so they align with the card).
   ========================================================================== */
.custom-sections-body .s1-card,
.custom-sections-body .s2-card,
.custom-sections-body .s3-card,
.custom-sections-body .s4-card,
.custom-sections-body .s5-card,
.custom-sections-body .s6-card,
.custom-sections-body .s7-card,
.custom-sections-body .s8-card,
.custom-sections-body .s10-card,
.custom-sections-body .s11-card,
.custom-sections-body .s12-card,
.custom-sections-body .s18-card,
.custom-sections-body .s20-card,
.custom-sections-body .s22-card,
.custom-sections-body .s23-card,
.custom-sections-body .s25-card,
.custom-sections-body .s26-card,
.custom-sections-body .s28-card { border-radius: 12px; }

/* flush top-image cards → round top to match card */
.custom-sections-body .s7-card-img,
.custom-sections-body .s7-card-img-wrap,
.custom-sections-body .s8-card-img,
.custom-sections-body .s8-card-img-wrap { border-radius: 12px 12px 0 0; }

/* flush bottom-image card */
.custom-sections-body .s1-card-image,
.custom-sections-body .s1-card-image-wrapper { border-radius: 0 0 12px 12px; }

/* distinct / standalone images → 12px all */
.custom-sections-body .s2-card-img,
.custom-sections-body .s3-img,
.custom-sections-body .s3-img-wrap,
.custom-sections-body .s28-img-wrapper,
.custom-sections-body .s28-img-wrapper img,
.custom-sections-body .s15-image,
.custom-sections-body .s18-center-img,
.custom-sections-body .s21-image,
.custom-sections-body .s21-image-wrapper { border-radius: 12px; }

/* s3 blog images → top corners only (drop bottom radius) */
.custom-sections-body .s3-img,
.custom-sections-body .s3-img-wrap { border-radius: 12px 12px 0 0; }

/* s7 article images → fully rounded (bottom radius same as top) */
.custom-sections-body .s7-card-img,
.custom-sections-body .s7-card-img-wrap { border-radius: 12px; }

/* s9 index numerics → big light-gray "01" style */
.custom-sections-body .s9-index {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--muted);
    opacity: 0.32;
}
@media (min-width: 992px) {
    .custom-sections-body .s9-index { font-size: 72px; }
    .custom-sections-body .s9-row { grid-template-columns: 100px 2.5fr 4fr 3.5fr; }
}

/* s23 stat "2x" → x matches ink (not gray) */
.custom-sections-body .s23-stat h3 span.light-x {
    color: var(--ink);
    opacity: 1;
}

/* ==========================================================================
   s25 PRICING → index "Agencies / Founders" (.aud-panel) aesthetic.
   Light card + dark card unified panels. Keeps prices / toggle / features.
   ========================================================================== */
/* unified panel — card holds the bg, inner top/bottom transparent */
.custom-sections-body .s25-card {
  border-radius: 12px;
  overflow: hidden;
}
.custom-sections-body .s25-card-light {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.custom-sections-body .s25-card-dark {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
}
.custom-sections-body .s25-card-top,
.custom-sections-body .s25-card-bottom {
  background: transparent;
}
.custom-sections-body .s25-card-top {
  padding: clamp(36px, 4.2vw, 56px) clamp(30px, 3.6vw, 52px) clamp(26px, 3vw, 34px);
}
.custom-sections-body .s25-card-bottom {
  padding: 0 clamp(30px, 3.6vw, 52px) clamp(36px, 4.2vw, 52px);
}

/* mono meta row */
.custom-sections-body .s25-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.custom-sections-body .s25-card-light .s25-no   { color: var(--teal); }
.custom-sections-body .s25-card-light .s25-mode { color: var(--muted); }
.custom-sections-body .s25-card-dark  .s25-no   { color: var(--teal-bright); }
.custom-sections-body .s25-card-dark  .s25-mode { color: rgba(250,250,247,0.55); }

/* big display plan name + teal dot */
.custom-sections-body .s25-plan-name {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: none;
  margin: 0 0 4px;
  color: inherit;
  font-variation-settings: 'opsz' 96;
}
.custom-sections-body .s25-card-dark .s25-plan-name { color: var(--paper); }
.custom-sections-body .s25-plan-word { white-space: nowrap; }
.custom-sections-body .s25-plan-dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: baseline;
}
.custom-sections-body .s25-card-dark .s25-plan-dot { background: var(--teal-bright); }

/* desc → editorial scale */
.custom-sections-body .s25-plan-desc {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  margin-bottom: 40px;
}

/* light card contact tile → soft surface */
.custom-sections-body .s25-card-light .s25-contact-light {
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

/* features: dark card text → light */
.custom-sections-body .s25-card-dark .s25-included-title { color: rgba(250,250,247,0.6); }
.custom-sections-body .s25-card-dark .s25-features-list li { color: var(--paper); }
.custom-sections-body .s25-card-dark .s25-features-list li svg { color: var(--teal-bright); }
.custom-sections-body .s25-card-light .s25-features-list li svg { color: var(--teal); }

/* hover → index per-panel accent */
.custom-sections-body .s25-card-light:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
}
.custom-sections-body .s25-card-dark:hover {
  border-color: var(--teal-bright);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(var(--accent-bright-rgb), 0.15);
}

/* dark card must STAY dark in dark mode → re-pin tokens to light values
   (index does this for .aud-dark) so inner var() resolve light-on-dark */
:root[data-theme="dark"] .custom-sections-body .s25-card-dark {
  --paper:       #fafaf7;
  --paper-2:     #f1f1ec;
  --ink:         #0a0a10;
  --ink-2:       #18181f;
  --ink-soft:    #2a2a32;
  --muted:       #6a6a78;
  --rule:        rgba(10, 10, 16, 0.12);
  --rule-strong: rgba(10, 10, 16, 0.32);
  --teal:        rgb(var(--accent-rgb));
}

/* dark card: keep inner panels transparent in dark mode too — the re-pinned
   --paper (now light) was leaking through the generic s25-card-bottom override */
:root[data-theme="dark"] .custom-sections-body .s25-card-dark .s25-card-top,
:root[data-theme="dark"] .custom-sections-body .s25-card-dark .s25-card-bottom {
  background: transparent;
}

/* ==========================================================================
   s2 cards → index capability-cluster arrangement (.cap-*) on the text side,
   image kept on the right. head(title+mono tag) → body → chips → outcome → cta
   ========================================================================== */
.custom-sections-body .s2-card {
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.custom-sections-body .s2-card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  min-width: 0;
}
/* head: name left, mono tag top-right */
.custom-sections-body .s2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.custom-sections-body .s2-card-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  font-variation-settings: 'opsz' 96;
  transition: color var(--d-base) var(--ease-out);
}
.custom-sections-body .s2-card:hover .s2-card-title { color: var(--teal); }
.custom-sections-body .s2-card-tagline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* body paragraph → editorial scale */
.custom-sections-body .s2-card-desc {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
  font-variation-settings: 'opsz' 96;
}
/* tags → horizontal pill chips (cap-chip) */
.custom-sections-body .s2-card-tags {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.custom-sections-body .s2-card-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.custom-sections-body .s2-card-tag:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* "Last shipped" outcome strip */
.custom-sections-body .s2-card-outcome {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}
.custom-sections-body .s2-card-outcome::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--teal-bright);
}
.custom-sections-body .s2-card-outcome-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  white-space: nowrap;
}
.custom-sections-body .s2-card-outcome-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* cta link */
.custom-sections-body .s2-card-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal);
  border-bottom: 1px solid var(--teal);
  padding-bottom: 3px;
  align-self: flex-start;
  margin-top: 4px;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.custom-sections-body .s2-card-cta:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateX(2px);
}
/* image fills the taller content column */
.custom-sections-body .s2-card-right { align-items: stretch; height: 100%; }
.custom-sections-body .s2-card-img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (max-width: 991px) {
  .custom-sections-body .s2-card { grid-template-columns: 1fr; }
  .custom-sections-body .s2-card-img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
}

/* ==========================================================================
   s4 process cards → index ".wcard" look: teal mono kicker w/ dash + display h3
   ========================================================================== */
.custom-sections-body .s4-card-eyebrow {
  color: var(--teal);
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.custom-sections-body .s4-card-eyebrow::before {
  background: var(--teal);
  width: 7px;
  height: 7px;
}
.custom-sections-body .s4-card-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  font-variation-settings: 'opsz' 96;
}

/* ==========================================================================
   s5 stats → CONTENT style only (card design unchanged): index number
   treatment — bigger display number + teal unit, mono teal index.
   ========================================================================== */
.custom-sections-body .s5-card-num {
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: 'opsz' 96;
  white-space: nowrap;
}
.custom-sections-body .s5-card-unit {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: -0.02em;
  margin-left: 3px;
  vertical-align: top;
  display: inline-block;
}
.custom-sections-body .s5-card-index { color: var(--teal); }
:root[data-theme="dark"] .custom-sections-body .s5-card-unit,
:root[data-theme="dark"] .custom-sections-body .s5-card-index { color: var(--teal-bright); }

/* ==========================================================================
   s18 cards → drop external icon SVGs, use index teal mono kicker + dash
   ========================================================================== */
.custom-sections-body .s18-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.custom-sections-body .s18-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--teal);
}
.custom-sections-body .s18-card { gap: 14px; }
:root[data-theme="dark"] .custom-sections-body .s18-kicker { color: var(--teal-bright); }
:root[data-theme="dark"] .custom-sections-body .s18-kicker::before { background: var(--teal-bright); }

/* ==========================================================================
   s20 cards → drop external icon webp, use index teal mono kicker + dash
   ========================================================================== */
.custom-sections-body .s20-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.custom-sections-body .s20-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--teal);
}
:root[data-theme="dark"] .custom-sections-body .s20-kicker { color: var(--teal-bright); }
:root[data-theme="dark"] .custom-sections-body .s20-kicker::before { background: var(--teal-bright); }

/* ==========================================================================
   s24 step labels "(STEP - 0X)" → index teal mono kicker + dash
   ========================================================================== */
.custom-sections-body .s24-step-number {
  color: var(--teal);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.custom-sections-body .s24-step-number::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--teal);
  flex: none;
}
:root[data-theme="dark"] .custom-sections-body .s24-step-number { color: var(--teal-bright); }
:root[data-theme="dark"] .custom-sections-body .s24-step-number::before { background: var(--teal-bright); }

/* ==========================================================================
   s19 accordion "SERVICE (0X)" labels → index teal mono accent
   ========================================================================== */
.custom-sections-body .s19-item-label,
.custom-sections-body .s19-item-num {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.18em;
}
:root[data-theme="dark"] .custom-sections-body .s19-item-label,
:root[data-theme="dark"] .custom-sections-body .s19-item-num {
  color: var(--teal-bright);
}

/* ==========================================================================
   HOVER PARITY — every card gets the SAME index hover (lift + teal border +
   teal top-line). s6 bento + s26 pricing only lifted before (no teal accent).
   ========================================================================== */
.custom-sections-body .s6-card,
.custom-sections-body .s26-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.custom-sections-body .s6-card::before,
.custom-sections-body .s26-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  background: linear-gradient(180deg, var(--teal), transparent);
  border-radius: 12px 12px 0 0;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: height var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.custom-sections-body .s6-card:hover,
.custom-sections-body .s26-card:hover { border-color: var(--teal); }
.custom-sections-body .s6-card:hover::before,
.custom-sections-body .s26-card:hover::before { height: 3px; opacity: 1; }
/* dark feature tile (s6 bg-dark) → brighter teal accent */
.custom-sections-body .s6-card.s6-bg-dark::before {
  background: linear-gradient(180deg, var(--teal-bright), transparent);
}
.custom-sections-body .s6-card.s6-bg-dark:hover { border-color: var(--teal-bright); }

/* NOTE: a blanket `will-change: transform` on every card promoted ~18 card
   types to permanent compositing layers. Combined with the fixed nav's
   backdrop-filter, that triggered a Chromium repaint bug → the header blanked
   during scrollbar (fast) scrolling. Dropped it; the hover transition still
   composites on demand with no jitter. */

/* The fixed header vanished during fast/scrollbar scrolling — Chromium's known
   `position:fixed` + `backdrop-filter` repaint bug. translateZ promotion didn't
   help, so drop the backdrop blur entirely and use a near-opaque solid glass
   instead (no blur = no repaint bug). Looks ~identical, never disappears. */
.custom-sections-body .nav,
.custom-sections-body .nav.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

/* Kill stray horizontal scroll. `clip` (not `hidden`) does NOT create a scroll
   container, so it leaves position:sticky / Lenis untouched. */
html { overflow-x: clip; }
.custom-sections-body { overflow-x: clip; }

/* ==========================================================================
   HOVER v2 — "soft shadow lift" for every card. No teal border, no teal
   top-line. Just a gentle raise + soft drop shadow. Overrides all prior hovers.
   ========================================================================== */
.custom-sections-body .s1-card:hover,
.custom-sections-body .s2-card:hover,
.custom-sections-body .s3-card:hover,
.custom-sections-body .s5-card:hover,
.custom-sections-body .s6-card:hover,
.custom-sections-body .s7-card:hover,
.custom-sections-body .s8-card:hover,
.custom-sections-body .s10-card:hover,
.custom-sections-body .s11-card:hover,
.custom-sections-body .s12-card:hover,
.custom-sections-body .s18-card:hover,
.custom-sections-body .s20-card:hover,
.custom-sections-body .s22-card:hover,
.custom-sections-body .s23-card:hover,
.custom-sections-body .s25-card-light:hover,
.custom-sections-body .s26-card:hover,
.custom-sections-body .s28-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(var(--accent-rgb), 0.28);
  border-color: var(--rule);
}
/* dark cards keep their dark resting border (not teal), brighter teal glow */
.custom-sections-body .s25-card-dark:hover,
.custom-sections-body .s6-card.s6-bg-dark:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(var(--accent-bright-rgb), 0.30);
  border-color: var(--ink);
}
/* hide the teal top-line on every card hover */
.custom-sections-body .s1-card:hover::before,
.custom-sections-body .s2-card:hover::before,
.custom-sections-body .s3-card:hover::before,
.custom-sections-body .s5-card:hover::before,
.custom-sections-body .s6-card:hover::before,
.custom-sections-body .s7-card:hover::before,
.custom-sections-body .s8-card:hover::before,
.custom-sections-body .s10-card:hover::before,
.custom-sections-body .s11-card:hover::before,
.custom-sections-body .s12-card:hover::before,
.custom-sections-body .s18-card:hover::before,
.custom-sections-body .s20-card:hover::before,
.custom-sections-body .s22-card:hover::before,
.custom-sections-body .s23-card:hover::before,
.custom-sections-body .s25-card:hover::before,
.custom-sections-body .s26-card:hover::before,
.custom-sections-body .s28-card:hover::before {
  height: 0;
  opacity: 0;
}
/* deeper shadow for light cards in dark mode so the lift still reads */
:root[data-theme="dark"] .custom-sections-body .s1-card:hover,
:root[data-theme="dark"] .custom-sections-body .s2-card:hover,
:root[data-theme="dark"] .custom-sections-body .s3-card:hover,
:root[data-theme="dark"] .custom-sections-body .s5-card:hover,
:root[data-theme="dark"] .custom-sections-body .s6-card:hover,
:root[data-theme="dark"] .custom-sections-body .s7-card:hover,
:root[data-theme="dark"] .custom-sections-body .s8-card:hover,
:root[data-theme="dark"] .custom-sections-body .s10-card:hover,
:root[data-theme="dark"] .custom-sections-body .s11-card:hover,
:root[data-theme="dark"] .custom-sections-body .s12-card:hover,
:root[data-theme="dark"] .custom-sections-body .s18-card:hover,
:root[data-theme="dark"] .custom-sections-body .s20-card:hover,
:root[data-theme="dark"] .custom-sections-body .s22-card:hover,
:root[data-theme="dark"] .custom-sections-body .s23-card:hover,
:root[data-theme="dark"] .custom-sections-body .s25-card-light:hover,
:root[data-theme="dark"] .custom-sections-body .s26-card:hover,
:root[data-theme="dark"] .custom-sections-body .s28-card:hover {
  box-shadow: 0 22px 50px rgba(var(--accent-bright-rgb), 0.26);
  border-color: var(--rule);
}

/* ==========================================================================
   s6 brand logos are dark-fill SVGs → invisible on dark cards in dark mode.
   Invert them to light. (.s6-invert / Titan tile stays dark → same filter ok)
   ========================================================================== */
:root[data-theme="dark"] .custom-sections-body .s6-logo {
  filter: invert(1) brightness(1.8);
  opacity: 0.85;
}

/* ==========================================================================
   DARK MODE icon fixes:
   - s10 value icons + s26 feature icons sit in a var(--ink) wrapper → ink
     flips light in dark mode, white icon vanished. Pin wrapper dark.
   - s21 list icons are dark-fill SVGs (no wrapper) → invert to light.
   ========================================================================== */
:root[data-theme="dark"] .custom-sections-body .s10-icon-wrap {
  background-color: #272a36;
}
/* s26 icon is a self-contained tile (dark bg + light glyph). On a dark wrapper
   it disappears → keep the wrapper light so the icon's native detail reads. */
:root[data-theme="dark"] .custom-sections-body .s26-feature-icon-wrapper {
  background-color: #fafaf7;
}
:root[data-theme="dark"] .custom-sections-body .s21-list-icon img {
  filter: invert(1) brightness(1.8);
  opacity: 0.9;
}

/* s26 feature badge: white pill, but dark-mode text rule pinned it light → +$200
   was white-on-white. Force dark text so the price shows. */
:root[data-theme="dark"] .custom-sections-body .s26-feature-badge {
  color: #0a0a10;
}

/* s28 image is an inset thumbnail (not full-bleed), and the card already has
   24px padding → the extra side padding pushed title/desc/footer right of the
   image. Drop it so everything left-aligns to the image edge. */
.custom-sections-body .s28-card-body,
.custom-sections-body .s28-card-footer {
  padding-left: 0;
  padding-right: 0;
}

/* s21 stats card: bg var(--ink) flipped it white in dark mode. Re-pin tokens so
   inner text/accents stay light, but give it the THEME dark surface (elevated
   paper-2 + rule border) so it matches the other dark-mode cards, not pure black. */
:root[data-theme="dark"] .custom-sections-body .s21-stats {
  --paper: #fafaf7;
  --paper-2: #f1f1ec;
  --ink: #0a0a10;
  --ink-soft: #2a2a32;
  --muted: #6a6a78;
  background-color: #0a0a10;
  border: 1px solid var(--teal);
}

/* s21 stats card: drop the radial glow (::before) + ring (::after), add teal
   border in BOTH modes (dark border set in the dark block above). */
.custom-sections-body .s21-stats {
  border: 1px solid var(--teal);
}
.custom-sections-body .s21-stats::before,
.custom-sections-body .s21-stats::after {
  display: none;
}

/* ==========================================================================
   MOBILE — s5 opener header.
   1. The eyebrow inherits `white-space: nowrap` from the base .s5-eyebrow, so a
      long label ("(Why UK product teams sign with us for custom software)") ran
      straight off the right edge. Let it wrap; keep the teal square on line one.
   2. Collapse the eyebrow -> title -> subtext -> button gaps into one tight
      stack (was 18px gap + 18px eyebrow margin, then 24px gap + 18px desc
      margin-top).
   ========================================================================== */
@media (max-width: 640px) {
  .custom-sections-body .s5-eyebrow {
    margin-bottom: 0;          /* spacing now owned entirely by .s5-top's gap */
  }
  .custom-sections-body .s5-eyebrow-col {
    align-items: flex-start;
    width: 100%;
  }
  .custom-sections-body .s5-top { gap: var(--gap-label); }
  .custom-sections-body .s5-content-col { gap: var(--gap-label); }
}