/*
 * TCI — Figma "Main V3" (node 6401:644)
 * Design tokens (from Figma variables):
 *   Colors:   Black #322F31, Background #FCFCFC, Dark Purple #A01983,
 *             Grey #4B4C4E, Dark Grey #2C2C2C, Purple #B057A1, Light Gray #E6E6E6
 *   Headings: Noka Semibold (H1 70 / H2 56 / H3 44 / H5 28 / H6 20)
 *   Body:     Proxima Nova Regular (14 / 16 / 18 / 20, line-height 1.5)
*/

@import url("https://fonts.cdnfonts.com/css/neue-haas-grotesk-text-pro");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
    --tci-black: #322f31;
    --tci-bg: #fcfcfc;
    --tci-primary: #a01983;
    --tci-purple: #b057a1;
    --tci-grey: #4b4c4e;
    --tci-dark-grey: #2c2c2c;
    --tci-light-gray: #e6e6e6;
    --tci-white: #ffffff;

    --tci-gradient: linear-gradient(90deg, #a01983 0%, #b057a1 100%);
    --tci-gradient-on-dark: linear-gradient(90deg, #ffffff 0%, #d9b7d1 100%);

    --tci-max: 1280px;
    --tci-gutter: clamp(1rem, 4vw, 4rem);

    /* Navbar (Figma Main V3 — node 6401:645) */
    --tci-header-min-h: 88px;
    --tci-nav-link-gap: 2.5rem; /* 40px — link-to-link rhythm */

    /*
     * Hero headline herov1 (node 6401:657) — left head + split row (lede | CTAs).
     */
    --tci-hero-headline-pt: clamp(2rem, 4.5vw, 4rem);
    --tci-hero-headline-pb: clamp(1.5rem, 3vw, 2rem);
    --tci-hero-rating-to-title: 1.5rem;
    --tci-hero-title-to-split: 1.5rem;
    --tci-hero-split-gap: clamp(1.25rem, 3vw, 2.5rem);
    --tci-hero-lede-max: 38rem;
    --tci-hero-cta-gap: 1rem;

    /* Hero strip + showcase (Figma section below headline) */
    --tci-hero-visual-radius: 1.5rem; /* 24px */
    /* Slightly wider/shorter than 16/7 so the hero photo reads at the same scale as the Figma reference. */
    --tci-hero-visual-aspect: 5 / 2;
    --tci-hero-visual-glow: 0 0 140px 24px rgba(176, 87, 161, 0.28),
        0 60px 100px -20px rgba(160, 25, 131, 0.28);
    --tci-hero-stat-bg: color-mix(in srgb, #1f1d1e 55%, transparent);
    --tci-hero-stat-border: color-mix(in srgb, #ffffff 18%, transparent);

    --tci-radius-sm: 12px;
    --tci-radius-md: 16px;
    --tci-radius-lg: 24px;
    --tci-radius-pill: 999px;
    --tci-shadow-soft: 0 24px 80px rgba(50, 47, 49, 0.12);

    --tci-font-heading: "Neue Haas Grotesk Text Pro";
    --tci-font-body: "Neue Haas Grotesk Text Pro";
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--tci-font-body);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--tci-black);
    background: var(--tci-bg);
    -webkit-font-smoothing: antialiased;
    /* Reduce widows / short last lines in body copy (Chrome 117+, Safari 17.5+). */
    text-wrap: pretty;
}

/* Short display headings: more even line lengths where the engine supports it. */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

#main {
    overflow-x: clip;
}

.tci-skip-link {
    position: absolute;
    left: -9999px;
}

.tci-skip-link:focus {
    left: 1rem;
    top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--tci-white);
    z-index: 1000;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */
.tci-frame {
    width: min(var(--tci-max), 100% - var(--tci-gutter) * 2);
    margin-inline: auto;
}

.tci-section {
    position: relative;
}

.tci-section--pad {
    padding-block: clamp(4rem, 5vw, 4rem);
}

.tci-section--muted {
    background: color-mix(in srgb, var(--tci-light-gray) 40%, var(--tci-bg));
}

.tci-section--dark {
    background: var(--tci-dark-grey);
    color: var(--tci-white);
}

.tci-section--dark .tci-t-body,
.tci-section--dark .tci-t-body-lg,
.tci-section--dark .tci-t-body-xl,
.tci-section--dark .tci-t-small {
    color: color-mix(in srgb, var(--tci-white) 80%, transparent);
}

/* ------------------------------------------------------------------ */
/* Typography — exact Figma sizes                                      */
/* ------------------------------------------------------------------ */
.tci-t-h1,
.tci-t-h2,
.tci-t-h3,
.tci-t-h4,
.tci-t-h5,
.tci-t-h6 {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    color: var(--tci-black);
    margin: 0;
    letter-spacing: -0.03em;
}

.tci-t-h1 {
    font-size: clamp(2.75rem, 4.5vw + 1rem, 4.375rem); /* 70px */
    line-height: 1.1;
    letter-spacing: -0.05em;
}

.tci-t-h2 {
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); /* 56px */
    line-height: 1;
    letter-spacing: -0.03em;
}

.tci-t-h3 {
    font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem); /* 44px */
    line-height: 1;
    letter-spacing: -0.03em;
}

.tci-t-h4 {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); /* ~32px */
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.tci-t-h5 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); /* 28px */
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.tci-t-h6 {
    font-size: 1.25rem; /* 20px */
    line-height: 1;
    letter-spacing: -0.03em;
}

.tci-t-h2--gradient,
.tci-t-h3--gradient,
.tci-t-h5--gradient,
.tci-t-h6--gradient {
    background: var(--tci-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-section--dark .tci-t-h1,
.tci-section--dark .tci-t-h2,
.tci-section--dark .tci-t-h3,
.tci-section--dark .tci-t-h4,
.tci-section--dark .tci-t-h5,
.tci-section--dark .tci-t-h6 {
    color: var(--tci-white);
}

.tci-t-body,
.tci-t-body-lg,
.tci-t-body-xl,
.tci-t-small {
    font-family: var(--tci-font-body);
    margin: 0;
    color: var(--tci-grey);
    line-height: 1.5;
}

.tci-t-body { font-size: 1rem; }             /* 16 */
.tci-t-body-lg { font-size: 1.125rem; }      /* 18 */
.tci-t-body-xl { font-size: 1.25rem; }       /* 20 */
.tci-t-small { font-size: 0.875rem; }        /* 14 */

.tci-t-bullet {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--tci-black);
}

.tci-t-numbers {
    font-family: var(--tci-font-body);
    font-size: clamp(2.75rem, 4.5vw + 1rem, 4.375rem);
    line-height: 1.1;
    letter-spacing: -0.05em;
    margin: 0;
    background: var(--tci-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-section--dark .tci-t-numbers {
    background: var(--tci-gradient-on-dark);
    -webkit-background-clip: text;
    background-clip: text;
}

.tci-t-quote {
    font-family: var(--tci-font-body);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); /* 32 */
    line-height: 1.2;
    margin: 0 0 1.5rem;
    color: var(--tci-white);
    font-style: normal;
    font-weight: 400;
}

.tci-t-name {
    font-family: var(--tci-font-body);
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--tci-white);
}

.tci-t-on-dark {
    color: color-mix(in srgb, var(--tci-white) 92%, transparent);
}

.tci-t-on-dark-soft {
    color: color-mix(in srgb, var(--tci-white) 72%, transparent);
}

.tci-t-bold {
    font-weight: 700;
}

.tci-text-center {
    text-align: center;
}

/* Eyebrow: small line + tagline */
.tci-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--tci-font-body);
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tci-primary);
    margin: 0 0 1rem;
}

.tci-section--dark .tci-eyebrow,
.tci-eyebrow--light {
    color: var(--tci-white);
}

.tci-eyebrow__line {
    width: 30px;
    height: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.tci-eyebrow--center {
    width: 100%;
    justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.tci-pbtn,
.tci-sbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 56px;
    padding: 0 0.5rem 0 1.5rem;
    border-radius: var(--tci-radius-pill);
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tci-pbtn {
    background: var(--tci-gradient);
    color: var(--tci-white);
    box-shadow: 0 14px 32px rgba(160, 25, 131, 0.3);
}

.tci-pbtn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.tci-pbtn__label,
.tci-sbtn__label {
    padding-inline: 0.25rem;
}

.tci-pbtn__circle,
.tci-sbtn__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tci-white);
    flex-shrink: 0;
}

.tci-sbtn {
    background: transparent;
    color: var(--tci-black);
    border-color: var(--tci-black);
    padding-right: 1.5rem;
}

.tci-section--dark .tci-sbtn {
    color: var(--tci-white);
    border-color: color-mix(in srgb, var(--tci-white) 45%, transparent);
}

.tci-sbtn--inverse {
    background: transparent;
    color: var(--tci-white);
    border-color: color-mix(in srgb, var(--tci-white) 45%, transparent);
}

.tci-sbtn--inverse .tci-sbtn__circle {
    background: var(--tci-white);
}

.tci-pbtn--block {
    width: 100%;
    justify-content: center;
}

.tci-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.tci-btn-row--center {
    justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Header (Navbar — node 6401:645)                                     */
/* Figma: logo left, links optically centered in frame, Start Now right */
/* Links: Proxima Nova Medium 16 / line-height 1.5 / Black #322F31     */
/* ------------------------------------------------------------------ */
.tci-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--tci-bg) 94%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tci-light-gray);
}

.tci-header__bar {
    width: min(var(--tci-max), 100% - var(--tci-gutter) * 2);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(1rem, 2.5vw, 1.5rem);
    min-height: var(--tci-header-min-h);
    padding-block: clamp(0.75rem, 1.5vw, 1.125rem);
}

.tci-header__logo {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
}

.tci-header__logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(44px, 5.5vw, 56px);
}

.tci-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--tci-light-gray);
    border-radius: var(--tci-radius-sm);
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
}

.tci-nav-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tci-primary) 45%, transparent);
    outline-offset: 2px;
}

.tci-nav-toggle__bar {
    width: 22px;
    height: 2px;
    background: var(--tci-black);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.tci-nav-toggle[aria-expanded="true"] .tci-nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.tci-nav-toggle[aria-expanded="true"] .tci-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.tci-nav-toggle[aria-expanded="true"] .tci-nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.tci-nav {
    grid-column: 2;
    justify-self: center;
    align-self: center;
}

.tci-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--tci-nav-link-gap);
}

@media (max-width: 1180px) and (min-width: 1025px) {
    .tci-nav__list {
        gap: 1.25rem;
    }
}

.tci-nav__list .sub-menu {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tci-nav__list .sub-menu a {
    font-family: var(--tci-font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--tci-grey);
}

.tci-nav__list .sub-menu a:hover {
    color: var(--tci-primary);
}

.tci-nav__link {
    font-family: var(--tci-font-body);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--tci-black);
    display: inline-block;
    padding-block: 0.375rem;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tci-nav__link:hover {
    color: var(--tci-primary);
}

.tci-nav__link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tci-primary) 45%, transparent);
    outline-offset: 4px;
    border-radius: 2px;
}

.tci-header__cta {
    grid-column: 3;
    justify-self: end;
    align-self: center;
}

.tci-header__cta--in-nav {
    display: none;
}

.tci-nav.is-open .tci-header__cta--in-nav {
    display: block;
}

.tci-header__cta--in-nav .tci-pbtn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1024px) {
    .tci-header__bar {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0;
    }

    .tci-header__logo {
        grid-column: 1;
        grid-row: 1;
    }

    .tci-nav-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .tci-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        display: none;
        width: 100%;
        margin-top: 0.75rem;
        padding: 1rem 0 1.25rem;
        border-top: 1px solid var(--tci-light-gray);
    }

    .tci-nav.is-open {
        display: block;
    }

    .tci-nav__list {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
    }

    .tci-nav__item {
        border-bottom: 1px solid color-mix(in srgb, var(--tci-light-gray) 80%, transparent);
    }

    .tci-nav__item:last-child {
        border-bottom: none;
    }

    .tci-nav__link {
        padding-block: 0.875rem;
        width: 100%;
    }

    .tci-nav__list .sub-menu {
        margin: 0 0 0.75rem;
        padding-left: 0.75rem;
    }

    .tci-header__cta--bar {
        display: none;
    }

    .tci-header__cta--in-nav {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--tci-light-gray);
    }
}

/* ------------------------------------------------------------------ */
/* Hero headline — Figma 6401:657                                       */
/* Frame: flex items-end gap-40 px-64 pt-80 pb-40                      */
/* Copy col: rating · H1 capitalize dark-gradient · body regular 16    */
/* Button col: solid #A01983 primary + 20px-padded secondary           */
/* ------------------------------------------------------------------ */
.tci-hero {
    padding-top: clamp(2.5rem, 5.5vw, 5rem);
}

.tci-hero__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
 
    padding-bottom: clamp(1.5rem, 2.75vw, 2.5rem);
    text-align: left;
}

.tci-hero__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    max-width: 52rem; /* ~810 / 16 Figma copy column */
}

.tci-hero__subheadline {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tci-black);
    margin: 0;
    text-wrap: balance;
}

.tci-hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tci-hero__rating-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.tci-hero__rating-num {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-black);
    margin-inline: 0.375rem 0.25rem;
}

.tci-hero__stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* H1: Noka Semibold 70/1.1, tracking -5, capitalize, #505153 → #201E1F gradient. */
.tci-hero__title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.375rem, 3.75vw + 1rem, 4.375rem);
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    margin: 0;
    text-wrap: balance;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Body: Proxima Regular 16/1.5, tracking -2 (~-0.02em), grey #4B4C4E. */
.tci-hero__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    max-width: 48rem;
    text-wrap: pretty;
}

.tci-hero__ctas {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* Figma primary pill: solid #A01983 w/ white label + white circle arrow chip. */
.tci-hero__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 16px 28px rgba(160, 25, 131, 0.28);
    height: 56px;
    padding: 0 0.5rem 0 1.25rem; /* 8 right · 20 left */
}

.tci-hero__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    height: 56px;
    padding: 0 1.25rem; /* 20 · 20 */
}

.tci-hero__ctas .tci-sbtn:hover {
    background: color-mix(in srgb, var(--tci-primary) 6%, var(--tci-white));
}

.tci-hero__ctas .tci-pbtn__label,
.tci-hero__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em; /* 0.64 / 16 */
    text-transform: uppercase;
    padding-inline: 0;
}

@media (max-width: 900px) {
    .tci-hero__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .tci-hero__copy {
        max-width: 100%;
    }

    .tci-hero__subheadline {
        font-size: clamp(1.125rem, 2vw + 0.75rem, 1.375rem);
    }
}

@media (max-width: 560px) {
    .tci-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .tci-hero__ctas .tci-pbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Hero strip — Figma 6401:679                                          */
/* Frame: flex items-center gap-24 px-64 py-32                         */
/* Question: Body XL 20 grey · Chips: icon 24 + Noka Semibold 16 caps  */
/* Fade masks: 120px both edges (white → transparent)                  */
/* ------------------------------------------------------------------ */
.tci-hero__strip {
    padding-block: 1rem; /* 16 */
    display: flex;
    align-items: center;
    gap: 1.5rem; /* 24 */
}

.tci-hero__strip-q {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.25rem; /* 20 */
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
}

.tci-hero__strip-q span {
    display: inline-block;
    animation: tci-board-flicker 7s steps(24, end) infinite;
}

@keyframes tci-board-flicker {
    0%, 84%, 100% { opacity: 1; transform: translateY(0); filter: none; }
    85% { opacity: 0.85; transform: translateY(-1px); filter: blur(0.2px); }
    87% { opacity: 0.95; transform: translateY(1px); }
    89% { opacity: 1; transform: translateY(0); }
}

.tci-hero__strip-scroll {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Match Figma: 120px gradient fades on BOTH left and right edges. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black clamp(3rem, 8vw, 7.5rem),
        black calc(100% - clamp(3rem, 8vw, 7.5rem)),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        black clamp(3rem, 8vw, 7.5rem),
        black calc(100% - clamp(3rem, 8vw, 7.5rem)),
        transparent 100%
    );
}

.tci-hero__strip-scroll:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tci-primary) 45%, transparent);
    outline-offset: 4px;
    border-radius: 0.25rem;
}

.tci-hero__strip-scroll::-webkit-scrollbar {
    display: none;
}

.tci-hero__chips {
    display: flex;
    align-items: center;
    gap: 2rem; /* 32 */
    padding: 0 2rem;
    min-width: max-content;
}

.tci-hero__chips-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: tci-hero-chips-loop 34s linear infinite;
}

.tci-hero__strip-scroll:hover .tci-hero__chips-track,
.tci-hero__strip-scroll:focus-within .tci-hero__chips-track {
    animation-play-state: paused;
}

@keyframes tci-hero-chips-loop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.tci-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* 10 */
    flex-shrink: 0;
    background: transparent;
    border: 0;
    scroll-snap-align: start;
}

.tci-hero-chip__icon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.tci-hero-chip__label {
    font-family: var(--tci-font-heading); /* Noka Semibold per Figma */
    font-weight: 600;
    font-size: 1rem; /* 16 */
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--tci-black);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .tci-hero__strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tci-hero__strip-scroll {
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .tci-hero__chips-track {
        width: auto;
        animation: none;
    }

    .tci-hero__chips {
        padding: 1rem 2rem 1rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tci-hero__chips-track {
        animation: none;
    }

    .tci-hero__strip-q span {
        animation: none;
    }
}

.tci-hero__fade {
    display: none;
}

.tci-hero__visual-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tci-hero__visual-shell::before {
    content: "";
    position: absolute;
    inset: 6% -2% 2%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.35) 0%,
        rgba(160, 25, 131, 0.18) 45%,
        transparent 70%
    );
    filter: blur(40px);
    pointer-events: none;
}

.tci-hero__visual {
    position: relative;
    aspect-ratio: var(--tci-hero-visual-aspect);
    width: 100%;
    border-radius: var(--tci-hero-visual-radius);
    overflow: hidden;
    box-shadow: var(--tci-hero-visual-glow);
}

.tci-hero__visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tci-hero__visual--bg {
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

/* Cards row — Figma 6401:725: absolute bottom, px-40 gap-24, three equal columns. */
.tci-hero__stat-grid {
    position: static;
    width: 100%;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
    z-index: 2;
    background: rgba(50, 47, 49, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
            backdrop-filter: blur(18px) saturate(120%);
    border-radius: 1rem;
    overflow: hidden;
}

/* Figma: bg rgba(50,47,49,0.6) · radius 16 · p-24 · gap-8 flex-col items-start. */
.tci-hero-stat {
    background: rgba(50, 47, 49, 0.72);
    color: var(--tci-white);
    border: 0;
    border-radius: 0.75rem;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;
}

.tci-hero-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--tci-white);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #d320c2;
}

.tci-hero-stat + .tci-hero-stat {
    border-left: 0;
}

.tci-hero__metrics-title {
    position: static;
    margin: 0;
    z-index: 2;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.35rem);
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tci-black);
    text-align: left;
    text-shadow: none;
}

/* Number: Proxima Regular 70/1.1 capitalize tracking -5, #FCFCFC. */
.tci-hero-stat .tci-t-h2,
.tci-hero-stat__num {
    color: var(--tci-white);
    background: none;
    -webkit-text-fill-color: currentColor;
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 2.375rem;
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-transform: capitalize;
}

/* Subcopy: Proxima Regular 16/1.5 tracking -2. */
.tci-hero-stat .tci-t-body,
.tci-hero-stat__sub {
    color: var(--tci-white);
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-align: left;
    text-wrap: balance;
}

.tci-hero-stat__label {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 700;
    font-size: 0.625rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

@media (max-width: 960px) {
    :root {
        --tci-hero-visual-aspect: 4 / 3;
    }

    .tci-hero__stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        background: transparent;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        border-radius: 0;
        overflow: visible;
    }

    .tci-hero__metrics-title { font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.35rem); }

    .tci-hero-stat {
        background: rgba(50, 47, 49, 0.6);
        -webkit-backdrop-filter: blur(18px) saturate(120%);
                backdrop-filter: blur(18px) saturate(120%);
        border-radius: 1rem;
        padding: 0.625rem;
    }

    .tci-hero-stat + .tci-hero-stat {
        border-left: 0;
    }

    .tci-hero-stat .tci-t-h2,
    .tci-hero-stat__num {
        font-size: 1rem;
    }

    .tci-hero-stat .tci-t-body,
    .tci-hero-stat__sub {
        font-size: 0.6875rem;
    }
}

@media (max-width: 560px) {
    :root {
        --tci-hero-visual-aspect: 4 / 5;
        --tci-hero-visual-radius: 1.5rem;
    }

    .tci-hero__visual--bg {
        padding: 12px;
    }

    .tci-hero__stat-grid {
        position: static;
        margin-top: 0.75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .tci-hero__metrics-title {
        margin: 0 0 0.75rem;
    }

    .tci-hero-stat {
        padding: 0.75rem;
        gap: 0.375rem;
    }

    .tci-hero-stat__icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1rem;
    }

    .tci-hero-stat .tci-t-h2,
    .tci-hero-stat__num {
        font-size: 0.95rem;
    }

    .tci-hero-stat__label,
    .tci-hero-stat .tci-t-body,
    .tci-hero-stat__sub {
        font-size: 0.625rem;
    }
}

/* ------------------------------------------------------------------ */
/* Brand carousel (node 6401:709) — seamless marquee                    */
/* The track contains the brand list TWICE; we translate it -50% in a  */
/* linear loop so the duplicated half feeds back into view smoothly.   */
/* ------------------------------------------------------------------ */
.tci-logo-reel {
    --tci-logo-reel-duration: 40s;
    --tci-logo-reel-gap: clamp(2.5rem, 6vw, 5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.tci-logo-reel__viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tci-logo-reel__row {
    width: 100%;
    overflow: hidden;
}

.tci-logo-reel__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: none;
    will-change: transform;
}

.tci-logo-reel__row--bottom .tci-logo-reel__track {
    animation-direction: reverse;
}

.tci-logo-reel:hover .tci-logo-reel__track,
.tci-logo-reel__track:focus-within {
    animation-play-state: paused;
}

@keyframes tci-logo-reel-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        /* Each set is half the track; shifting by -50% places the duplicate at the start. */
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tci-logo-reel__track {
        animation: none;
    }
}

.tci-logo-reel__set {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Use trailing margin (not flex gap) so the two-set translate -50% loops perfectly. */
.tci-logo-reel__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--tci-logo-reel-gap);
    color: var(--tci-grey);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.tci-logo-reel__item:hover {
    opacity: 1;
}

.tci-logo-reel__item img {
    max-height: clamp(22px, 2vw, 32px);
    width: auto;
    display: block;
}

@media (min-width: 961px) {
    .tci-logo-reel__row {
        overflow: visible;
    }

    .tci-logo-reel__track {
        width: 100%;
    }

    .tci-logo-reel__set {
        width: 100%;
        justify-content: space-between;
    }

    .tci-logo-reel__set[aria-hidden="true"] {
        display: none;
    }

    .tci-logo-reel__item {
        margin-right: 0;
    }
}

@media (max-width: 960px) {
    .tci-logo-reel__row {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            black clamp(1.5rem, 6vw, 3rem),
            black calc(100% - clamp(1.5rem, 6vw, 3rem)),
            transparent 100%
        );
                mask-image: linear-gradient(
            to right,
            transparent 0,
            black clamp(1.5rem, 6vw, 3rem),
            black calc(100% - clamp(1.5rem, 6vw, 3rem)),
            transparent 100%
        );
    }

    .tci-logo-reel__track {
        animation: tci-logo-reel-scroll var(--tci-logo-reel-duration) linear infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tci-logo-reel__track {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Impact / About — Figma 6401:736 "Numbers and Text 2"                 */
/* Bg gradient #322F31 → #080708 · py-80 px-64                         */
/* Top: tagline + H2 + body (left) · CTAs (right, bottom-aligned)      */
/* Bottom: 4 cards linear-gradient #4B4C4E → #373839, rounded 16       */
/* ------------------------------------------------------------------ */
.tci-impact-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    color: var(--tci-white);
    padding-block: clamp(3rem, 7vw, 5rem); /* 80 */
}

.tci-impact-bg {
    position: absolute;
    inset: auto -8% -40% -8%;
    height: 70%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.28) 0%,
        rgba(160, 25, 131, 0.16) 45%,
        transparent 70%
    );
    filter: blur(60px);
}

.tci-impact {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2.1875rem; /* 35 */
}

.tci-impact__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.1875rem;
    width: 100%;
}

.tci-impact__intro {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16 */
    align-items: flex-start;
}

.tci-impact__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; /* 8 */
}

.tci-impact__line {
    width: 30px;
    height: 2px;
    display: block;
    background: linear-gradient(90deg, #b057a1 0%, #fcfcfc 100%);
}

/* Tagline label: Proxima Regular 18, uppercase, tracking 2.88 / 18 ≈ 0.16em. */
.tci-impact__label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tci-white);
}

/* H2: Noka Semibold 56/1 capitalize tracking -1.68, light-purple → white. */
.tci-impact__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-impact__text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-white);
    max-width: 43.75rem; /* 700px — matches reference line length */
    margin: 0;
}

/* CTA column — same uppercase styling as hero buttons. */
.tci-impact__ctas {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.tci-impact__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.32);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-impact__ctas .tci-pbtn__label,
.tci-impact__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

.tci-impact__logos {
    --tci-logo-reel-gap: clamp(2.5rem, 5vw, 4.5rem);
    padding-block: 0;
}

.tci-impact__logos-title {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--tci-font-body);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tci-purple);
    text-align: center;
}

.tci-impact__logos-title::before,
.tci-impact__logos-title::after {
    content: "";
    height: 1px;
    width: clamp(60px, 14vw, 140px);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--tci-purple) 85%, transparent) 100%);
}

.tci-impact__logos-title::after {
    background: linear-gradient(270deg, transparent 0%, color-mix(in srgb, var(--tci-purple) 85%, transparent) 100%);
}

.tci-impact__logos .tci-logo-reel__item {
    min-height: 52px;
    width: clamp(96px, 9vw, 140px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.tci-impact__logos .tci-logo-reel__item img {
    height: clamp(22px, 2.1vw, 32px);
    min-height: 22px;
    width: auto;
    max-width: 86%;
    object-fit: contain;
    object-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

@media (max-width: 960px) {
    .tci-impact__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

}

@media (max-width: 560px) {
    .tci-impact__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tci-impact__ctas .tci-pbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Core Services — full-bleed horizontal carousel w/ featured center   */
/* Head + nav inside tci-frame · track spans 100vw · purple glow below */
/* ------------------------------------------------------------------ */
.tci-services {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            120% 80% at 50% 0%,
            var(--tci-white) 0%,
            var(--tci-white) 35%,
            transparent 70%
        ),
        linear-gradient(180deg, #f8f7fb 0%, #f1f6ef 100%);
}

.tci-services__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    margin-bottom: 3rem;
}

.tci-services__tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.tci-services__tagline-line {
    width: 30px;
    height: 2px;
    display: block;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
}

/* Tagline: Proxima Regular 18 uppercase tracking 2.88 / 18 ≈ 0.16em. */
.tci-services__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tci-dark-grey);
}

/* H2: Noka Semibold clamp 36→56 capitalize tracking -3%. */
.tci-services__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    color: var(--tci-black);
}

.tci-services__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    max-width: 40rem; /* 482px */
    margin: 0 auto;
}

/* Carousel wrapper breaks out of any constraint and covers the viewport width. */
.tci-services__carousel {
    position: relative;
    width: min(var(--tci-max), 100% - var(--tci-gutter) * 2);
    margin-inline: auto;
}

/* Soft purple glow sitting behind the cards. */
.tci-services__glow {
    position: absolute;
    left: 50%;
    top: calc(50% - 1.5rem);
    transform: translate(-50%, -50%);
    width: min(922px, 85%);
    height: 308px;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.3) 0%,
        rgba(160, 25, 131, 0.14) 50%,
        transparent 75%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Viewport scrolls horizontally across the full page width. */
.tci-services__viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: visible;
}

/* Track: side-padded so the first/last card can still be centered by the snap. */
.tci-services__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem; /* 16 */
    padding-block: 1rem 0;
    width: 100%;
}

/* Side card — fixed narrow size; only the title is shown. */
.tci-service-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    justify-self: center;
    height: 360px;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: var(--tci-white);
    background: #2a1a23;
    transition: filter 140ms ease;
    will-change: transform;
    transform: scale(1);
}

/* Featured card — keep same footprint to avoid reflow lag. */


.tci-service-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tci-service-card__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Veil — bottom-weighted dark-purple gradient so text is legible. */
.tci-service-card__grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(185.04deg, rgba(71, 11, 58, 0) 3.21%, #470B3A 95.94%);
}



.tci-service-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    opacity: 0.92;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.tci-service-card__body {
    opacity: 1;
    transform: translateY(0);
}

.tci-service-card__title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 1.125rem; /* 18 */
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    color: var(--tci-white);
    margin: 0;
    min-height: 4.21875rem; /* 3 lines at 18px/1.25 keeps card copy aligned. */
    text-wrap: balance;
    transition: none;
}



.tci-service-card__desc {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 0.8125rem; /* 13 */
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--tci-white) 85%, transparent);
    margin: 0;
    min-height: 3.65625rem; /* 3 lines at 13px/1.5 keeps support text aligned. */
    text-wrap: balance;
}

/* Featured CTA — white pill with purple label + filled purple chip. */
.tci-service-card__cta {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    background: var(--tci-white);
    border: 0;
    border-radius: var(--tci-radius-pill);
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
    display: block;
}



.tci-service-card:not(.tci-service-card--featured) {
    filter: saturate(0.95) brightness(0.98);
    transform: translateY(0);
}

.tci-service-card__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.tci-service-card__cta-label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tci-primary);
}

.tci-service-card__cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tci-primary);
    flex-shrink: 0;
}

/* Nav row — prev filled purple · dots · outline next (inside tci-frame). */


.tci-services__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.tci-services__nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.tci-services__nav-btn--prev {
    background: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    color: var(--tci-white);
}

.tci-services__nav-btn--next {
    background: var(--tci-white);
    border: 1px solid var(--tci-light-gray);
    color: var(--tci-primary);
}

.tci-services__nav-btn:hover {
    transform: translateY(-1px);
}

.tci-services__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tci-services__dot {
    position: relative;
    width: 8px;
    height: 4px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--tci-light-gray);
    display: block;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    transition: width 0.2s ease, background 0.2s ease;
}

.tci-services__dot:focus-visible {
    outline: 2px solid var(--tci-primary);
    outline-offset: 3px;
}

.tci-services__dot--active {
    width: 48px;
    background: linear-gradient(90deg, #cf96c5 0%, #a01983 100%);
}

@media (max-width: 1200px) {
    .tci-services__track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tci-service-card {
        flex: 0 1 calc((100% - 2rem) / 3);
    }
}

@media (max-width: 720px) {
    .tci-service-card {
        height: 300px;
    }

    .tci-services__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* Services Tabs 1 — Figma 6401:810                                     */
/* Header row (tagline + H2 left · CTAs right, items-end)              */
/* Pill tab bar (bg white · 1px #E6E6E6 · rounded-16 · p-12)           */
/* Split row (copy 567 · image flex-1 · gap-80 · ellipse glow behind)  */
/* ------------------------------------------------------------------ */
.tci-tabs {
    background: var(--tci-white);
}

.tci-tabs__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 4.0625rem; /* 65 */
}

.tci-tabs__intro {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.tci-tabs__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-tabs__tagline-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    display: block;
}

.tci-tabs__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-tabs__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-tabs__heading-support {
    margin: 0;
    max-width: 58rem;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
}

.tci-tabs__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.tci-tabs__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-tabs__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    padding: 0 1.25rem;
}

.tci-tabs__ctas .tci-pbtn__label,
.tci-tabs__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

.tci-tabs__panel-wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48 */
}

.tci-tabs__bar-wrap {
    display: block;
}

/* Pill tab bar — white bg · 1px border · rounded-16 · p-12. */
.tci-tabs__bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    margin-bottom: 0;
}

.tci-tabs__tab {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--tci-white);
    border: 1px solid var(--tci-light-gray);
    padding: 0.625rem 0.75rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: normal;
    position: relative;
}

.tci-tabs__tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--tci-black) 70%, transparent);
    font-size: 1.3rem;
    line-height: 1;
}

.tci-tabs__tab-label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: clamp(0.78rem, 0.38vw + 0.66rem, 0.92rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
    opacity: 0.5;
    white-space: normal;
    text-align: left;
    transition: opacity 0.15s ease;
}

.tci-tabs__tab.is-active {
    background: var(--tci-primary);
    border-color: transparent;
}

.tci-tabs__tab.is-active .tci-tabs__tab-label {
    font-weight: 600;
    color: var(--tci-white);
    opacity: 1;
}

.tci-tabs__tab:hover {
    background: color-mix(in srgb, var(--tci-primary) 14%, var(--tci-white));
}

.tci-tabs__tab.is-active .tci-tabs__tab-icon {
    color: var(--tci-white);
}

.tci-tabs__tab:hover .tci-tabs__tab-label {
    opacity: 1;
    color: var(--tci-primary);
}

.tci-tabs__tab:hover .tci-tabs__tab-icon {
    color: var(--tci-primary);
}

.tci-tabs__tab.is-active:hover {
    background: var(--tci-primary);
}

.tci-tabs__tab.is-active:hover .tci-tabs__tab-label {
    color: var(--tci-white);
}

.tci-tabs__tab.is-active:hover .tci-tabs__tab-icon {
    color: var(--tci-white);
}

.tci-tabs__tab.is-active:hover .tci-tabs__tab-label {
    opacity: 1;
}

.tci-tabs__panel[hidden] {
    display: none;
}

/* Panel transition — fade/slide on tab switch. */
.tci-tabs__panel {
    opacity: 1;
    transform: none;
    will-change: opacity, transform;
}

.tci-tabs__panel.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tci-tabs__panel {
        transform: none;
    }
}

/* Split row — Figma: copy 567 · image flex-1 · gap-80 · items-center. */
.tci-tabs__split {
    display: grid;
    grid-template-columns: 567px minmax(0, 1fr);
    gap: 5rem; /* 80 */
    align-items: center;
    position: relative;
}

.tci-tabs__copy {
    display: flex;
    flex-direction: column;
    gap: 2.75rem; /* 44 */
    align-items: flex-start;
    max-width: 100%;
}

/* H3: Noka Semibold 44/1 capitalize tracking -1.32 dark gradient. */
.tci-tabs__subheading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.875rem, 2.75vw + 1rem, 2.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0 0 1rem;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-tabs__prose {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 1rem;
}

.tci-tabs__prose p {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
}

.tci-tabs__prose-bold {
    font-weight: 700 !important;
}

.tci-tabs__checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16 */
    width: 100%;
}

.tci-tabs__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem; /* 8 */
}

.tci-tabs__check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.tci-tabs__check-text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
}

.tci-tabs__visual {
    position: relative;
    aspect-ratio: 665 / 480;
}

/* Ellipse glow: 665x480 positioned to the right of the section. */
.tci-tabs__visual-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 120%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.28) 0%,
        rgba(160, 25, 131, 0.14) 45%,
        transparent 72%
    );
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.tci-tabs__visual-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem; /* 24 */
    overflow: hidden;
}

.tci-tabs__visual-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 960px) {
    .tci-tabs__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .tci-tabs__split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tci-tabs__bar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.5rem;
    }

}

@media (max-width: 560px) {
    .tci-tabs__bar {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        gap: 0.5rem;
    }

    .tci-tabs__bar::-webkit-scrollbar {
        display: none;
    }

    .tci-tabs__tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 8.25rem;
    }

    .tci-tabs__ctas {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .tci-tabs__ctas .tci-pbtn,
    .tci-tabs__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }
}

.tci-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tci-checks li {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    color: var(--tci-black);
    font-weight: 500;
}

.tci-checks--dark li {
    color: var(--tci-grey);
}

@media (max-width: 960px) {
    .tci-tabs-head,
    .tci-tabs-split {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Trusted by Companies — Figma 6401:865                                */
/* Dark gradient strip · gradient H6 label · clipped auto-scroll reel.  */
/* ------------------------------------------------------------------ */
.tci-trusted {
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    padding-top: 48px;
    padding-bottom: 48px;
}

.tci-trusted__row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.tci-trusted__label {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.6px;
    text-transform: capitalize;
    white-space: nowrap;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-trusted__reel {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.tci-trusted__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: max-content;
    opacity: 0.5;
    animation: tci-trusted-scroll 28s linear infinite;
}

.tci-trusted__reel:hover .tci-trusted__track {
    animation-play-state: paused;
}

.tci-trusted__logo {
    flex-shrink: 0;
    width: 200px;
    height: var(--tci-logo-h, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tci-trusted__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

@keyframes tci-trusted-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (200px + 24px) * 4)); }
}

@media (prefers-reduced-motion: reduce) {
    .tci-trusted__track {
        animation: none;
    }
}

@media (max-width: 720px) {
    .tci-trusted {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .tci-trusted__row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .tci-trusted__label {
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* 3 Column — Figma 6401:903 (What We Deliver)                          */
/* Centered tagline + H2 + 502px lede                                   */
/* Row of 3 purple-tint cards · bottom-centered primary + secondary     */
/* ------------------------------------------------------------------ */
.tci-col3 {
    background: var(--tci-white);
}

.tci-col3__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48 */
}

.tci-col3__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* 16 */
    width: 100%;
}

.tci-col3__tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.tci-col3__tagline-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    display: block;
}

.tci-col3__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-col3__title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    width: 100%;
}

.tci-col3__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(180deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-col3__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    max-width: 31.375rem; /* 502 */
}

.tci-col3__row {
    display: flex;
    gap: 2rem; /* 32 */
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

.tci-col3-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* 24 */
    padding: 1.5rem;
    border: 1px solid var(--tci-light-gray);
    border-radius: 1rem;
    background: linear-gradient(360deg, #f8f1f7 0%, #fcfcfc 100%);
}

.tci-col3-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tci-col3-card__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.tci-col3-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem; /* 12 */
    width: 100%;
}

.tci-col3-card__title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem); /* 28 */
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: 100%;
}

.tci-col3-card__text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    width: 100%;
}

.tci-col3__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tci-col3__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-col3__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    padding: 0 1.25rem;
}

.tci-col3__ctas .tci-pbtn__label,
.tci-col3__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

@media (max-width: 960px) {
    .tci-col3__row {
        flex-wrap: wrap;
    }

    .tci-col3-card {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (max-width: 640px) {
    .tci-col3__row {
        flex-direction: column;
    }

    .tci-col3-card {
        flex: 1 1 auto;
        width: 100%;
    }

    .tci-col3__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tci-col3__ctas .tci-pbtn,
    .tci-col3__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* How it Works Timeline — Figma 6401:938 + layout reference            */
/* Equal columns top-aligned · intro + vertical carousel (fade + swipe)   */
/* ------------------------------------------------------------------ */
.tci-hiw {
    background: var(--tci-white);
}

.tci-hiw__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 5rem);
}

.tci-hiw__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tci-hiw__content > * {
    max-width: 38.5rem;
}

.tci-hiw__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.tci-hiw__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-hiw__tagline-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    display: block;
}

.tci-hiw__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-hiw__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: none;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-hiw__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
}

/* Vertical step carousel · active slide fully visible + next title peeks & fades */
.tci-hiw__carousel {
    width: 100%;
    user-select: none;
    --tci-hiw-slide-h: 11rem; /* 176px – fit for title + body */
    --tci-hiw-peek: 3.25rem; /* next-step title preview */
}

.tci-hiw__controls {
    margin-bottom: 0.875rem;
    display: flex;
    gap: 0.5rem;
}

.tci-hiw__nav-btn {
    border: 1px solid var(--tci-light-gray);
    background: var(--tci-white);
    color: var(--tci-primary);
    border-radius: 999px;
    padding: 0.5rem 0.875rem;
    font-family: var(--tci-font-body);
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tci-hiw__carousel:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tci-primary) 70%, transparent);
    outline-offset: 4px;
    border-radius: 4px;
}

.tci-hiw__carousel-viewport {
    position: relative;
    height: calc(var(--tci-hiw-slide-h) + var(--tci-hiw-peek));
    overflow: hidden;
    width: 100%;
    touch-action: none;
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 calc(var(--tci-hiw-slide-h) - 1.5rem),
        transparent 100%
    );
            mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 calc(var(--tci-hiw-slide-h) - 1.5rem),
        transparent 100%
    );
}

.tci-hiw__carousel-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
    transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1);
}

.tci-hiw__carousel.is-dragging .tci-hiw__carousel-track {
    transition: none;
}

.tci-hiw__slide {
    flex: 0 0 auto;
    height: var(--tci-hiw-slide-h);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    opacity: 1; /* visibility controlled by mask, not fade */
}

.tci-hiw__slide-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
}

.tci-hiw__slide-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.tci-hiw__step-title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem); /* 28 */
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: 100%;
}

.tci-hiw__step-text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    width: 100%;
}

.tci-hiw__step-cta {
    display: flex;
    align-items: flex-start;
}

.tci-hiw__slide:not(.is-active) .tci-hiw__step-cta {
    visibility: hidden;
    pointer-events: none;
}

.tci-hiw__step-cta .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-hiw__step-cta .tci-pbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

/* Visual — Figma: 616×579, fills its grid cell, top-aligned with intro. */
.tci-hiw__visual {
    min-width: 0;
    width: 100%;
    max-width: 38.5rem;
    justify-self: end;
    position: relative;
    aspect-ratio: 616 / 579;
}

.tci-hiw__visual-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.3) 0%,
        rgba(160, 25, 131, 0.15) 45%,
        transparent 72%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.tci-hiw__visual-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem; /* 24 */
    overflow: hidden;
}

.tci-hiw__visual-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .tci-hiw__row {
        gap: 2.5rem;
    }
}

@media (max-width: 960px) {
    .tci-hiw__row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tci-hiw__content > *,
    .tci-hiw__visual {
        max-width: 100%;
    }

    .tci-hiw__visual {
        aspect-ratio: 4 / 3;
        justify-self: stretch;
        order: -1;
    }

    .tci-hiw__carousel {
        --tci-hiw-slide-h: 12rem;
        --tci-hiw-peek: 2.75rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .tci-hiw__carousel-track {
        transition-duration: 0.01ms;
    }

    .tci-hiw__slide {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Written Testimonial 5 — box carousel                                  */
/* ------------------------------------------------------------------ */
.tci-wt {
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

.tci-wt__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: min(var(--tci-max), 100% - var(--tci-gutter) * 2);
    margin-inline: auto;
}

.tci-wt__slides {
    width: 100%;
    position: relative;
    min-height: 0;
}

.tci-wt__slide {
    width: 100%;
}

.tci-wt-card {
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--tci-white) 20%, transparent);
    background: linear-gradient(180deg, rgba(75, 76, 78, 0.35) 0%, rgba(44, 44, 44, 0.8) 100%);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(240px, 36%) minmax(0, 1fr);
    min-height: 0;
}

.tci-wt-card__media {
    position: relative;
    min-height: 100%;
}

.tci-wt-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tci-wt-card__body {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
}

.tci-wt__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.tci-wt__tagline-line {
    width: 30px;
    height: 2px;
    background: var(--tci-white);
    display: block;
}

.tci-wt__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tci-white);
}

.tci-wt__quote {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.5rem; /* 24 */
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    color: var(--tci-white);
    width: 100%;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .tci-wt__quote {
        background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.tci-wt__avatar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: var(--tci-white);
}

.tci-wt__role {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem; /* 18 */
    line-height: 1.5;
    letter-spacing: -0.02em;
    margin: 0;
}

.tci-wt__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.tci-wt__btn {
    border: 1px solid color-mix(in srgb, var(--tci-white) 28%, transparent);
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    color: var(--tci-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tci-wt__dots {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.tci-wt__dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tci-white) 35%, transparent);
    padding: 0;
}

.tci-wt__dot.is-active {
    width: 34px;
    background: linear-gradient(90deg, #cf96c5 0%, #a01983 100%);
}

@media (max-width: 960px) {
    .tci-wt-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tci-wt-card__media {
        min-height: 260px;
    }

    .tci-wt__slides {
        min-height: 0;
    }

    .tci-wt__tagline-label {
        font-size: 0.875rem;
    }

    .tci-wt__quote {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    .tci-wt__role {
        font-size: 0.9375rem;
        line-height: 1.4;
    }
}

/* ------------------------------------------------------------------ */
/* Video With Text Descriptions — Figma 6401:993                        */
/* Header row (tagline+H2+lede / CTAs items-end) · horizontal carousel  */
/* of 282h capability cards · one slide expands with text to the right  */
/* Right-edge fade overlay · slider dots + prev/next buttons            */
/* ------------------------------------------------------------------ */
.tci-vcap {
    background: var(--tci-white);
    padding-block: 5rem 2.5rem; /* pt-80 pb-40 */
    overflow: hidden;
}

.tci-vcap__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48 */
}

.tci-vcap__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.tci-vcap__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 38.75rem; /* 620 */
}

.tci-vcap__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-vcap__tagline-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    display: block;
}

.tci-vcap__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-vcap__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(180deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-vcap__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    max-width: 28.875rem; /* 462 */
}

.tci-vcap__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.tci-vcap__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-vcap__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    padding: 0 1.25rem;
}

.tci-vcap__ctas .tci-pbtn__label,
.tci-vcap__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

/* Viewport — clip track; horizontal position is driven by arrows (JS translateX), not touch scroll. */
.tci-vcap__viewport {
    position: relative;
    width: 100%;
    overflow: visible;
    touch-action: pan-y; /* horizontal strip is arrow-driven only */
}

.tci-hiw__nav-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

@media (max-width: 900px) {
    .tci-tabs__bar {
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0.5rem;
    }

    .tci-tabs__tab {
        scroll-snap-align: start;
    }
}

.tci-vcap__track {
    display: flex;
    gap: 15px;
    align-items: stretch;
    padding-bottom: 0.5rem; /* allow scroll without clipping shadows */
    will-change: transform;
    transition: none;
}

.tci-vcap-card {
    position: relative;
    flex: 0 0 290px;
    height: 282px;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fcfeff;
    background: #2a1a23;
}

.tci-vcap-card--faded {
    opacity: 0.4;
}

.tci-vcap-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tci-vcap-card__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tci-vcap-card__grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(181deg, rgba(71, 11, 58, 0) 30%, rgba(71, 11, 58, 1) 99%);
    pointer-events: none;
}

.tci-vcap-card__title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 1.25rem; /* 20 */
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    color: #fcfeff;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tci-vcap-card__title span + span {
    margin-top: 0.1em;
}

/* Expanded slide — compact capability card (290) + inline text (268) to its right. */
.tci-vcap-expand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem; /* 24 */
}

.tci-vcap-card--compact {
    flex: 0 0 290px;
    width: 290px;
}

.tci-vcap-expand__text {
    width: 16.75rem; /* 268 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.tci-vcap-expand__title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem); /* 28 */
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: 100%;
}

.tci-vcap-expand__divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #a01983 0%, rgba(160, 25, 131, 0) 100%);
    display: block;
}

.tci-vcap-expand__body {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
}

/* Right-edge fade — Figma absolute 101w fade from transparent to #FCFCFC. */
.tci-vcap__fade {
    display: block;
}

/* Slider controls — centered row: filled purple prev · dot track · outline next. */
.tci-vcap__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.tci-vcap__nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.tci-vcap__nav-btn--prev {
    background: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    color: var(--tci-white);
}

.tci-vcap__nav-btn--next {
    background: var(--tci-white);
    border: 1px solid var(--tci-light-gray);
    color: var(--tci-primary);
}

.tci-vcap__nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.tci-vcap__nav-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
}

.tci-vcap__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tci-vcap__dot {
    width: 8px;
    height: 4px;
    border-radius: 8px;
    background: var(--tci-light-gray);
    display: block;
    transition: width 0.2s ease, background 0.2s ease;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.tci-vcap__dot:focus-visible {
    outline: 2px solid var(--tci-primary);
    outline-offset: 2px;
}

.tci-vcap__dot--active {
    width: 48px;
    background: linear-gradient(90deg, #cf96c5 0%, #a01983 100%);
}

@media (max-width: 960px) {
    .tci-vcap__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .tci-vcap__ctas {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tci-vcap__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .tci-vcap__ctas .tci-pbtn,
    .tci-vcap__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }

    .tci-vcap-card {
        flex-basis: 240px;
    }

    .tci-vcap-expand {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .tci-vcap-expand__text {
        width: 240px;
    }
}

/* ------------------------------------------------------------------ */
/* Double CTA Banner 2 — Figma 6401:1037                                */
/* Rounded-24 image card · 40% black shade · centered white-gradient H2 */
/* Purple ellipse glow behind · primary + outline CTAs (gap-16)         */
/* ------------------------------------------------------------------ */
.tci-cta2 {
    padding-block: 2.5rem 5rem; /* pt-40 pb-80 */
    background: var(--tci-white);
}

.tci-cta2__frame {
    position: relative;
}

.tci-cta2__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 220%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.28) 0%,
        rgba(160, 25, 131, 0.14) 45%,
        transparent 72%
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.tci-cta2__card {
    position: relative;
    z-index: 1;
    border-radius: 1.5rem; /* 24 */
    overflow: hidden;
    padding: 4rem 3rem; /* py-64 px-48 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* 32 */
    width: 100%;
    min-height: 19.5rem; /* 312 */
    color: var(--tci-white);
}

.tci-cta2__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    z-index: 0;
}

.tci-cta2__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tci-cta2__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10, 9, 10, 0.4);
    border-radius: 1.5rem;
    pointer-events: none;
}

.tci-cta2__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 24 */
    width: 100%;
}

.tci-cta2__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: center;
}

.tci-cta2__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); /* 56 */
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: 100%;
}

.tci-cta2__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-light-gray);
    margin: 0;
    width: 100%;
}

.tci-cta2__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.tci-cta2__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-cta2__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    padding: 0 1.25rem;
}

.tci-cta2__ctas .tci-pbtn__label,
.tci-cta2__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

@media (max-width: 640px) {
    .tci-cta2__card {
        padding: 2.5rem 1.5rem;
    }

    .tci-cta2__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tci-cta2__ctas .tci-pbtn,
    .tci-cta2__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Double CTA Banner 3 — Figma 6401:1423                                */
/* Centered card w/ bg image + 50% black overlay; purple ellipse glow   */
/* behind; gradient H2, grey lede, primary + secondary CTAs.            */
/* ------------------------------------------------------------------ */
.tci-cta3 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.tci-cta3__stage {
    position: relative;
}

.tci-cta3__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 480px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at center,
        rgba(160, 25, 131, 0.48) 0%,
        rgba(160, 25, 131, 0.24) 30%,
        rgba(160, 25, 131, 0.08) 58%,
        rgba(160, 25, 131, 0) 78%);
    filter: blur(10px);
}

.tci-cta3__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 64px 48px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: #d9d9d9;
}

.tci-cta3__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.tci-cta3__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tci-cta3__bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 9, 10, 0.5);
    pointer-events: none;
}

.tci-cta3__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 760px;
    text-align: center;
}

.tci-cta3__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.tci-cta3__heading {
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.68px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-cta3__lede {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #e6e6e6;
}

.tci-cta3__ctas {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.tci-cta3__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
}

.tci-cta3__ctas .tci-pbtn__label {
    color: var(--tci-white);
}

.tci-cta3__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border-color: var(--tci-primary);
}

.tci-cta3__ctas .tci-sbtn__label {
    color: var(--tci-primary);
}

@media (max-width: 900px) {
    .tci-cta3__card {
        padding: 48px 28px;
    }

    .tci-cta3__heading {
        font-size: clamp(2.25rem, 7vw, 3.5rem);
        letter-spacing: -1.2px;
    }

    .tci-cta3__glow {
        height: 360px;
    }
}

@media (max-width: 520px) {
    .tci-cta3 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .tci-cta3__card {
        padding: 40px 20px;
        border-radius: 16px;
    }

    .tci-cta3__ctas {
        flex-direction: column;
        width: 100%;
    }

    .tci-cta3__ctas .tci-btn,
    .tci-cta3__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Numbers and Media 1 — Figma 6401:1050 (TCI Proof In Action)          */
/* Dark vertical gradient · 2-col header · tall stat 350 + media 930    */
/* above two equal sub stats · #333→#232324 card gradient · 70/1.1 nums */
/* ------------------------------------------------------------------ */
.tci-nm {
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    color: var(--tci-white);
    padding-block: 5rem;
    overflow: hidden;
}

.tci-nm__inner {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* 80 */
}

.tci-nm__head {
    display: flex;
    align-items: flex-start;
    gap: 5rem; /* 80 */
    width: 100%;
}

.tci-nm__title-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; /* 16 */
}

.tci-nm__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-nm__tagline-line {
    width: 30px;
    height: 2px;
    background: var(--tci-white);
    display: block;
}

.tci-nm__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tci-white);
}

.tci-nm__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    max-width: 34.6875rem; /* 555 */
}

.tci-nm__copy-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem; /* 32 */
}

.tci-nm__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-white);
    margin: 0;
    width: 100%;
}

.tci-nm__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tci-nm__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-nm__ctas .tci-sbtn {
    background: var(--tci-white);
    color: var(--tci-primary);
    border: 1px solid var(--tci-primary);
    padding: 0 1.25rem;
}

.tci-nm__ctas .tci-pbtn__label,
.tci-nm__ctas .tci-sbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

/* Stats row — four text cards in 2x2 grid. */
.tci-nm__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem; /* 32 */
    width: 100%;
}

.tci-nm-card {
    position: relative;
    border-radius: 1.5rem; /* 24 */
    padding: 2rem; /* 32 */
    background: linear-gradient(180deg, #333333 0%, #232324 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem; /* 48 */
}

.tci-nm-card--tall {
    width: 100%;
    justify-content: space-between;
}

.tci-nm-card__label {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 1.25rem; /* 20 */
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    width: 100%;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-nm-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.tci-nm-card__number {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    text-align: right;
    margin: 0;
    color: var(--tci-white);
    width: 100%;
}

.tci-nm-card__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(160, 25, 131, 0) 0%,
        rgba(160, 25, 131, 1) 50%,
        rgba(160, 25, 131, 0) 100%
    );
    display: block;
}

.tci-nm-card__text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem; /* 18 */
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: right;
    margin: 0;
    color: var(--tci-white);
    width: 100%;
}


@media (max-width: 960px) {
    .tci-nm__head,
    .tci-nm__stats {
        gap: 2.5rem;
    }

    .tci-nm__stats {
        grid-template-columns: 1fr;
    }

    .tci-nm-card--tall {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tci-nm {
        padding-block: 3rem;
    }

    .tci-nm__inner {
        gap: 2rem;
    }

    .tci-nm__stats {
        gap: 1.5rem;
    }

    .tci-nm-card {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .tci-nm-card__number {
        font-size: 2.5rem;
    }

    .tci-nm__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tci-nm__ctas .tci-pbtn,
    .tci-nm__ctas .tci-sbtn {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Scrolling Accordian 3 — Figma 6401:1087 (Why Us?)                    */
/* Header row (tagline + 2-line H3 · pill segmented control) + body    */
/* row (copy + checklist + CTA · 783 rounded image with ellipse glow)  */
/* ------------------------------------------------------------------ */
.tci-sa {
    background: var(--tci-white);
}

.tci-sa__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48 */
    align-items: stretch;
}

.tci-sa__head {
    display: flex;
    align-items: flex-end;
    gap: 3rem; /* 48 */
    width: 100%;
}

.tci-sa__intro {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.tci-sa__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-sa__tagline-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
    display: block;
}

.tci-sa__tagline-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-sa__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.875rem, 2.75vw + 1rem, 2.75rem); /* 44 */
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(270deg, #201e1f 0%, #505153 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Segmented pill bar — Figma: bg white, 1px #E6E6E6, rounded-16, p-12, justify-between. */
.tci-sa__tabs {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--tci-white);
    border: 1px solid var(--tci-light-gray);
    border-radius: 1rem;
    padding: 0.75rem;
    overflow: hidden;
}

.tci-sa__tab {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tci-sa__tab-label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #322f31;
    opacity: 0.5;
    white-space: nowrap;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tci-sa__tab.is-active {
    background: var(--tci-primary);
    padding: 0.5rem 1rem;
}

.tci-sa__tab.is-active .tci-sa__tab-label {
    color: var(--tci-white);
    opacity: 1;
}

.tci-sa__tab:hover:not(.is-active) .tci-sa__tab-label {
    opacity: 0.8;
}

/* Tab panels — same fade/slide behavior as .tci-tabs__panel. */
.tci-sa__panel[hidden] {
    display: none;
}

.tci-sa__panel {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms ease;
    will-change: opacity, transform;
}

.tci-sa__panel.is-active {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .tci-sa__panel {
        transition: none;
        transform: none;
    }
}

/* Body row — Figma: gap-80 items-center; copy 1fr · image 783 self-stretch. */
.tci-sa__body {
    display: flex;
    gap: 5rem; /* 80 */
    align-items: center;
    width: 100%;
}

.tci-sa__copy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem; /* 48 */
    padding-block: 2rem; /* py-32 */
}

.tci-sa__copy-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* 24 */
    width: 100%;
}

.tci-sa__body-text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
}

.tci-sa__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; /* 16 */
    width: 100%;
}

.tci-sa__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tci-sa__check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.tci-sa__check-text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #2c2c2c;
}

.tci-sa__ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tci-sa__ctas .tci-pbtn {
    background: var(--tci-primary);
    color: var(--tci-white);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.28);
    padding: 0 0.5rem 0 1.25rem;
}

.tci-sa__ctas .tci-pbtn__label {
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-inline: 0;
}

/* Visual — Figma: w-783 h-392 rounded-24 with 616x360 ellipse glow behind. */
.tci-sa__visual {
    flex: 0 0 auto;
    width: 48.9375rem; /* 783 */
    position: relative;
    aspect-ratio: 783 / 392;
}

.tci-sa__visual-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 155%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.3) 0%,
        rgba(160, 25, 131, 0.14) 45%,
        transparent 72%
    );
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.tci-sa__visual-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
}

.tci-sa__visual-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .tci-sa__body {
        gap: 3rem;
    }

    .tci-sa__visual {
        width: 50%;
    }
}

@media (max-width: 960px) {
    .tci-sa__head {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }

    .tci-sa__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
    }

    .tci-sa__tabs::-webkit-scrollbar {
        display: none;
    }

    .tci-sa__body {
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
    }

    .tci-sa__visual {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ------------------------------------------------------------------ */
/* Areas We Serve 2 — Figma 6401:1137                                   */
/* Centered 56/1 H2 + 560w lede · rounded-20 compare card (4px white    */
/* border · #F8F1F7→#FCFCFC tint · 64-gap two lists · vertical divider) */
/* ------------------------------------------------------------------ */
.tci-aws {
    background: var(--tci-white);
    padding-block: 5rem 2.5rem; /* pt-80 pb-40 */
}

.tci-aws__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.125rem; /* 50 */
}

.tci-aws__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    text-align: center;
}

.tci-aws__heading {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); /* 56 */
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(180deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    max-width: 55.25rem; /* 884 */
}

.tci-aws__lede {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--tci-grey);
    margin: 0;
    max-width: 35rem; /* 560 */
}

.tci-aws__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.tci-aws__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(80rem, 94%);
    height: 180%;
    background: radial-gradient(
        ellipse at center,
        rgba(176, 87, 161, 0.3) 0%,
        rgba(160, 25, 131, 0.14) 45%,
        transparent 70%
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.tci-aws__card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 4px solid transparent;
    border-radius: 1.25rem; /* 20 */
    background:
        linear-gradient(360deg, #f8f1f7 0%, #fcfcfc 100%) padding-box,
        linear-gradient(178.56deg, #fcfcfc -22.56%, #cf96c5 98.77%) border-box;
    box-shadow: 0 24px 60px rgba(32, 30, 31, 0.08);
}

.tci-aws__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* 32 */
    flex: 0 1 auto;
    min-width: 0;
}

.tci-aws__col-title {
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem); /* 28 */
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-transform: capitalize;
    text-align: center;
    margin: 0;
    padding-block: 0.25rem; /* py-4 */
    background: linear-gradient(180deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}

.tci-aws__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; /* 16 */
}

.tci-aws__item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8 */
    padding-block: 1px;
}

.tci-aws__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.tci-aws__text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.tci-aws__item--neg .tci-aws__text {
    color: var(--tci-grey);
}

.tci-aws__col--after .tci-aws__text {
    color: #322f31;
}

.tci-aws__divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        rgba(230, 230, 230, 0) 0%,
        #e6e6e6 20%,
        #e6e6e6 80%,
        rgba(230, 230, 230, 0) 100%
    );
    display: block;
}

@media (max-width: 960px) {
    .tci-aws__card {
        padding: 20px;
        gap: 10px;
    }
}

@media (max-width: 967px) {
    .tci-aws__card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px;
    }

    .tci-aws__divider {
        width: 80%;
        height: 1px;
        align-self: center;
        background: linear-gradient(
            90deg,
            rgba(230, 230, 230, 0) 0%,
            #e6e6e6 20%,
            #e6e6e6 80%,
            rgba(230, 230, 230, 0) 100%
        );
    }

    .tci-aws__col-title,
    .tci-aws__text {
        white-space: normal;
    }
}


/* ------------------------------------------------------------------ */
/* Scrolling Accordian 4 — Figma 6401:1214                              */
/* Two-column header (intro + copy/CTA) above full-width image w/ glow. */
/* ------------------------------------------------------------------ */
.tci-sa4 {
    background: var(--tci-white);
    padding-top: 80px;
    padding-bottom: 80px;
}

.tci-sa4__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.tci-sa4__row {
    display: flex;
    gap: 48px;
    align-items: center;
    width: 100%;
}

.tci-sa4__intro {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.tci-sa4__heading {
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.68px;
    text-transform: capitalize;
    background: linear-gradient(270deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-sa4__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.tci-sa4__check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tci-sa4__check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.tci-sa4__check-text {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #2c2c2c;
    white-space: nowrap;
}

.tci-sa4__copy {
    display: flex;
    flex-direction: column;
    gap: 23px;
    align-items: flex-start;
    flex-shrink: 0;
    max-width: 597px;
}

.tci-sa4__body-text {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #322f31;
}

.tci-sa4__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tci-sa4__visual {
    position: relative;
    width: 100%;
    height: 274px;
}

.tci-sa4__visual-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 420px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at center,
        rgba(160, 25, 131, 0.45) 0%,
        rgba(160, 25, 131, 0.22) 30%,
        rgba(160, 25, 131, 0.08) 55%,
        rgba(160, 25, 131, 0) 75%);
    filter: blur(8px);
}

.tci-sa4__visual-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
}

.tci-sa4__visual-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .tci-sa4__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .tci-sa4__copy {
        max-width: 100%;
    }

    .tci-sa4__heading {
        font-size: clamp(2.25rem, 6vw, 3.5rem);
        letter-spacing: -1.2px;
    }
}

@media (max-width: 700px) {
    .tci-sa4 {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .tci-sa4__inner {
        gap: 40px;
    }

    .tci-sa4__checks {
        flex-direction: column;
        gap: 10px;
    }

    .tci-sa4__check-text {
        white-space: normal;
    }

    .tci-sa4__visual {
        height: 200px;
    }

    .tci-sa4__visual-frame {
        border-radius: 16px;
    }
}

/* ------------------------------------------------------------------ */
/* Social Content 1 — Figma 6401:1244                                   */
/* Dark gradient bg + centered heading/lede + social pills + reel.      */
/* ------------------------------------------------------------------ */
.tci-sc {
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tci-sc__inner {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.tci-sc__head {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.tci-sc__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    max-width: 565px;
    width: 100%;
}

.tci-sc__heading {
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.68px;
    text-transform: capitalize;
    background: linear-gradient(0deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-sc__lede {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #e6e6e6;
}

.tci-sc__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tci-sc__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 40px;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.tci-sc__social:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.tci-sc__social img {
    display: block;
}

.tci-sc__social--grad {
    background: linear-gradient(180deg, #4b4c4e 0%, #373839 100%);
}

.tci-sc__social--light {
    background: var(--tci-white);
}

.tci-sc__reel {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.tci-sc__reel::-webkit-scrollbar { display: none; }

.tci-sc__tile-item {
    flex: 0 0 169px;
    width: 169px;
    scroll-snap-align: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tci-sc__tile {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.25s ease;
}

.tci-sc__tile:hover {
    transform: translateY(-4px);
}

.tci-sc__tile:focus-visible {
    outline: 2px solid var(--tci-primary);
    outline-offset: 3px;
}

.tci-sc__tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tci-sc__tile-play {
    position: absolute;
    left: 57px;
    top: 123px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.tci-sc__tile-play img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

@media (max-width: 900px) {
    .tci-sc {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .tci-sc__inner {
        gap: 24px;
    }

    .tci-sc__heading {
        font-size: clamp(2.25rem, 7vw, 3.5rem);
        letter-spacing: -1.2px;
    }

    .tci-sc__reel {
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .tci-sc__tile-item {
        flex-basis: 140px;
        width: 140px;
    }

    .tci-sc__tile {
        height: 248px;
    }

    .tci-sc__tile-play {
        left: 43px;
        top: 97px;
        width: 54px;
        height: 54px;
    }
}

/* Video modal — Learn From This Content (native dialog + responsive 16:9 player). */
.tci-video-modal {
    width: min(100vw - 2rem, 960px);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #0d0d0d;
    color: var(--tci-white);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.tci-video-modal::backdrop {
    background: rgba(8, 7, 8, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.tci-video-modal__shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.tci-video-modal__chrome {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 0.5rem 0;
}

.tci-video-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--tci-white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tci-video-modal__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.tci-video-modal__close:focus-visible {
    outline: 2px solid var(--tci-primary);
    outline-offset: 2px;
}

.tci-video-modal__frame {
    width: 100%;
    min-width: 0;
    padding: 0 0.5rem 0.5rem;
}

.tci-video-modal__iframe,
.tci-video-modal__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: min(70vh, calc(100vh - 6rem));
    border: 0;
    border-radius: 8px;
    background: #000;
}

.tci-video-modal__video {
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .tci-video-modal::backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ------------------------------------------------------------------ */
/* FAQ 6 — Figma 6401:1341                                              */
/* Head (title+lede / CTA) above topic-list (sticky) + accordion cards. */
/* ------------------------------------------------------------------ */
.tci-faq {
    background: var(--tci-white);
    padding-top: 80px;
    padding-bottom: 80px;
}

.tci-faq__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tci-faq__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
}

.tci-faq__head-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    max-width: 768px;
}

.tci-faq__heading {
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.68px;
    text-transform: capitalize;
    white-space: nowrap;
    background: linear-gradient(180deg, #505153 0%, #201e1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-faq__lede {
    margin: 0;
    max-width: 424px;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #4b4c4e;
}

.tci-faq__head-cta {
    flex-shrink: 0;
}

.tci-faq__body {
    width: 100%;
}

.tci-faq__side {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.tci-faq__side-rail {
    position: relative;
    width: 2px;
    min-height: 100%;
    background: var(--tci-light-gray);
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
}

.tci-faq__side-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 30px;
    background: var(--tci-primary);
    border-radius: 2px;
}

.tci-faq__topics {
    list-style: none;
    margin: 0;
    padding: 0 40px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tci-faq__topic {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.36px;
    color: #322f31;
    opacity: 0.5;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.tci-faq__topic-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

.tci-faq__topic:hover {
    opacity: 0.75;
}

.tci-faq__topic.is-active {
    opacity: 1;
    font-family: var(--tci-font-body);
    font-weight: 600;
}

.tci-faq__acc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-inline: auto;
}

.tci-faq__card {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: linear-gradient(0deg, #f8f1f7 0%, #fcfcfc 100%);
    transition: box-shadow 0.2s ease;
}

.tci-faq__card:hover {
    box-shadow: 0 6px 20px rgba(32, 30, 31, 0.06);
}

.tci-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: #322f31;
}

.tci-faq__q-text {
    font-family: var(--tci-font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: #322f31;
}

.tci-faq__q-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tci-faq__q-icon svg { display: block; }

.tci-faq__card.is-open .tci-faq__q-icon-v {
    display: none;
}

.tci-faq__a {
    margin-top: 16px;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #4b4c4e;
}

@media (max-width: 1100px) {
    .tci-faq__body {
        flex-direction: column;
        gap: 32px;
    }

    .tci-faq__side {
        position: relative;
        top: auto;
    }

    .tci-faq__acc {
        max-width: 100%;
    }

    .tci-faq__topics {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .tci-faq__side-rail {
        display: none;
    }

    .tci-faq__topics {
        padding: 0;
    }
}

@media (max-width: 900px) {
    .tci-faq__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .tci-faq__heading {
        font-size: clamp(2.25rem, 7vw, 3.5rem);
        letter-spacing: -1.2px;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .tci-faq {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .tci-faq__card {
        padding: 18px 20px;
    }

    .tci-faq__q-text {
        font-size: 18px;
        letter-spacing: -0.36px;
    }
}

/* ------------------------------------------------------------------ */
/* Contact with Info — Figma 6401:1437                                  */
/* Dark gradient info panel (635×570) + gradient form card (641w).      */
/* ------------------------------------------------------------------ */
.tci-contact {
    background: var(--tci-white);
    padding-top: 48px;
    padding-bottom: 48px;
}

.tci-contact__grid {
    display: block;
}

.tci-contact__shell {
    position: relative;
    max-width: 1280px;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "promo form";
    gap: 24px;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #e6e6e6;
    background: linear-gradient(0deg, #f8f1f7 0%, #fcfcfc 100%);
}

.tci-contact__promo {
    min-width: 0;
    grid-area: promo;
}

.tci-contact__promo .tci-cta3__card {
    height: 100%;
    min-height: 100%;
}

.tci-contact__promo .tci-cta3__bg-overlay {
    background: linear-gradient(0deg, rgb(0 0 0) 0%, rgba(10, 9, 10, 0.62) 40%, rgba(10, 9, 10, 0.45) 50%, rgba(10, 9, 10, 0.2) 100%);
}

.tci-contact__promo .tci-cta3__content {
    height: 100%;
    max-width: none;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
}

.tci-contact__promo .tci-cta3__text {
    align-items: flex-start;
    text-align: left;
}

.tci-contact__promo .tci-cta3__ctas {
    justify-content: flex-start;
}

.tci-contact__info-glow {
    display: block;
}

.tci-contact__info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    height: 570px;
    padding: 48px;
    border-radius: 24px;
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    color: var(--tci-white);
}

.tci-contact__info--inline {
    height: 100%;
}

.tci-contact__info-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.tci-contact__heading {
    margin: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.68px;
    text-transform: capitalize;
    background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tci-contact__lede {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #e6e6e6;
}

.tci-contact__blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.tci-contact__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.tci-contact__block-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #4b4c4e;
    width: 100%;
}

.tci-contact__block-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.tci-contact__block-title {
    flex: 1 0 0;
    min-width: 0;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--tci-white);
}

.tci-contact__block-value {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #e6e6e6;
}

.tci-contact__form {
    grid-area: form;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #ead9e7;
    background: var(--tci-white);
}

.tci-contact__form-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.tci-contact__form-row .tci-contact__field {
    flex: 1 1 0;
    min-width: 0;
}

.tci-contact__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.tci-contact__label {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #000;
}

.tci-contact__input,
.tci-contact__textarea {
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #322f31;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    background: var(--tci-white);
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tci-contact__textarea {
    min-height: 102px;
    padding: 12px;
    resize: vertical;
    font-family: var(--tci-font-body);
}

.tci-contact__input::placeholder,
.tci-contact__textarea::placeholder {
    color: #4b4c4e;
    opacity: 0.6;
}

.tci-contact__field:focus-within .tci-contact__label {
    color: var(--tci-primary);
}

.tci-contact__input:focus,
.tci-contact__textarea:focus {
    outline: none;
    border-color: #cf96c5;
    box-shadow: 0 0 0 3px rgba(207, 150, 197, 0.28);
}

.tci-contact__submit {
    width: 100%;
    justify-content: space-between;
}

/* HubSpot contact form: match Main V3 two-column intro row + pill submit CTA. */
.tci-contact__form .hs-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tci-contact__form .hs-form fieldset.form-columns-2 {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

.tci-contact__form .hs-form fieldset {
    max-width: none;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.tci-contact__form .hs-form .hs-form-field > label {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 8px;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #141316;
}

.tci-contact__form .hs-form .hs-form-required {
    color: #141316;
}

.tci-contact__form .hs-form .hs-form-field {
    width: 100% !important;
    float: none !important;
    margin: 0;
}

.tci-contact__form .hs-form .input,
.tci-contact__form .hs-form .hs-input,
.tci-contact__form .hs-form textarea,
.tci-contact__form .hs-form select {
    width: 100% !important;
    max-width: none;
}

.tci-contact__form .hs-form .hs-input,
.tci-contact__form .hs-form textarea {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    min-height: 50px;
    padding: 12px 18px;
    margin: 0;
    background: #fff;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: #322f31;
}

.tci-contact__form .hs-form textarea {
    min-height: 121px;
    resize: vertical;
}

.tci-contact__form .hs-form .hs-input::placeholder,
.tci-contact__form .hs-form textarea::placeholder {
    color: #8f8f8f;
    opacity: 1;
}

.tci-contact__form .hs-form .hs-input:focus,
.tci-contact__form .hs-form textarea:focus {
    outline: none;
    border-color: #cf96c5;
    box-shadow: 0 0 0 3px rgba(207, 150, 197, 0.24);
}

.tci-contact__form .hs-form .actions {
    margin-top: 4px;
}

.tci-contact__form .hs-form .actions .hs-button.primary.large {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    padding: 12px 64px 12px 28px;
    background: linear-gradient(90deg, #a01983 0%, #b057a1 100%);
    box-shadow: 0 14px 26px rgba(176, 87, 161, 0.35);
    font-family: var(--tci-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

.tci-contact__form .hs-form .actions .hs-button.primary.large::after {
    content: "\2192";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a01983;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
}

.tci-contact__form .hs-form .hs_error_rollup,
.tci-contact__form .hs-form .hs_recaptcha {
    margin: 0;
}

@media (max-width: 1100px) {
    .tci-contact__shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "promo"
            "form";
    }

    .tci-contact__info {
        height: auto;
    }

    .tci-contact__form .hs-form .hs-form-field > label,
    .tci-contact__form .hs-form .hs-input,
    .tci-contact__form .hs-form textarea {
        font-size: 16px;
    }
}

@media (max-width: 700px) {
    .tci-contact {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .tci-contact__info {
        padding: 32px 24px;
        gap: 40px;
    }

    .tci-contact__shell {
        padding: 16px;
    }

    .tci-contact__heading {
        font-size: clamp(2.25rem, 7vw, 3.5rem);
        letter-spacing: -1.2px;
    }

    .tci-contact__form {
        padding: 24px;
        gap: 20px;
    }

    .tci-contact__form .hs-form fieldset.form-columns-2 {
        grid-template-columns: 1fr;
    }

    .tci-contact__form-row {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------ */
/* Lead Magnet — Section 7                                             */
/* ------------------------------------------------------------------ */
.tci-lead {
    padding-block: clamp(3.5rem, 6vw, 6rem);
    background:
        radial-gradient(60% 60% at 18% 92%, rgba(160, 25, 131, 0.32) 0%, rgba(160, 25, 131, 0) 70%),
        radial-gradient(45% 45% at 78% 14%, rgba(176, 87, 161, 0.22) 0%, rgba(176, 87, 161, 0) 70%),
        linear-gradient(125deg, #05060d 0%, #0e1020 55%, #171623 100%);
    color: var(--tci-white);
}

.tci-lead__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: stretch;
}

.tci-lead__content,
.tci-lead__form-shell {
    border-radius: var(--tci-radius-lg);
    border: 1px solid color-mix(in srgb, var(--tci-white) 16%, transparent);
    background: color-mix(in srgb, #0f111f 88%, transparent);
}

.tci-lead__content {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.tci-lead__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tci-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.tci-lead__eyebrow i {
    font-size: 0.95rem;
}

.tci-lead__heading {
    margin: 0;
    max-width: 20ch;
    font-family: var(--tci-font-heading);
    font-size: clamp(1.7rem, 2.4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    background: var(--tci-gradient-on-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tci-lead__lede {
    margin: 1.15rem 0 0;
    max-width: 64ch;
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    line-height: 1.45;
    color: color-mix(in srgb, var(--tci-white) 88%, transparent);
}

.tci-lead__list {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.tci-lead__list-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.tci-lead__list-item::before {
    content: "";
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
    border-radius: 50%;
    border: 1.5px solid var(--tci-primary);
    background:
        linear-gradient(45deg, transparent 45%, var(--tci-primary) 45%, var(--tci-primary) 60%, transparent 60%) 0.23rem 0.24rem / 0.4rem 0.4rem no-repeat,
        linear-gradient(-45deg, transparent 46%, var(--tci-primary) 46%, var(--tci-primary) 59%, transparent 59%) 0.37rem 0.19rem / 0.4rem 0.5rem no-repeat;
}

.tci-lead__form-shell {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background:
        radial-gradient(90% 55% at 20% 10%, rgba(176, 87, 161, 0.2) 0%, rgba(176, 87, 161, 0) 70%),
        color-mix(in srgb, #181926 90%, transparent);
}

.tci-lead__form-kicker {
    margin: 0 0 1rem;
    font-family: var(--tci-font-heading);
    font-weight: 600;
    font-size: clamp(1.35rem, 1.5vw + 1rem, 2.2rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.tci-lead__form {
    display: grid;
    gap: 0.9rem;
}

.tci-lead__form .hs-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tci-lead__form .hs-form fieldset.form-columns-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.tci-lead__form .hs-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
}

.tci-lead__form .hs-form .hs-form-field {
    width: 100% !important;
    float: none !important;
    margin: 0;
}

.tci-lead__form .hs-form .hs-form-field > label {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 8px;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

.tci-lead__form .hs-form .hs-form-required {
    color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

.tci-lead__form .hs-form .input,
.tci-lead__form .hs-form .hs-input,
.tci-lead__form .hs-form textarea,
.tci-lead__form .hs-form select {
    width: 100% !important;
    max-width: none;
}

.tci-lead__form .hs-form .hs-input,
.tci-lead__form .hs-form textarea {
    min-height: 30px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--tci-white) 24%, transparent);
    background: color-mix(in srgb, #171829 82%, transparent);
    margin: 0;
    padding: 10px;
    font-family: var(--tci-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--tci-white);
}

.tci-lead__form .hs-form textarea {
    min-height: 30px;
    resize: vertical;
}

.tci-lead__form .hs-form .hs-input::placeholder,
.tci-lead__form .hs-form textarea::placeholder {
    color: color-mix(in srgb, var(--tci-white) 56%, transparent);
    opacity: 1;
}

.tci-lead__form .hs-form .hs-input:focus,
.tci-lead__form .hs-form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--tci-primary) 75%, var(--tci-white));
    box-shadow: 0 0 0 3px rgba(176, 87, 161, 0.22);
}

.tci-lead__form .hs-form .actions {
    margin-top: 6px;
}

.tci-lead__form .hs-form .actions .hs-button.primary.large {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    padding: 12px 64px 12px 24px;
    background: linear-gradient(90deg, #a01983 0%, #b057a1 100%);
    box-shadow: 0 14px 28px rgba(160, 25, 131, 0.32);
    font-family: var(--tci-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    cursor: pointer;
}

.tci-lead__form .hs-form .actions .hs-button.primary.large::after {
    content: "\2192";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a01983;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
}

.tci-lead__form .hs-form .hs_recaptcha,
.tci-lead__form .hs-form .hs_error_rollup {
    margin: 0;
}

.tci-lead__grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.tci-lead__field {
    display: grid;
    gap: 0.45rem;
}

.tci-lead__label {
    font-size: 1rem;
    line-height: 1.2;
    color: color-mix(in srgb, var(--tci-white) 96%, transparent);
}

.tci-lead__input {
    width: 100%;
    min-height: 3.2rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--tci-white) 18%, transparent);
    padding: 0.85rem 0.95rem;
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--tci-white);
    background: color-mix(in srgb, #161728 82%, transparent);
}

.tci-lead__input::placeholder {
    color: color-mix(in srgb, var(--tci-white) 58%, transparent);
}

.tci-lead__input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tci-primary) 80%, var(--tci-white));
    outline-offset: 1px;
}

.tci-lead__submit {
    margin-top: 0.35rem;
}

.tci-lead__microcopy {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.3rem;
}

.tci-lead__microcopy p {
    margin: 0;
    color: color-mix(in srgb, var(--tci-white) 86%, transparent);
    font-size: 1rem;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.tci-lead__microcopy i {
    color: var(--tci-primary);
    margin-top: 0.15rem;
}

@media (max-width: 1080px) {
    .tci-lead__inner {
        grid-template-columns: 1fr;
    }

    .tci-lead__heading {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .tci-lead__form .hs-form fieldset.form-columns-2 {
        grid-template-columns: 1fr;
    }

    .tci-lead__grid--two {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Simple Footer 1 — Figma 6401:1496                                    */
/* Dark gradient, top-rounded, centered logo + uppercase nav, credits.  */
/* ------------------------------------------------------------------ */
.tci-footer {
    background: linear-gradient(180deg, #322f31 0%, #080708 100%);
    color: var(--tci-white);
    padding: 80px clamp(1.5rem, 4vw, 4rem) 40px;
    border-top-left-radius: 48px;
    border-top-right-radius: 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tci-footer__inner {
    width: 100%;
    max-width: var(--tci-max, 1312px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.tci-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 0.8fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.tci-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: var(--tci-white);
}

.tci-footer__col--office,
.tci-footer__col--connect {
    padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
    border-left: 1px solid color-mix(in srgb, var(--tci-white) 34%, transparent);
}

.tci-footer__title {
    margin: 0;
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tci-white);
}

.tci-footer__title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    margin-top: 0.75rem;
    background: #d320c2;
}

.tci-footer__social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 0.75rem;
}

.tci-footer__social-link {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--tci-white) 74%, transparent);
    color: var(--tci-white);
    font-family: var(--tci-font-body);
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1;
    text-transform: lowercase;
}

.tci-footer__social-link span {
    transform: translateY(-1px);
}

.tci-footer__address {
    margin: 0;
    font-family: var(--tci-font-body);
    font-size: clamp(1rem, 0.45vw + 0.92rem, 1.125rem);
    line-height: 1.45;
    color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

.tci-footer__phone-row {
    margin: 1rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--tci-font-body);
    font-size: clamp(1rem, 0.45vw + 0.92rem, 1.125rem);
    line-height: 1.45;
}

.tci-footer__phone-row a {
    color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

.tci-footer__phone-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #d320c2;
    color: #d320c2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tci-footer__brand {
    width: min(100%, 460px);
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tci-footer__logo {
    width: min(100%, 420px);
    height: auto;
    object-fit: contain;
    display: block;
}


@media (max-width: 900px) {
    .tci-footer {
        padding: 64px 24px 32px;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    .tci-footer__inner {
        gap: 2rem;
    }

    .tci-footer__top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tci-footer__col {
        align-items: center;
        text-align: center;
    }

    .tci-footer__brand {
        min-height: 0;
        width: 100%;
        justify-content: center;
    }

    .tci-footer__title::after {
        margin-inline: auto;
    }

    .tci-footer__social,
    .tci-footer__phone-row {
        justify-content: center;
    }

    .tci-footer__col--office,
    .tci-footer__col--connect {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--tci-white) 28%, transparent);
        padding-left: 0;
        padding-top: 1.25rem;
    }

}

@media (max-width: 560px) {
    .tci-footer {
        padding: 56px 20px 28px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    .tci-footer__brand {
        width: 240px;
        height: auto;
        min-height: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Misc utility                                                         */
/* ------------------------------------------------------------------ */
.tci-prose {
    max-width: 720px;
}

.tci-entry {
    color: var(--tci-grey);
}

@media (max-width: 720px) {
    .tci-btn-row {
        width: 100%;
    }

    .tci-pbtn,
    .tci-sbtn {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}