/* ==========================================
   O NAS — HERO
========================================== */

.about-hero {
    position: relative;

    min-height: calc(100vh - 90px);

    display: flex;
    align-items: center;

    padding: 3rem 2.5rem;

    overflow: hidden;

    background:
        radial-gradient(
            55% 70% at 85% 50%,
            rgba(77, 124, 255, .10),
            transparent 70%
        ),
        radial-gradient(
            45% 60% at 10% 80%,
            rgba(77, 124, 255, .08),
            transparent 70%
        );
}


/* ==========================================
   GRID
========================================== */

.about-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: 3rem;

    align-items: center;
}


/* ==========================================
   CONTENT
========================================== */

.about-hero-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


/* ==========================================
   EYEBROW
========================================== */

.about-hero-eyebrow {
    display: flex;

    align-items: center;

    gap: .8rem;

    margin-bottom: 2rem;

    color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.about-hero-accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--color-accent);

    box-shadow:
        0 0 10px rgba(242, 140, 40, .35);
}


/* ==========================================
   TITLE
========================================== */

.about-hero-title {
    max-width: 850px;

    margin: 0;

    color: var(--color-white);

    font-size: clamp(3.5rem, 5.5vw, 6rem);

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.055em;
}

.about-hero-title span {
    color: var(--color-primary);
}


/* ==========================================
   DESCRIPTION
========================================== */

.about-hero-description {
    max-width: 820px;

    margin: 2rem 0 2.5rem;

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.25vw, 1.2rem);

    line-height: 1.65;
}


/* ==========================================
   BUTTONS
========================================== */

.about-hero-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .9rem;
}


/*
 * Arrow inside primary button
 */

.about-hero-buttons .btn span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-left: .55rem;

    font-size: 1.15em;

    line-height: 1;
}


/* ==========================================
   VISUAL
========================================== */

.about-hero-visual {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    min-height: 500px;
}


/* ==========================================
   ABOUT HERO — IMAGE
========================================== */

.about-hero-image {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    height: 100%;
    min-height: 560px;

    isolation: isolate;

    /* miękkie zakończenie zdjęcia */
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 82%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 82%,
        transparent 100%
    );
}


/* ==========================================
   SOFT GLOW BEHIND IMAGE
========================================== */

.about-hero-image::before {
    content: "";

    position: absolute;

    width: 78%;
    height: 82%;

    left: 11%;
    top: 9%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(77, 124, 255, .24) 0%,
            rgba(77, 124, 255, .14) 35%,
            rgba(77, 124, 255, .05) 58%,
            transparent 76%
        );

    filter: blur(28px);

    z-index: -1;
}


/* dodatkowa miękka aura bliżej postaci */

.about-hero-image::after {
    content: "";

    position: absolute;

    width: 62%;
    height: 70%;

    left: 19%;
    top: 16%;

    border-radius: 50%;

    background: rgba(77, 124, 255, .10);

    filter: blur(45px);

    z-index: -1;
}


/* ==========================================
   IMAGE
========================================== */

.about-hero-image img {
    position: relative;

    display: block;

    width: 110%;
    max-width: 680px;
    height: auto;

    object-fit: contain;

    z-index: 2;

    filter:
        drop-shadow(0 24px 45px rgba(0, 0, 0, .22))
        drop-shadow(0 0 35px rgba(77, 124, 255, .08));
}

/* ==========================================
   TEAM — HISTORY
========================================== */

.team-history {
    position: relative;

    padding: 3rem 2.5rem;

    overflow: hidden;
}


/* ==========================================
   INTRO
========================================== */

.team-history-intro {
    position: relative;

    max-width: 900px;

    margin-bottom: 6rem;
}


/* EYEBROW */

.team-history .section-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;

    margin-bottom: 1.75rem;

   color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.team-history .section-eyebrow-line {
    display: block;

    width: 36px;
    height: 2px;

    flex: 0 0 36px;

    background: var(--color-accent);
}


/* TITLE */

.team-history-title {
    max-width: 950px;

    margin: 0;

    font-size: clamp(3.5rem, 5.5vw, 6rem);
    line-height: .95;
    letter-spacing: -.045em;

    color: var(--color-white);
}

.team-history-title span {
    color: var(--color-primary);
    white-space: nowrap;
}


/* ==========================================
   TIMELINE
========================================== */

.team-timeline {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    width: 100%;
    max-width: 1500px;

    min-height: 760px;

    margin: 6rem auto 0;

    padding: 0 1rem;

    box-sizing: border-box;
}


/* ==========================================
   CENTRAL HORIZONTAL LINE
========================================== */

.team-timeline::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 1rem;
    right: 1rem;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(77,124,255,.18) 4%,
        rgba(77,124,255,.55) 50%,
        rgba(77,124,255,.18) 96%,
        transparent 100%
    );

    transform: translateY(-50%);

    z-index: 0;
}


/* ==========================================
   TIMELINE ITEMS
========================================== */

.team-timeline-item {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;

    z-index: 1;
}


/* ==========================================
   CONTENT CARDS
========================================== */

/* ==========================================
   CONTENT CARDS
========================================== */

.team-timeline-content {
    position: absolute;

    left: 50%;

    width: 310px;
    max-width: 310px;

    margin: 0;
    padding: 1.6rem 1.7rem;

    box-sizing: border-box;

    transform: translateX(-50%);

    border: 1px solid rgba(77,124,255,.22);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77,124,255,.10),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.78),
            rgba(5,15,32,.94)
        );

    box-shadow:
        0 18px 50px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ==========================================
   TOP ITEMS
========================================== */

.team-timeline-item--top .team-timeline-content {
    bottom: calc(50% + 2.5rem);
}


/* ==========================================
   BOTTOM ITEMS
========================================== */

.team-timeline-item--bottom .team-timeline-content {
    top: calc(50% + 2.5rem);
}


/* ==========================================
   NUMBER
========================================== */

.team-timeline-number {
    display: block;

    width: auto;
    height: auto;

    margin: 0 0 1rem;

    padding: 0;

    border: 0;
    background: transparent;

    color: var(--color-primary);

    font-size: .85rem;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .04em;
}


/* ==========================================
   HEADINGS
========================================== */

.team-timeline-content h3 {
    margin: 0 0 .85rem;

    color: var(--color-white);

    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600;

    letter-spacing: -.02em;
}


/* ==========================================
   TEXT
========================================== */

.team-timeline-content p {
    margin: 0 0 .85rem;

    color: var(--color-text-muted);

    font-size: .8rem;
    line-height: 1.6;
}

.team-timeline-content p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   TIMELINE POINT
========================================== */

.team-timeline-point {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 12px;

    border: 2px solid var(--color-primary);
    border-radius: 50%;

    background: #071126;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 0 5px rgba(77,124,255,.08),
        0 0 18px rgba(77,124,255,.2);

    z-index: 3;
}


/* ==========================================
   CONNECTORS
========================================== */

.team-timeline-item--top .team-timeline-point::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 100%;

    width: 1px;
    height: 2.5rem;

    background: linear-gradient(
        to top,
        rgba(77,124,255,.5),
        transparent
    );

    transform: translateX(-50%);
}


.team-timeline-item--bottom .team-timeline-point::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 100%;

    width: 1px;
    height: 2.5rem;

    background: linear-gradient(
        to bottom,
        rgba(77,124,255,.5),
        transparent
    );

    transform: translateX(-50%);
}


/* ==========================================
   ORANGE — 01 / 03 / 05
========================================== */

.team-timeline-item:nth-child(1) .team-timeline-content,
.team-timeline-item:nth-child(3) .team-timeline-content,
.team-timeline-item:nth-child(5) .team-timeline-content {
    border-color: rgba(255,122,0,.25);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,122,0,.07),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(35,30,28,.78),
            rgba(5,15,32,.94)
        );
}


/* ==========================================
   ORANGE NUMBERS
========================================== */

.team-timeline-item:nth-child(1) .team-timeline-number,
.team-timeline-item:nth-child(3) .team-timeline-number,
.team-timeline-item:nth-child(5) .team-timeline-number {
    color: #ff7a00;
}


/* ==========================================
   ORANGE POINTS
========================================== */

.team-timeline-item:nth-child(1) .team-timeline-point,
.team-timeline-item:nth-child(3) .team-timeline-point,
.team-timeline-item:nth-child(5) .team-timeline-point {
    border-color: #ff7a00;

    box-shadow:
        0 0 0 5px rgba(255,122,0,.08),
        0 0 18px rgba(255,122,0,.25);
}


/* ==========================================
   ORANGE CONNECTORS
========================================== */

.team-timeline-item:nth-child(1) .team-timeline-point::before,
.team-timeline-item:nth-child(3) .team-timeline-point::before,
.team-timeline-item:nth-child(5) .team-timeline-point::before {
    background: linear-gradient(
        to top,
        rgba(255,122,0,.5),
        transparent
    );
}


/* Bottom orange connectors */

.team-timeline-item:nth-child(1).team-timeline-item--bottom .team-timeline-point::before,
.team-timeline-item:nth-child(3).team-timeline-item--bottom .team-timeline-point::before,
.team-timeline-item:nth-child(5).team-timeline-item--bottom .team-timeline-point::before {
    background: linear-gradient(
        to bottom,
        rgba(255,122,0,.5),
        transparent
    );
}


/* ==========================================
   BLUE — 02 / 04
========================================== */

.team-timeline-item:nth-child(2) .team-timeline-content,
.team-timeline-item:nth-child(4) .team-timeline-content {
    border-color: rgba(77,124,255,.22);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77,124,255,.10),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.78),
            rgba(5,15,32,.94)
        );
}


/* ==========================================
   BLUE NUMBERS
========================================== */

.team-timeline-item:nth-child(2) .team-timeline-number,
.team-timeline-item:nth-child(4) .team-timeline-number {
    color: var(--color-primary);
}


/* ==========================================
   BLUE POINTS
========================================== */

.team-timeline-item:nth-child(2) .team-timeline-point,
.team-timeline-item:nth-child(4) .team-timeline-point {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 5px rgba(77,124,255,.08),
        0 0 18px rgba(77,124,255,.2);
}


/* ==========================================
   BLUE CONNECTORS
========================================== */

.team-timeline-item:nth-child(2) .team-timeline-point::before,
.team-timeline-item:nth-child(4) .team-timeline-point::before {
    background: linear-gradient(
        to bottom,
        rgba(77,124,255,.5),
        transparent
    );
}


.team-timeline-item:nth-child(2).team-timeline-item--top .team-timeline-point::before,
.team-timeline-item:nth-child(4).team-timeline-item--top .team-timeline-point::before {
    background: linear-gradient(
        to top,
        rgba(77,124,255,.5),
        transparent
    );
}


/* ==========================================
   DESKTOP — CARD WIDTH
========================================== */

@media (min-width: 1200px) {

    .team-timeline-content {
        max-width: 420px;
    }
}

/* ==========================================
   TEAM — STATS
========================================== */

.team-stats {
    padding: 3rem 2.5rem;
}


/* ==========================================
   STATS BOX
========================================== */

.team-stats-box {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    width: 100%;

    padding: 3.5rem 2rem;

    border: 1px solid rgba(77,124,255,.22);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(77,124,255,.14),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(10,27,58,.9),
            rgba(5,15,32,.96)
        );

    box-sizing: border-box;

    overflow: hidden;
}


/* ==========================================
   STAT
========================================== */

.team-stat {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    padding: 0 2rem;

    text-align: center;
}


/* ==========================================
   VERTICAL SEPARATORS
========================================== */

.team-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(77,124,255,.18) 20%,
        rgba(77,124,255,.18) 80%,
        transparent
    );
}


/* ==========================================
   VALUE
========================================== */

.team-stat-value {
    color: #8dbaff;

    font-size: clamp(3rem, 4.5vw, 5.2rem);
    line-height: .95;
    font-weight: 700;

    letter-spacing: -.055em;

    white-space: nowrap;

    background: linear-gradient(
        180deg,
        #b9d6ff 0%,
        #5f96ff 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   ORANGE DOT
========================================== */

.team-stat-dot {
    display: block;

    width: 9px;
    height: 9px;

    margin: 1.35rem 0 1rem;

    border-radius: 50%;

    background: #ff7a00;

    box-shadow:
        0 0 0 4px rgba(255,122,0,.08),
        0 0 14px rgba(255,122,0,.35);
}


/* ==========================================
   LABEL
========================================== */

.team-stat-label {
    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;

    text-align: center;
}

/* ==========================================
   TEAM — SECTION
========================================== */

.team-section {
    position: relative;

    width: 100%;

    padding: 3rem 2.5rem;

    overflow: hidden;
}


/* ==========================================
   BACKGROUND GLOW
========================================== */

.team-section::before {
    content: "";

    position: absolute;

    top: 20%;
    left: 50%;

    width: 700px;
    height: 500px;

    background: radial-gradient(
        circle,
        rgba(77,124,255,.14),
        transparent 70%
    );

    transform: translateX(-50%);

    pointer-events: none;
}


/* ==========================================
   INTRO
========================================== */

.team-section-intro {
    position: relative;

    max-width: 900px;

    margin: 0 auto 3rem;

    text-align: center;

    z-index: 1;
}


/* ==========================================
   EYEBROW
========================================== */

.team-section-intro .section-eyebrow {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: .7rem;

    margin-bottom: 1.5rem;

    color: #55a2f6;

    font-size: 13.6px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.team-section-intro .section-eyebrow-line {
    display: block;

    width: 36px;
    height: 2px;

    flex: 0 0 36px;

    background: #ff7a00;
}


/* ==========================================
   TITLE
========================================== */

.team-section-title {
    margin: 0;

    color: var(--color-white);

    font-size: clamp(3.5rem, 5.5vw, 6rem);

    line-height: .95;

    font-weight: 700;

    letter-spacing: -.055em;
}


/*
 * Słowo wyróżnione — ZAWSZE NIEBIESKIE
 */

.team-section-title span {
    color: var(--color-primary);
}


/* ==========================================
   FEATURED CARD
========================================== */

.team-featured-card {
    position: relative;

    display: grid;

    grid-template-columns: 240px 1fr auto;

    align-items: center;

    gap: 2.5rem;

    width: 100%;
    max-width: 1100px;

    min-height: 250px;

    margin: 0 auto 1.5rem;

    padding: 1.1rem;

    overflow: hidden;

    border: 1px solid rgba(77,124,255,.25);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 45% 50%,
            rgba(77,124,255,.12),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(13,31,63,.88),
            rgba(5,15,32,.96)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    z-index: 1;
}


/* ==========================================
   ORANGE CARD — STRONG ACCENT
========================================== */

.team-featured-card--orange {
    border-color: rgba(255,122,0,.42);

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(255,122,0,.14),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(48,31,20,.92),
            rgba(5,15,32,.97)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.2),
        0 0 45px rgba(255,122,0,.08),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ==========================================
   FEATURED IMAGE
========================================== */

.team-featured-image {
    position: relative;

    width: 100%;
    height: 225px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(30,65,120,.8),
            rgba(8,20,42,.95)
        );
}


.team-featured-card--orange .team-featured-image {
    background:
        linear-gradient(
            145deg,
            rgba(100,55,10,.8),
            rgba(30,20,10,.95)
        );
}


.team-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform .4s ease;
}


.team-featured-card:hover .team-featured-image img {
    transform: scale(1.025);
}


/* ==========================================
   FEATURED CONTENT
========================================== */

.team-featured-content {
    max-width: 620px;
}


.team-featured-content h3 {
    margin: 0 0 .35rem;

    color: var(--color-white);

    font-size: 1.65rem;
    line-height: 1.1;

    font-weight: 600;

    letter-spacing: -.035em;
}


/* ==========================================
   POSITION
========================================== */

.team-member-position {
    margin-bottom: .85rem;

    color: var(--color-primary);

    font-size: .68rem;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.team-featured-card--orange .team-member-position {
    color: #ff7a00;
}


/* ==========================================
   DESCRIPTION
========================================== */

.team-featured-content p {
    max-width: 600px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.65;
}


/* ==========================================
   BADGE
========================================== */

.team-card-badge {
    display: inline-flex;

    margin-bottom: .75rem;

    color: var(--color-primary);

    font-size: .68rem;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .1em;
}


.team-card-badge {
    color: var(--color-primary);
}


/* W karcie wyróżnionej */

.team-featured-card .team-card-badge {
    color: #ff7a00 !important;
    font-size: 1.5rem;
}


/* ==========================================
   FEATURED ARROW
========================================== */

.team-featured-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-right: 1rem;

    border: 1px solid rgba(77,124,255,.25);

    border-radius: 50%;

    color: var(--color-primary);

    font-size: 1.1rem;

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.team-featured-card:hover .team-featured-arrow {
    transform: translateX(4px);

    border-color: rgba(77,124,255,.6);
}


.team-featured-card--orange .team-featured-arrow {
    border-color: rgba(255,122,0,.25);

    color: #ff7a00;
}


/* ==========================================
   TEAM GRID
========================================== */

.team-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1rem;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    position: relative;

    z-index: 1;
}


/* ==========================================
   TEAM CARD
========================================== */

.team-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(77,124,255,.2);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(13,31,63,.8),
            rgba(5,15,32,.94)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.02);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.team-card:hover {
    transform: translateY(-4px);

    border-color: rgba(77,124,255,.4);
}


/* ==========================================
   ORANGE CARD
========================================== */

.team-card--orange {
    border-color: rgba(255,122,0,.22);

    background:
        linear-gradient(
            145deg,
            rgba(35,30,28,.82),
            rgba(5,15,32,.94)
        );
}


.team-card--orange:hover {
    border-color: rgba(255,122,0,.45);
}


/* ==========================================
   CARD IMAGE
========================================== */

.team-card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(30,65,120,.8),
            rgba(8,20,42,.95)
        );
}


.team-card--orange .team-card-image {
    background:
        linear-gradient(
            145deg,
            rgba(100,55,10,.8),
            rgba(30,20,10,.95)
        );
}


.team-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform .4s ease;
}


.team-card:hover .team-card-image img {
    transform: scale(1.025);
}


/* ==========================================
   CARD CONTENT
========================================== */

.team-card-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 1rem 1rem 1.1rem;
}


.team-card-content h3 {
    margin: 0 0 .3rem;

    color: var(--color-white);

    font-size: .95rem;
    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.02em;
}


/* ==========================================
   CARD POSITION
========================================== */

.team-card .team-member-position {
    margin-bottom: .65rem;

    font-size: .56rem;
}


/* ==========================================
   CARD DESCRIPTION
========================================== */

.team-card-content p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .68rem;
    line-height: 1.55;
}


/* ==========================================
   CARD BADGE
========================================== */

.team-card .team-card-badge {
    position: absolute;

    top: .7rem;
    right: .7rem;

    margin: 0;

    padding: .4rem .55rem;

    border: 1px solid rgba(255,122,0,.35);

    border-radius: 5px;

    background: rgba(5,15,32,.8);

    backdrop-filter: blur(8px);

    font-size: .48rem;
}

/* ==========================================
   BLUE CARD — STRONG ACCENT
========================================== */

.team-featured-card--blue {
    border-color: rgba(77,124,255,.42);

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(77,124,255,.16),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.92),
            rgba(5,15,32,.97)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.2),
        0 0 45px rgba(77,124,255,.08),
        inset 0 1px 0 rgba(255,255,255,.025);
}

/* ==========================================
   TEAM — FINAL ACCENT OVERRIDES
========================================== */


/* ==========================================
   FEATURED — BLUE
========================================== */

.team-featured-card--blue {
    border-color: rgba(77,124,255,.45);

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(77,124,255,.18),
            transparent 68%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.94),
            rgba(5,15,32,.98)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.22),
        0 0 55px rgba(77,124,255,.10),
        inset 0 1px 0 rgba(255,255,255,.03);
}


/* ==========================================
   FEATURED — ORANGE
========================================== */

.team-featured-card--orange {
    border-color: rgba(255,122,0,.55);

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(255,122,0,.18),
            transparent 68%
        ),
        linear-gradient(
            145deg,
            rgba(48,31,20,.94),
            rgba(5,15,32,.98)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.22),
        0 0 55px rgba(255,122,0,.12),
        inset 0 1px 0 rgba(255,255,255,.03);
}


/* ==========================================
   FEATURED — POSITION
========================================== */

.team-featured-card--blue .team-member-position {
    color: var(--color-primary);
}

.team-featured-card--orange .team-member-position {
    color: #ff7a00;
}


/* ==========================================
   FEATURED — IMAGE ACCENT
========================================== */

.team-featured-card--blue .team-featured-image {
    box-shadow:
        inset 0 0 0 1px rgba(77,124,255,.18);
}

.team-featured-card--orange .team-featured-image {
    box-shadow:
        inset 0 0 0 1px rgba(255,122,0,.25);
}


/* ==========================================
   FEATURED — ARROW
========================================== */

.team-featured-card--blue .team-featured-arrow {
    border-color: rgba(77,124,255,.35);
    color: var(--color-primary);
}

.team-featured-card--orange .team-featured-arrow {
    border-color: rgba(255,122,0,.45);
    color: #ff7a00;
}


/* ==========================================
   STANDARD — BLUE
========================================== */

.team-card--blue {
    border-color: rgba(77,124,255,.30);

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(77,124,255,.08),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(13,31,63,.88),
            rgba(5,15,32,.97)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.16),
        0 0 35px rgba(77,124,255,.06),
        inset 0 1px 0 rgba(255,255,255,.02);
}


/* ==========================================
   STANDARD — ORANGE
========================================== */

.team-card--orange {
    border-color: rgba(255,122,0,.38);

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,122,0,.09),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(35,30,28,.90),
            rgba(5,15,32,.97)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.16),
        0 0 35px rgba(255,122,0,.07),
        inset 0 1px 0 rgba(255,255,255,.02);
}


/* ==========================================
   STANDARD — POSITION
========================================== */

.team-card--blue .team-member-position {
    color: var(--color-primary);
}

.team-card--orange .team-member-position {
    color: #ff7a00;
}


/* ==========================================
   STANDARD — HOVER
========================================== */

.team-card--blue:hover {
    border-color: rgba(77,124,255,.60);

    box-shadow:
        0 20px 45px rgba(0,0,0,.20),
        0 0 40px rgba(77,124,255,.10);
}

.team-card--orange:hover {
    border-color: rgba(255,122,0,.65);

    box-shadow:
        0 20px 45px rgba(0,0,0,.20),
        0 0 40px rgba(255,122,0,.12);
}


/* ==========================================
   BADGE — ALWAYS BLUE
========================================== */

.team-card-badge,
.team-featured-card .team-card-badge {
    color: var(--color-primary);
}


/* ==========================================
   TITLE ACCENT — ALWAYS BLUE
========================================== */

.team-section-title span {
    color: var(--color-primary);
}

/* ==========================================
   TEAM QUOTE
========================================== */

.team-quote-section {
    padding: 3rem 2.5rem;
}


/* ==========================================
   CARD
========================================== */

.team-quote-card {
    position: relative;

    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;

    gap: 3rem;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;
    padding: 2.25rem 2.75rem;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(255,122,0,.42);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 72% 100%,
            rgba(77,124,255,.10),
            transparent 42%
        ),
        radial-gradient(
            circle at 18% 50%,
            rgba(255,122,0,.025),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #151515 0%,
            #111317 48%,
            #0b111d 100%
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        0 0 45px rgba(77,124,255,.06),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ==========================================
   TOP ORANGE ACCENT
========================================== */

.team-quote-card::before {
    content: "";

    position: absolute;

    top: -1px;
    right: 10%;

    width: 190px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        #ff7a00 35%,
        #ff7a00 100%
    );

    box-shadow:
        0 0 12px rgba(255,122,0,.25);
}


/* ==========================================
   IMAGE
========================================== */

.team-quote-image {
    position: relative;

    width: 220px;
    height: 220px;

    flex-shrink: 0;
}


.team-quote-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 16px;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28);
}


/* ==========================================
   PAW BADGE
========================================== */

.team-quote-paw {
    position: absolute;

    right: -13px;
    bottom: -13px;

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

    width: 48px;
    height: 48px;

    box-sizing: border-box;

    border: 1px solid rgba(255,122,0,.65);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,122,0,.10),
            transparent 70%
        ),
        #071126;

    color: #ff7a00;

    font-size: 1.05rem;

    box-shadow:
        0 0 0 5px rgba(7,17,38,.85),
        0 8px 22px rgba(0,0,0,.3),
        0 0 18px rgba(255,122,0,.12);
}


/* ==========================================
   CONTENT
========================================== */

.team-quote-content {
    min-width: 0;
}


/* ==========================================
   EYEBROW
========================================== */

.team-quote-eyebrow {
    display: flex;
    align-items: center;

    gap: .55rem;

    margin-bottom: 3rem;

    color: #ff7a00;

    font-size: 1rem;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.team-quote-eyebrow-icon {
    color: #ff7a00;

    font-size: .82rem;
}


/* ==========================================
   QUOTE BODY
========================================== */

.team-quote-body {
    display: flex;
    align-items: flex-start;

    gap: .85rem;
}


/* ==========================================
   QUOTE MARK
========================================== */

.team-quote-mark {
    flex-shrink: 0;

    margin-top: -.35rem;

    color: #ff7a00;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 4rem;
    line-height: .8;
    font-weight: 700;

    opacity: .9;
}


/* ==========================================
   QUOTE TEXT
========================================== */

.team-quote-body p {
    max-width: 780px;

    margin: 0;

    color: #f5f7fb;

    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 500;

    letter-spacing: -.015em;
}


/* ==========================================
   BLUE PAW / ACCENT IN TEXT
========================================== */

.team-quote-body p::after {
    content: "";
}



/* ==========================================
   VALUES / W CO WIERZYMY
========================================== */

.values-section {
    position: relative;

    width: 100%;

    padding: 3rem 2.5rem;

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.values-section .container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* ==========================================
   INTRO
========================================== */

.values-section-intro {
    margin-bottom: 2.5rem;
}


.values-section .section-eyebrow {
    display: flex;

    align-items: center;

    gap: .7rem;

    margin-bottom: 1.2rem;

   color: #55a2f6;

    font-size: 13.6px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.values-section .section-eyebrow-line {
    display: block;

    width: 32px;
    height: 2px;

    background: #ff7a00;
}


.values-section-title {
    margin: 0;

    color: var(--color-white);

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;

    font-weight: 700;

    letter-spacing: -.045em;
}


.values-section-title span {
    color: var(--color-primary);
}


/* ==========================================
   GRID
========================================== */

.values-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    grid-template-rows: repeat(2, 230px);

    gap: 1.25rem;

    width: 100%;
}


/* ==========================================
   CARD — BASE
========================================== */

.value-card {
    position: relative;

    width: 100%;
    height: 230px;
    min-height: 230px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    border: 1px solid rgba(77,124,255,.18);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77,124,255,.08),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.72),
            rgba(5,15,32,.94)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);

    overflow: hidden;

    transform: none !important;
}


/* ==========================================
   ORANGE CARDS
========================================== */

.value-card--orange {
    border-color: rgba(255,122,0,.28);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,122,0,.07),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(35,30,28,.76),
            rgba(5,15,32,.94)
        );
}


/* ==========================================
   BLUE CARDS
========================================== */

.value-card--blue {
    border-color: rgba(77,124,255,.18);
}


/* ==========================================
   ICON WRAPPER
========================================== */

.value-card-icon-wrap {
    position: relative;

    flex: 0 0 60px;

    width: 60px;
    height: 60px;

    margin: 0 0 1.35rem;

    box-sizing: border-box;
}


/* ==========================================
   ICON
========================================== */

.value-card-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    box-sizing: border-box;

    border: none;
}


.value-card-icon img,
.value-card-icon svg {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* ==========================================
   ORANGE ICON
========================================== */

.value-card--orange .value-card-icon {
    border-color: rgba(255,122,0,.45);
}


/* ==========================================
   CHECK BADGE
========================================== */

.value-card-icon-wrap::after {
    content: "✓";

    position: absolute;

    right: -5px;
    bottom: -5px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    box-sizing: border-box;

    border: 1px solid #071126;
    border-radius: 50%;

    background: #071126;

    color: var(--color-primary);

    font-size: .65rem;
    font-weight: 700;

    z-index: 3;
}


.value-card--orange .value-card-icon-wrap::after {
    color: #ff7a00;
}


/* ==========================================
   CONTENT
========================================== */

.value-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    width: 100%;
    min-width: 0;
}


/* ==========================================
   TITLE
========================================== */

.value-card h3 {
    margin: 0 0 .65rem;

    color: var(--color-white);

    font-size: 1rem;
    line-height: 1.45;

    font-weight: 600;

    letter-spacing: -.02em;
}


/* ==========================================
   DESCRIPTION
========================================== */

.value-card p {
    margin: 0;

    max-width: 100%;

    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.55;
}


/* ==========================================
   REMOVE OLD STAGGERING
========================================== */

/*
 * Usuwamy wcześniejsze przesuwanie kart.
 * Wszystkie mają tworzyć równą siatkę.
 */

.values-grid .value-card:nth-child(1),
.values-grid .value-card:nth-child(2),
.values-grid .value-card:nth-child(3),
.values-grid .value-card:nth-child(4),
.values-grid .value-card:nth-child(5),
.values-grid .value-card:nth-child(6) {
    transform: none !important;
}

.value-card-check {
	display: none;
    }

/* ==========================================
   OUR VOICE
========================================== */

.voice-section {
    position: relative;

    width: 100%;

    padding: 3rem 2.5rem;

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.voice-section .container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* ==========================================
   INTRO
========================================== */

.voice-section-intro {
    margin-bottom: 2rem;
}


.voice-section .section-eyebrow {
    display: flex;

    align-items: center;

    gap: .7rem;

    margin-bottom: 1.2rem;

   color: #55a2f6;

    font-size: 13.6px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.voice-section .section-eyebrow-line {
    display: block;

    width: 32px;
    height: 2px;

    background: #ff7a00;
}


.voice-section-title {
    margin: 0;

    color: var(--color-white);

    font-size: clamp(2.5rem, 4.2vw, 4rem);
    line-height: 1;

    font-weight: 700;

    letter-spacing: -.045em;
}


.voice-section-title span {
    color: var(--color-primary);
}


/* ==========================================
   WAVEFORM
========================================== */

.voice-waveform {
    display: flex;

    align-items: center;

    gap: 5px;

    width: 63%;
    max-width: 756px;

    height: 58px;

    margin: 1.5rem 0 2.5rem;
}


.voice-waveform span {
    display: block;

    width: 12px;

    height: 20px;

    border-radius: 7px;

    background: rgba(77,124,255,.25);

    transform: translateY(0);
}


.voice-waveform span:nth-child(2n) {
    height: 34px;
}


.voice-waveform span:nth-child(3n) {
    height: 48px;
}


.voice-waveform span:nth-child(5n) {
    height: 28px;
}


.voice-waveform .voice-waveform--orange {
    background: rgba(255,122,0,.75);
}


/* delikatne wygaszenie końcówki */

.voice-waveform span:nth-child(n+19) {
    opacity: .45;
}

.voice-waveform span:nth-child(n+23) {
    opacity: .2;
}


/* ==========================================
   CARDS
========================================== */

.voice-cards {
    display: flex;
    flex-direction: column;
	margin-left: 5rem;
    gap: 1rem;

    width: 100%;
}


/* ==========================================
   CARD BASE
========================================== */

.voice-card {
    position: relative;

    width: 610px;
    max-width: 100%;

    min-height: 120px;

    padding: 1.6rem 1.7rem;

    box-sizing: border-box;

    border: 1px solid rgba(77,124,255,.22);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77,124,255,.08),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.76),
            rgba(5,15,32,.94)
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ==========================================
   CARD TEXT
========================================== */

.voice-card p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.65;
}


/* ==========================================
   CARD 01
========================================== */

.voice-card--01 {
    margin-left: 0;

    border-color: rgba(77,124,255,.25);
}


/* ==========================================
   CARD 02
========================================== */

.voice-card--02 {
    margin-left: 15rem;

    border-color: rgba(77,124,255,.2);
}


/* ==========================================
   CARD 03
========================================== */

.voice-card--03 {
    margin-left: 30rem;

    border-color: rgba(255,122,0,.32);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,122,0,.06),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            rgba(35,30,28,.76),
            rgba(5,15,32,.94)
        );
}

/* ==========================================
   APPROACH SECTION
========================================== */

.approach-section {
    position: relative;

    padding: 3rem 2.5rem;

    overflow: hidden;
}


/* ==========================================
   BACKGROUND GLOW
========================================== */

.approach-section::before {
    content: "";

    position: absolute;

    top: 35%;
    left: 50%;

    width: 700px;
    height: 500px;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(77,124,255,.16),
            transparent 68%
        );

    pointer-events: none;
}


/* ==========================================
   INTRO
========================================== */

.approach-section-intro {
    position: relative;

    max-width: 900px;

    margin: 0 auto 3.5rem;

    text-align: center;

    z-index: 1;
}


/* ==========================================
   APPROACH — EYEBROW
========================================== */

.approach-section-intro .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    margin-bottom: 1.25rem;

   color: #55a2f6;

    font-size: 13.6px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.approach-section-intro .section-eyebrow-line {
    display: block;

    width: 30px;
    height: 2px;

    flex: 0 0 30px;

    background: #ff7a00;
}


/* TITLE */

.approach-section-title {
    margin: 1.2rem 0 1rem;

    color: var(--color-white);

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}

.approach-section-title span {
    color: var(--color-primary);
}


/* DESCRIPTION */

.approach-section-description {
    max-width: 650px;

    margin: 0 auto;

    color: var(--color-text-muted);

    font-size: 1rem;

    line-height: 1.65;
}


/* ==========================================
   GRID
========================================== */

.approach-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.5rem;

    max-width: 1200px;

    margin: 0 auto;

    z-index: 1;
}


/* ==========================================
   CARD
========================================== */

.approach-card {
    position: relative;

    min-height: 330px;

    padding: 2.2rem 2rem;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(77,124,255,.20);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(77,124,255,.10),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(16,35,72,.78),
            rgba(5,15,32,.94)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.025);

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


/* subtle hover */

.approach-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* ==========================================
   ORANGE CARD
========================================== */

.approach-card--orange {
    border-color: rgba(255,122,0,.28);

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(255,122,0,.08),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(35,30,28,.78),
            rgba(5,15,32,.94)
        );
}


/* ==========================================
   NUMBER
========================================== */

.approach-card-number {
    position: absolute;

    top: 1.3rem;
    left: 2rem;

    color: transparent;

    font-size: 4.8rem;

    line-height: 1;

    font-weight: 300;

    letter-spacing: -.06em;

    -webkit-text-stroke:
        1px rgba(77,124,255,.85);

    opacity: .9;
}


/* orange number */

.approach-card--orange .approach-card-number {
    -webkit-text-stroke:
        1px rgba(255,122,0,.9);
}


/* ==========================================
   ICON
========================================== */

.approach-card-icon {
    position: absolute;

    top: 1.4rem;
    right: 1.8rem;

    width: 72px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(77,124,255,.65);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77,124,255,.10),
            rgba(5,15,32,.65)
        );

    box-shadow:
        0 0 25px rgba(77,124,255,.08);
}


/* icon itself */

.approach-card-icon img {
    width: 40px;
    height: 40px;

    object-fit: contain;
}


/* orange icon */

.approach-card--orange .approach-card-icon {
    border-color: rgba(255,122,0,.7);

    background:
        radial-gradient(
            circle,
            rgba(255,122,0,.10),
            rgba(5,15,32,.65)
        );

    box-shadow:
        0 0 25px rgba(255,122,0,.08);
}


/* ==========================================
   CONTENT
========================================== */

.approach-card-content {
    position: absolute;

    left: 2rem;
    right: 2rem;
    bottom: 2rem;
}


/* ==========================================
   HEADING
========================================== */

.approach-card-content h3 {
    max-width: 390px;

    margin: 0 0 .8rem;

    color: var(--color-white);

    font-size: 1.35rem;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -.025em;
}


/* ==========================================
   TEXT
========================================== */

.approach-card-content p {
    max-width: 480px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: .9rem;

    line-height: 1.65;
}

/* ==========================================
   MILLIE POMAGA
========================================== */

.millie-help-section {
    position: relative;

        margin: 3rem auto;

    padding: 2.75rem 3.5rem;

    max-width: 1200px;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(255, 122, 0, .55);

    border-radius: 24px;

    background:
        linear-gradient(
            115deg,
            rgba(25, 24, 27, .96),
            rgba(7, 17, 34, .97)
        );

    box-shadow:
        0 0 45px rgba(255, 122, 0, .06),
        inset 0 0 50px rgba(255, 122, 0, .025);
}


/* ==========================================
   BACKGROUND
========================================== */

.millie-help-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 300px;

    left: 25%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(77, 124, 255, .13),
            transparent 70%
        );

    pointer-events: none;
}

.millie-help-section::after {
content: "";

    position: absolute;

    top: -1px;
    right: 10%;

    width: 150px;
    height: 2px;

    background: #ff7a00;

    box-shadow:
        0 0 12px rgba(255, 122, 0, .35);
}
/* ==========================================
   INNER
========================================== */

.millie-help {
    position: relative;

    display: grid;

    grid-template-columns:
        80px minmax(0, 1fr) auto;

    align-items: center;

    gap: 2rem;

    max-width: 1200px;

    margin: 0 auto;

    z-index: 1;
}


/* ==========================================
   ICON
========================================== */

.millie-help-icon {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(255,122,0,.55);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,122,0,.10),
            rgba(5,15,32,.55)
        );

    box-shadow:
        0 0 30px rgba(255,122,0,.08);
}

.millie-help-icon img {
    width: 40px;
    height: 40px;

    object-fit: contain;

    /* jeżeli SVG korzysta z currentColor */
    color: #ff7a00;
}


/* ==========================================
   CONTENT
========================================== */

.millie-help-content {
    min-width: 0;
}


/* ==========================================
   EYEBROW
========================================== */

.millie-help-content .section-eyebrow {
    display: flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: 1rem;

   color: #55a2f6;

    font-size: 13.6px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.millie-help-content .section-eyebrow-line {
    display: block;

    width: 30px;
    height: 2px;

    flex: 0 0 30px;

    background: #ff7a00;
}


/* ==========================================
   TITLE
========================================== */

.millie-help-title {
    max-width: 900px;

    margin: 0 0 .9rem;

    color: var(--color-white);

    font-size: clamp(
        1.8rem,
        3vw,
        2.5rem
    );

    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.035em;
}


/* BLUE BRAND PHRASE */

.millie-help-title span {
    color: var(--color-primary);
}


/* ==========================================
   DESCRIPTION
========================================== */

.millie-help-description {
    max-width: 850px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 1.1rem;

    line-height: 1.65;
}


/* ==========================================
   BUTTON
========================================== */

.millie-help-action {
    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.millie-help-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    min-width: 220px;

    padding: 1rem 1.4rem;

    box-sizing: border-box;

    border: 1px solid rgba(255,122,0,.55);

    border-radius: 999px;

    background:
        rgba(8,20,42,.45);

    color: var(--color-white);

    font-size: 1rem;

    line-height: 1;

    font-weight: 600;

    text-decoration: none;

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


.millie-help-button span:last-child {
    color: #ff7a00;

    font-size: 1.15rem;

    transition:
        transform .25s ease;
}


.millie-help-button:hover {
    border-color: rgba(255,122,0,.85);

    background:
        rgba(255,122,0,.07);

    box-shadow:
        0 0 30px rgba(255,122,0,.08);

    transform: translateY(-2px);
}


.millie-help-button:hover span:last-child {
    transform: translateX(4px);
}


/* ==========================================
   FOUNDER — KAROLINA
========================================== */

.founder-section {
    position: relative;

    padding: 3rem 0;

    overflow: hidden;
}


/* ==========================================
   CARD
========================================== */

.founder-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    align-items: center;

    gap: 3rem;

    max-width: 1200px;

    min-height: 320px;

    margin: 0 auto;

    padding: 3rem 3.5rem;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(77, 124, 255, .55);

    border-radius: 24px;

    background:
        linear-gradient(
            115deg,
            rgba(16, 34, 68, .94),
            rgba(5, 16, 35, .96)
        );

    box-shadow:
        0 0 45px rgba(77, 124, 255, .08),
        inset 0 0 45px rgba(77, 124, 255, .025);
}


/* subtle blue glow */

.founder-card::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 350px;

    right: 80px;
    top: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(77, 124, 255, .16),
            transparent 70%
        );

    pointer-events: none;
}


/* orange top accent */

.founder-card::after {
    content: "";

    position: absolute;

    top: -1px;
    right: 110px;

    width: 150px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff7a00
        );

    opacity: .8;
}


/* ==========================================
   CONTENT
========================================== */

.founder-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


/* ==========================================
   EYEBROW
========================================== */

.founder-content .section-eyebrow {
    display: flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: 1.2rem;

   color: #55a2f6;

    font-size: 13.6px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.founder-content .section-eyebrow-line {
    width: 30px;
    height: 2px;

    flex: 0 0 30px;

    background: #ff7a00;
}


/* ==========================================
   TITLE
========================================== */

.founder-title {
    margin: 0;

    color: #fff;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    line-height: 1.1;

    font-weight: 600;

    letter-spacing: -.04em;
}


/* ==========================================
   DIVIDER
========================================== */

.founder-divider {
    width: 64px;
    height: 2px;

    margin: 1.5rem 0;

    background:
        linear-gradient(
            90deg,
            #ff7a00,
            #4d7cff
        );
}


/* ==========================================
   QUOTE
========================================== */

.founder-quote {
    max-width: 760px;

    margin: 0 0 1.7rem;

    color: #eef3ff;

    font-size: 1.1rem;

    line-height: 1.55;

    font-weight: 500;

    letter-spacing: -.01em;
}


/* ==========================================
   LINK
========================================== */

.founder-link {
    display: inline-flex;

    align-items: center;

    gap: .75rem;

    color: var(--color-primary);

    font-size: 1rem;

    line-height: 1.4;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .25s ease;
}


.founder-link-arrow {
    color: #ff7a00;

    font-size: 1.15rem;

    transition:
        transform .25s ease;
}


.founder-link:hover {
    color: #7d9cff;
}


.founder-link:hover .founder-link-arrow {
    transform: translateX(5px);
}


/* ==========================================
   VISUAL
========================================== */

.founder-visual {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 260px;
}


/* ==========================================
   IMAGE / SVG
========================================== */

.founder-image-ring {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77, 124, 255, .12),
            transparent 65%
        );

    border: 1px solid rgba(77, 124, 255, .75);

    box-shadow:
        0 0 35px rgba(77, 124, 255, .16);
}


/* orange outer ring */

.founder-image-ring::before {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px solid rgba(255, 122, 0, .45);

    pointer-events: none;
}


/* blue glow ring */

.founder-image-ring::after {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid rgba(77, 124, 255, .55);

    pointer-events: none;
}


.founder-image-ring img {
    width: 220px;
    height: 250px;

    display: block;

    object-fit: cover;

    border-radius: 44%;
}


/* ==========================================
   CTA
========================================== */

.cta-section {
    position: relative;

    padding: 1rem 0 8rem;

    overflow: hidden;
}


/* ==========================================
   GLOW — dokładnie pod nagłówkiem
========================================== */

.cta-section::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 36%;

    width: 900px;
    height: 520px;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(77, 124, 255, .28) 0%,
            rgba(77, 124, 255, .16) 28%,
            rgba(77, 124, 255, .07) 48%,
            transparent 72%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* ==========================================
   INNER
========================================== */

.cta-section-inner {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    max-width: 1200px;

    margin: 0 auto;
}


/* ==========================================
   EYEBROW
========================================== */

.cta-section .section-eyebrow {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-bottom: 2.4rem;

   color: #55a2f6;

    font-size: 13.6px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.cta-section .section-eyebrow-line {
    width: 48px;
    height: 2px;

    flex: 0 0 48px;

    background: #ff7a00;
}


/* ==========================================
   HEADING
========================================== */

.cta-section-title {
    position: relative;

    max-width: 1200px;

    margin: 0;

    color: #fff;

    font-size: clamp(
        4rem,
        7vw,
        6.5rem
    );

    line-height: .96;

    font-weight: 700;

    letter-spacing: -.055em;
}


.cta-section-title span {
    display: inline;

    color: #4d7cff;
}


/* ==========================================
   SMALL DIVIDER
========================================== */

.cta-section-title::after {
    content: "";

    display: block;

    width: 110px;
    height: 2px;

    margin: 2.5rem auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );
}


/* ==========================================
   DESCRIPTION
========================================== */

.cta-section-description {
    max-width: 760px;

    margin: 2.5rem auto 0;

    color: #edf2fb;

    font-size: 1.2rem;

    line-height: 1.55;

    font-weight: 400;
}


/* ==========================================
   BUTTON
========================================== */

.cta-section-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 520px;
    max-width: 90vw;
    min-height: 82px;
    margin-top: 2.8rem;
    padding: 1rem 2.5rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(var(--color-background), var(--color-background)) padding-box, linear-gradient(90deg, #4D7CFF, #F28C28) border-box;
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 0 25px rgba(77, 124, 255, .15), 0 0 35px rgba(242, 140, 40, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}


/* miękka poświata wokół buttona */

.cta-section-button::before {
    content: "";

    position: absolute;

    inset: -18px;

    z-index: -1;

    border-radius: 80px;

    background:
        radial-gradient(
            ellipse,
            rgba(77, 124, 255, .18),
            transparent 68%
        );

    filter: blur(12px);
}


.cta-section-button-arrow {
    color: #ff7a00;

    font-size: 2.5rem;

    line-height: 1;

    font-weight: 400;

    transition:
        transform .25s ease;
}


.cta-section-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(42, 76, 134, .95),
            rgba(24, 53, 99, .95)
        );

    box-shadow:
        0 18px 40px rgba(4, 15, 35, .3),
        0 0 55px rgba(77, 124, 255, .18);
}


.cta-section-button:hover .cta-section-button-arrow {
    transform: translateX(6px);
}

/* =========================================================
   RESPONSIVE
   BIIMEDIA — ABOUT / O NAS
   ========================================================= */


/* =========================================================
   991px — TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       ABOUT HERO
    ----------------------------------------------------- */

    .about-hero {
        min-height: auto;
        padding: 6rem 0 5rem;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-hero-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .about-hero-eyebrow {
        justify-content: center;
    }

    .about-hero-title {
        font-size: clamp(3.5rem, 9vw, 5.5rem);
    }

    .about-hero-description {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
    }

    .about-hero-buttons {
        justify-content: center;
    }

    .about-hero-visual {
        min-height: 400px;
    }

    .about-hero-image {
        max-width: 540px;
    }


    /* -----------------------------------------------------
       TEAM STATS
    ----------------------------------------------------- */

    .team-stats {
        padding: 3rem 2rem;
    }

    .team-stats-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 0;
        padding: 3rem 1rem;
    }

    .team-stat:nth-child(2)::after {
        display: none;
    }

    .team-stat:nth-child(1)::after,
    .team-stat:nth-child(3)::after {
        height: calc(100% - 1rem);
    }


    /* -----------------------------------------------------
       TEAM
    ----------------------------------------------------- */

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

    .team-featured-card {
        grid-template-columns: 190px 1fr auto;
        gap: 1.5rem;
    }


    /* -----------------------------------------------------
       VALUES
    ----------------------------------------------------- */

    .values-section {
        padding: 3rem 1.5rem;
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 230px);
    }

    .value-card {
        min-height: 230px;
    }


    /* -----------------------------------------------------
       TEAM QUOTE / MILLIE MÓWI
    ----------------------------------------------------- */

    .team-quote-card {
        grid-template-columns: 190px 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .team-quote-image {
        width: 190px;
        height: 190px;
    }

    .team-quote-body p {
        font-size: 1.1rem;
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       VOICE
    ----------------------------------------------------- */

    .voice-section {
        padding: 3rem 1.5rem;
    }

    .voice-card--02 {
        margin-left: 1.5rem;
    }

    .voice-card--03 {
        margin-left: 3rem;
    }

    .voice-card {
        width: 100%;
    }


    /* -----------------------------------------------------
       MILLIE POMAGA
    ----------------------------------------------------- */

    .millie-help {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 1.5rem;
    }

    .millie-help-action {
        grid-column: 2;
        justify-content: flex-start;
    }


    /* -----------------------------------------------------
       FOUNDER
    ----------------------------------------------------- */

    .founder-card {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 2.5rem;
    }

    .founder-visual {
        order: -1;
        min-height: 220px;
        justify-content: flex-start;
    }

    .founder-image-ring {
        width: 200px;
        height: 200px;
    }

    .founder-image-ring img {
        width: 175px;
        height: 175px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding: 5rem 2rem 6rem;
    }

    .cta-section-title {
        font-size: clamp(3.5rem, 8vw, 5.5rem);
    }

    .cta-section-description {
        font-size: 1.1rem;
    }

}


/* =========================================================
   768px — TABLET PORTRAIT / LARGE MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       ABOUT HERO
    ----------------------------------------------------- */

    .about-hero {
        padding: 5rem 0 4rem;
    }

    .about-hero-grid {
        gap: 2.5rem;
    }

    .about-hero-title {
        font-size: clamp(3rem, 10vw, 4.8rem);
    }

    .about-hero-description {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .about-hero-buttons {
        flex-wrap: wrap;
    }


    /* -----------------------------------------------------
       TEAM HISTORY
    ----------------------------------------------------- */

    .team-history {
        padding: 3rem 0;
    }

    .team-history-intro {
        margin-bottom: 3.5rem;
    }

    .team-history-title {
        font-size: clamp(3rem, 10vw, 4.5rem);
        line-height: .95;
    }

    .team-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 1.5rem;
    }

    .team-timeline-content {
        width: 100%;
    }

    .team-timeline-content h3 {
        font-size: 1.1rem;
    }

    .team-timeline-content p {
        font-size: 1.1rem;
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       TEAM
    ----------------------------------------------------- */

    .team-section {
        padding: 4rem 1.5rem;
    }

    .team-section-title {
        font-size: clamp(3rem, 9vw, 4.5rem);
        line-height: .98;
    }

    .team-featured-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1rem;
    }

    .team-featured-image {
        height: 280px;
    }

    .team-featured-content {
        padding: .5rem .5rem .9rem;
    }

    .team-featured-arrow {
        display: none;
    }

    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .team-card-content {
        padding: 1rem;
    }

    .team-card-content h3 {
        font-size: 1.1rem;
    }

    .team-card-content p {
        font-size: 1.1rem;
        line-height: 1.5;
    }


    /* -----------------------------------------------------
       VALUES
    ----------------------------------------------------- */

    .values-section {
        padding: 3.5rem 1.25rem;
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 230px);
        gap: 1rem;
    }

    .value-card {
        height: 230px;
        min-height: 230px;
    }


    /* -----------------------------------------------------
       MILLIE MÓWI
    ----------------------------------------------------- */

    .team-quote-card {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 1.75rem;
    }

    .team-quote-image {
        width: 100%;
        height: 260px;
    }

    .team-quote-body p {
        font-size: 1.1rem;
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       VOICE
    ----------------------------------------------------- */

    .voice-section {
        padding: 3.5rem 1.25rem;
    }

    .voice-waveform {
        width: 100%;
        max-width: 100%;
        gap: 4px;
    }

    .voice-waveform span {
        width: 8px;
    }

    .voice-card {
        width: 100%;
    }


    /* -----------------------------------------------------
       APPROACH
    ----------------------------------------------------- */

    .approach-section {
        padding: 3.5rem 1.25rem;
    }

    .approach-section-intro {
        margin-bottom: 2.5rem;
    }

    .approach-section-title {
        font-size: clamp(2.8rem, 8vw, 4rem);
    }

    .approach-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .approach-card {
        min-height: 300px;
    }


    /* -----------------------------------------------------
       MILLIE POMAGA
    ----------------------------------------------------- */

    .millie-help-section {
        padding: 3.5rem 1.25rem;
    }

    .millie-help {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .millie-help-action {
        grid-column: auto;
        justify-content: flex-start;
    }

    .millie-help-title {
        font-size: 2rem;
    }

    .millie-help-button {
        width: auto;
    }


    /* -----------------------------------------------------
       FOUNDER
    ----------------------------------------------------- */

    .founder-section {
        padding: 3rem 1.25rem;
    }

    .founder-card {
        padding: 2rem 1.75rem;
        border-radius: 20px;
    }

    .founder-title {
        font-size: 2.2rem;
    }

    .founder-quote {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .founder-image-ring {
        width: 180px;
        height: 180px;
    }

    .founder-image-ring img {
        width: 160px;
        height: 160px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding: 5rem 1.5rem 6rem;
    }

    .cta-section-title {
        font-size: clamp(3rem, 11vw, 5rem);
        line-height: .96;
    }

    .cta-section-description {
        max-width: 700px;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .cta-section-button {
        min-height: 82px;
        gap: 1.5rem;
        padding: 1.25rem 2rem;
        font-size: 1.1rem;
    }

    .cta-section-button-arrow {
        font-size: 1.8rem;
    }

}


/* =========================================================
   600px — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       GLOBAL SECTION SPACING
    ----------------------------------------------------- */

    .about-hero,
    .team-history,
    .values-section,
    .team-section,
    .team-quote-section,
    .voice-section,
    .approach-section,
    .millie-help-section,
    .founder-section,
    .cta-section {
        width: 100%;
    }


    /* -----------------------------------------------------
       ABOUT HERO
    ----------------------------------------------------- */

    .about-hero {
        padding: 5rem 0 3.5rem;
    }

    .about-hero-grid {
        gap: 2.5rem;
    }

    .about-hero-eyebrow {
        gap: .65rem;
        margin-bottom: 1.5rem;
        font-size: .7rem;
        letter-spacing: .12em;
    }

    .about-hero-accent-line {
        width: 34px;
    }

    .about-hero-title {
        width: 100%;
        font-size: clamp(2.8rem, 12vw, 4.2rem);
        line-height: .96;
        letter-spacing: -.045em;
    }

    .about-hero-description {
        margin: 1.6rem auto 2rem;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .about-hero-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .about-hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .about-hero-visual {
        min-height: 0;
        margin-top: .5rem;
    }

    .about-hero-image {
        width: 100%;
        max-width: 390px;
        align-items: flex-start;
        min-height: 0;
    }


    /* =========================================================
   TEAM — HISTORY
   MOBILE
========================================================= */

    /* ==========================================
       SECTION
    ========================================== */

    .team-history {
        padding: 4rem 1.25rem;
        overflow: hidden;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .team-history-intro {
        width: 100%;
        max-width: 100%;
        margin-bottom: 3.5rem;
    }

    .team-history .section-eyebrow {
        margin-bottom: 1.25rem;

        font-size: .72rem;
    }

    .team-history-title {
        max-width: 100%;

        font-size: clamp(2.5rem, 10vw, 3.5rem);
        line-height: .98;
    }


    /* ==========================================
       TIMELINE
    ========================================== */

    .team-timeline {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;
    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


    /* ==========================================
       VERTICAL LINE
    ========================================== */

    .team-timeline::before {
        top: 0;
        bottom: 0;

        left: -0.75rem;
        right: auto;

        width: 1px;
        height: auto;

        transform: none;

        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(77,124,255,.18) 3%,
            rgba(77,124,255,.55) 12%,
            rgba(77,124,255,.55) 88%,
            rgba(77,124,255,.18) 97%,
            transparent 100%
        );
    }


    /* ==========================================
       TIMELINE ITEMS
    ========================================== */

.team-timeline-item {
    position: relative;

    display: block;

    width: 100%;
    height: auto;
    min-width: 0;

    margin: 0 0 1.5rem;
    padding: 0;

    z-index: 1;
}

    .team-timeline-item:last-child {
        margin-bottom: 0;
    }


    /* ==========================================
       RESET DESKTOP TOP / BOTTOM POSITIONING
    ========================================== */

    .team-timeline-item--top .team-timeline-content,
    .team-timeline-item--bottom .team-timeline-content {
        top: auto;
        bottom: auto;
    }


    /* ==========================================
       CONTENT CARDS
    ========================================== */

    .team-timeline-content {
        position: relative;

        left: auto;

        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0;

        padding: 1.5rem;

        box-sizing: border-box;

        transform: none;

        border-radius: 18px;
    }


    /* ==========================================
       NUMBER
    ========================================== */

    .team-timeline-number {
        margin-bottom: .9rem;

        font-size: 1rem;
        line-height: 1;
    }


    /* ==========================================
       HEADING
    ========================================== */

    .team-timeline-content h3 {
        margin-bottom: .8rem;

        font-size: 1.1rem;
        line-height: 1.25;
    }


    /* ==========================================
       TEXT
    ========================================== */

    .team-timeline-content p {
        margin-bottom: .75rem;

        font-size: 1.1rem;
        line-height: 1.55;
    }


    /* ==========================================
       TIMELINE POINT
    ========================================== */

.team-timeline-point {
    display: none;
}


    /* ==========================================
       CONNECTORS
    ========================================== */

    .team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item--bottom .team-timeline-point::before {
        left: 50%;

        width: 1px;
        height: 1.5rem;

        transform: translateX(-50%);
    }


    .team-timeline-item--top .team-timeline-point::before {
        bottom: 100%;
        top: auto;
    }


    .team-timeline-item--bottom .team-timeline-point::before {
        top: 100%;
        bottom: auto;
    }


    /* ==========================================
       ORANGE CONNECTORS
    ========================================== */

    .team-timeline-item:nth-child(1) .team-timeline-point::before,
    .team-timeline-item:nth-child(3) .team-timeline-point::before,
    .team-timeline-item:nth-child(5) .team-timeline-point::before {
        background: linear-gradient(
            to bottom,
            rgba(255,122,0,.5),
            transparent
        );
    }


    .team-timeline-item:nth-child(1).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(3).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(5).team-timeline-item--top .team-timeline-point::before {
        background: linear-gradient(
            to top,
            rgba(255,122,0,.5),
            transparent
        );
    }


    /* ==========================================
       BLUE CONNECTORS
    ========================================== */

    .team-timeline-item:nth-child(2) .team-timeline-point::before,
    .team-timeline-item:nth-child(4) .team-timeline-point::before {
        background: linear-gradient(
            to bottom,
            rgba(77,124,255,.5),
            transparent
        );
    }


    .team-timeline-item:nth-child(2).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(4).team-timeline-item--top .team-timeline-point::before {
        background: linear-gradient(
            to top,
            rgba(77,124,255,.5),
            transparent
        );
    }


    /* -----------------------------------------------------
       TEAM STATS
    ----------------------------------------------------- */

    .team-stats {
        padding: 3rem 1rem;
    }

    .team-stats-box {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 1rem;
        border-radius: 22px;
    }

    .team-stat {
        padding: 0 1rem;
    }

    .team-stat::after {
        display: none !important;
    }

    .team-stat-value {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .team-stat-dot {
        margin: 1rem 0 .75rem;
    }

    .team-stat-label {
        font-size: 1.1rem;
    }


    /* -----------------------------------------------------
       TEAM
    ----------------------------------------------------- */

    .team-section {
        padding: 3rem 1.25rem;
    }

    .team-section-title {
        font-size: clamp(2.8rem, 10vw, 4rem);
        line-height: .98;
    }

    .team-featured-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: .9rem;
    }

    .team-featured-image {
        height: 280px;
    }

    .team-featured-content {
        padding: .4rem .4rem .8rem;
    }

    .team-featured-arrow {
        display: none;
    }

    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    .team-card-content {
        padding: .8rem;
    }

    .team-card-content h3 {
        font-size: 1.1rem;
    }

    .team-card-content p {
        font-size: 1.1rem;
        line-height: 1.5;
    }


    /* -----------------------------------------------------
       VALUES
    ----------------------------------------------------- */

    .values-section {
        padding: 3rem 1.25rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 1rem;
    }

    .value-card {
        height: 230px;
        min-height: 230px;
    }


    /* -----------------------------------------------------
       MILLIE MÓWI
    ----------------------------------------------------- */

    .team-quote-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .team-quote-image {
        width: 100%;
        height: 260px;
    }

    .team-quote-body {
        gap: .65rem;
    }

    .team-quote-mark {
        font-size: 3rem;
    }

    .team-quote-body p {
        font-size: 1.1rem;
        line-height: 1.55;
    }


    /* -----------------------------------------------------
       VOICE
    ----------------------------------------------------- */

    .voice-section {
        padding: 3rem 1.25rem;
    }

    .voice-waveform {
        width: 100%;
        max-width: 100%;
        gap: 4px;
    }

    .voice-waveform span {
        width: 8px;
    }

    .voice-cards {
        width: 100%;
        margin: 0;
    }

    .voice-card--01,
    .voice-card--02,
    .voice-card--03 {
        margin-left: 0;
    }


    /* -----------------------------------------------------
   APPROACH — MOBILE
----------------------------------------------------- */

.approach-section {
    padding: 3rem 1.25rem;
    overflow: hidden;
    box-sizing: border-box;
}


/* ==========================================
   INTRO
========================================== */

.approach-section-intro {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2.5rem;
}

.approach-section-title {
    width: 100%;
    max-width: 100%;

    font-size: clamp(2.5rem, 10vw, 3.5rem);
    line-height: .98;
}

.approach-section-description {
    width: 100%;
    max-width: 100%;

    font-size: 1.1rem;
    line-height: 1.6;
}


/* ==========================================
   GRID
========================================== */

.approach-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    width: 100%;
    max-width: 100%;

    gap: 1rem;

    margin: 0;
    padding: 0;
}


/* ==========================================
   CARD
========================================== */

.approach-card {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 300px;
    height: auto;

    margin: 0 !important;
    padding: 1.5rem;

    box-sizing: border-box;

    overflow: hidden;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* ==========================================
   CARD CONTENT
========================================== */

.approach-card-content {
    position: static !important;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    transform: none !important;

    box-sizing: border-box;
}


/* ==========================================
   HEADING
========================================== */

.approach-card h3 {
    max-width: calc(100% - 55px);

    margin: 0 0 .85rem;
    padding: 0;

    font-size: 1.1rem;
    line-height: 1.2;
}


/* ==========================================
   TEXT
========================================== */

.approach-card p {
    width: 100%;
    max-width: 100%;

    margin: 0 0 .85rem;
    padding: 0;

    font-size: 1.1rem;
    line-height: 1.6;
}

.approach-card p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   IKONKA
========================================== */

.approach-card-icon,
.approach-card .icon {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    box-sizing: border-box;
}


/* ==========================================
   IKONA — POZYCJA
========================================== */

.approach-card > .approach-card-icon {
    position: absolute !important;

    top: 1.25rem !important;
    right: 1.25rem !important;

    left: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform: none !important;
}


/* ==========================================
   NUMER 01 / 02 / 03...
========================================== */

.approach-card-number {
    position: static !important;

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 1rem;
    padding: 0;

    transform: none !important;

    font-size: 3.5rem;
    line-height: 1;

    box-sizing: border-box;
}


/* ==========================================
   RESET DESKTOPOWYCH PRZESUNIĘĆ
========================================== */

.approach-card:nth-child(1),
.approach-card:nth-child(2),
.approach-card:nth-child(3),
.approach-card:nth-child(4),
.approach-card:nth-child(5),
.approach-card:nth-child(6) {
    margin-left: 0 !important;
    margin-right: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}

    /* -----------------------------------------------------
       MILLIE POMAGA
    ----------------------------------------------------- */

    .millie-help-section {
        padding: 3rem 1.25rem;
        width: 80%;
    }

    .millie-help {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .millie-help-action {
        grid-column: auto;
    }

    .millie-help-title {
        font-size: 1.9rem;
    }

    .millie-help-button {
        width: 100%;
    }


    /* -----------------------------------------------------
       FOUNDER
    ----------------------------------------------------- */

    .founder-section {
        padding: 2.5rem 1.25rem;
    }

    .founder-card {
        padding: 2rem 1.5rem;
        border-radius: 18px;
    }

    .founder-title {
        font-size: 2rem;
    }

    .founder-quote {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    founder-visual {
    	justify-content: center;
     }

    .founder-image-ring {
        width: 170px;
        height: 170px;
    }

    .founder-image-ring img {
        width: 150px;
        height: 150px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding: 5rem 1.25rem 6rem;
    }

    .cta-section-title {
        font-size: clamp(3rem, 12vw, 4.5rem);
        line-height: .96;
    }

    .cta-section-description {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .cta-section-button {
        width: 100%;
        min-height: 82px;
        gap: 1.5rem;
        padding: 1.25rem 2rem;
        font-size: 1.1rem;
    }

    .cta-section-button-arrow {
        font-size: 1.8rem;
    }

}


/* =========================================================
   480px — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       ABOUT HERO
    ----------------------------------------------------- */

    .about-hero {
        padding-top: 4.5rem;
    }

    .about-hero-title {
        font-size: 2.8rem;
    }

    .about-hero-description {
        font-size: 1.1rem;
    }

    .about-hero-image {
        max-width: 340px;
    }


    /* -----------------------------------------------------
       TEAM
    ----------------------------------------------------- */

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-featured-image {
        height: 250px;
    }


    /* -----------------------------------------------------
       MILLIE MÓWI
    ----------------------------------------------------- */

    .team-quote-section {
        padding: 2rem 1rem;
    }

    .team-quote-card {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .team-quote-image {
        height: 230px;
    }

    .team-quote-body {
        gap: .55rem;
    }

    .team-quote-mark {
        font-size: 3rem;
    }

    .team-quote-body p {
        font-size: 1.1rem;
        line-height: 1.5;
    }


    /* -----------------------------------------------------
       FOUNDER
    ----------------------------------------------------- */

    .founder-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .founder-card {
        padding: 1.75rem 1.25rem;
    }

    .founder-title {
        font-size: 1.9rem;
    }

    .founder-image-ring {
        width: 155px;
        height: 155px;
    }

    .founder-image-ring img {
        width: 138px;
        height: 138px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cta-section-title {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    /*
     * Na małych ekranach pozwalamy CTA się łamać.
     * Na desktopie pozostaje w jednej linii.
     */
    .cta-section-title {
        white-space: normal;
    }

}


/* =========================================================
   400px — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .about-hero {
        padding-top: 4rem;
    }

    .about-hero-title {
        font-size: 2.65rem;
    }

    .about-hero-description {
        font-size: 1.1rem;
    }

    .about-hero-image {
        max-width: 320px;
    }

    .team-section-title {
        font-size: 2.65rem;
    }

    .team-history-title {
        font-size: 2.65rem;
    }

    .approach-section-title {
        font-size: 2.3rem;
    }

    .cta-section-title {
        font-size: 2.65rem;
    }

}

/* =========================================================
   TEAM — HISTORY
   TABLET / SMALL DESKTOP
   601px — 991px
========================================================= */

@media (min-width: 601px) and (max-width: 991px) {

    /* ==========================================
       SECTION
    ========================================== */

    .team-history {
        padding: 5rem 2rem;
        overflow: hidden;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .team-history-intro {
        width: 100%;
        max-width: 850px;
        margin-bottom: 4rem;
    }

    .team-history .section-eyebrow {
        margin-bottom: 1.5rem;
        font-size: .75rem;
    }

    .team-history-title {
        max-width: 850px;

        font-size: clamp(3.2rem, 7vw, 5rem);
        line-height: .95;
    }


    /* ==========================================
       TIMELINE
    ========================================== */

    .team-timeline {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 850px;
        min-height: 0;

        margin: 0 auto;
        padding: 0 0 0 4.5rem;

        box-sizing: border-box;
    }


    /* ==========================================
       VERTICAL LINE
    ========================================== */

    .team-timeline::before {
        top: 0;
        bottom: 0;

        left: 1.5rem;
        right: auto;

        width: 1px;
        height: auto;

        transform: none;

        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(77,124,255,.18) 3%,
            rgba(77,124,255,.55) 10%,
            rgba(77,124,255,.55) 90%,
            rgba(77,124,255,.18) 97%,
            transparent 100%
        );
    }


    /* ==========================================
       TIMELINE ITEMS
    ========================================== */

    .team-timeline-item {
        position: relative;

        display: block;

        width: 100%;
        height: auto;
        min-width: 0;

        margin: 0 0 2rem;
        padding: 0;

        z-index: 1;
    }

    .team-timeline-item:last-child {
        margin-bottom: 0;
    }


    /* ==========================================
       RESET DESKTOP TOP / BOTTOM
    ========================================== */

    .team-timeline-item--top .team-timeline-content,
    .team-timeline-item--bottom .team-timeline-content {
        top: auto;
        bottom: auto;
    }


    /* ==========================================
       CARDS
    ========================================== */

    .team-timeline-content {
        position: relative;

        left: auto;

        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0;

        padding: 1.75rem 2rem;

        box-sizing: border-box;

        transform: none;

        border-radius: 18px;
    }


    /* ==========================================
       NUMBER
    ========================================== */

    .team-timeline-number {
        margin-bottom: 1rem;

        font-size: 1rem;
        line-height: 1;
    }


    /* ==========================================
       HEADING
    ========================================== */

    .team-timeline-content h3 {
        margin-bottom: .85rem;

        font-size: 1.1rem;
        line-height: 1.25;
    }


    /* ==========================================
       TEXT
    ========================================== */

    .team-timeline-content p {
        margin-bottom: .85rem;

        font-size: 1.1rem;
        line-height: 1.55;
    }


    /* ==========================================
       POINT
    ========================================== */

    .team-timeline-point {
        display: none;
    }


    /* ==========================================
       CONNECTORS
    ========================================== */

    .team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item--bottom .team-timeline-point::before {
        left: 50%;

        width: 1px;
        height: 1.75rem;

        transform: translateX(-50%);
    }


    .team-timeline-item--top .team-timeline-point::before {
        top: auto;
        bottom: 100%;
    }


    .team-timeline-item--bottom .team-timeline-point::before {
        top: 100%;
        bottom: auto;
    }


    /* ==========================================
       ORANGE CONNECTORS
    ========================================== */

    .team-timeline-item:nth-child(1) .team-timeline-point::before,
    .team-timeline-item:nth-child(3) .team-timeline-point::before,
    .team-timeline-item:nth-child(5) .team-timeline-point::before {
        background: linear-gradient(
            to bottom,
            rgba(255,122,0,.5),
            transparent
        );
    }


    .team-timeline-item:nth-child(1).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(3).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(5).team-timeline-item--top .team-timeline-point::before {
        background: linear-gradient(
            to top,
            rgba(255,122,0,.5),
            transparent
        );
    }


    /* ==========================================
       BLUE CONNECTORS
    ========================================== */

    .team-timeline-item:nth-child(2) .team-timeline-point::before,
    .team-timeline-item:nth-child(4) .team-timeline-point::before {
        background: linear-gradient(
            to bottom,
            rgba(77,124,255,.5),
            transparent
        );
    }


    .team-timeline-item:nth-child(2).team-timeline-item--top .team-timeline-point::before,
    .team-timeline-item:nth-child(4).team-timeline-item--top .team-timeline-point::before {
        background: linear-gradient(
            to top,
            rgba(77,124,255,.5),
            transparent
        );
    }

}

/* -----------------------------------------------------
   APPROACH — TABLET / SMALL LAPTOP
----------------------------------------------------- */

@media (max-width: 900px) and (min-width: 601px) {

    .approach-section {
        padding: 3.5rem 1.25rem;
        overflow: hidden;
        box-sizing: border-box;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .approach-section-intro {
        width: 100%;
        max-width: 850px;
        margin-bottom: 3.5rem;
    }

    .approach-section-title {
        max-width: 850px;

        font-size: clamp(3rem, 6vw, 4.5rem);
        line-height: .98;
    }

    .approach-section-description {
        max-width: 700px;

        font-size: 1.1rem;
        line-height: 1.6;
    }


    /* ==========================================
       GRID — 2 COLUMNS
    ========================================== */

    .approach-grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;
        max-width: 100%;

        gap: 1rem;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


    /* ==========================================
       CARD
    ========================================== */

    .approach-card {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 300px;
        height: auto;

        margin: 0 !important;
        padding: 1.5rem !important;

        box-sizing: border-box;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        overflow: hidden;
    }


    /* ==========================================
       CARD NUMBER
    ========================================== */

    .approach-card-number {
        position: static !important;

        display: block;

        width: auto;
        height: auto;

        margin: 0 0 1rem;
        padding: 0;

        transform: none !important;

        font-size: 3.5rem;
        line-height: 1;

        box-sizing: border-box;
    }


    /* ==========================================
       ICON
    ========================================== */

    .approach-card-icon,
    .approach-card .icon {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        box-sizing: border-box;
    }

    .approach-card > .approach-card-icon {
        position: absolute !important;

        top: 1.5rem !important;
        right: 1.5rem !important;

        left: auto !important;
        bottom: auto !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* ==========================================
       CONTENT
    ========================================== */

    .approach-card-content {
        position: static !important;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        transform: none !important;

        box-sizing: border-box;
    }


    /* ==========================================
       HEADING
    ========================================== */

    .approach-card h3 {
        max-width: calc(100% - 55px);

        margin: 0 0 .85rem;
        padding: 0;

        font-size: 1.1rem;
        line-height: 1.25;
    }


    /* ==========================================
       TEXT
    ========================================== */

    .approach-card p {
        width: 100%;
        max-width: 100%;

        margin: 0 0 .85rem;
        padding: 0;

        font-size: 1.1rem;
        line-height: 1.55;
    }

    .approach-card p:last-child {
        margin-bottom: 0;
    }


    /* ==========================================
       RESET DESKTOP OFFSETS
    ========================================== */

    .approach-card:nth-child(1),
    .approach-card:nth-child(2),
    .approach-card:nth-child(3),
    .approach-card:nth-child(4),
    .approach-card:nth-child(5),
    .approach-card:nth-child(6) {
        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }

}

/* =========================================================
   PRZEŁĄCZNIK ZESPOŁU
========================================================= */

.team-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: .85rem;

    margin: 0 0 3rem;
}

.team-toggle-inner {
    display: flex;
    align-items: center;

    gap: 1.25rem;
}


/* =========================
   ETYKIETY
========================= */

.team-toggle-label {
    color: rgba(165, 178, 198, .55);

    font-size: .78rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .12em;
    text-transform: uppercase;

    transition: color .3s ease;

    user-select: none;
}

.team-toggle-label.is-active {
    color: #fff;
}


/* =========================
   PRZEŁĄCZNIK
========================= */

.team-toggle-switch {
    position: relative;

    width: 66px;
    height: 34px;

    padding: 0;

    border: 1px solid rgba(77, 124, 255, .45);
    border-radius: 999px;

    background: rgba(77, 124, 255, .1);

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease;
}

.team-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow: 0 0 14px rgba(77, 124, 255, .45);

    transition:
        transform .35s cubic-bezier(.4, 0, .2, 1),
        background .3s ease,
        box-shadow .3s ease;
}

.team-toggle-switch[aria-pressed="true"] {
    border-color: rgba(242, 140, 40, .55);

    background: rgba(242, 140, 40, .12);
}

.team-toggle-switch[aria-pressed="true"] .team-toggle-knob {
    transform: translateX(32px);

    background: var(--color-accent);

    box-shadow: 0 0 14px rgba(242, 140, 40, .45);
}


/* =========================
   PODPIS
========================= */

.team-toggle-hint {
    color: rgba(165, 178, 198, .5);

    font-size: .85rem;
    font-style: italic;
    line-height: 1;
}


/* =========================================================
   DWIE WARSTWY KARTY
========================================================= */

.team-card-face--private {
    display: none;
}

.team-grid.is-after-hours .team-card-face--work {
    display: none;
}

.team-grid.is-after-hours .team-card-face--private {
    display: block;
}

.team-member-position--private {
    color: var(--color-accent);
}


/* =========================
   PRZEJŚCIE
========================= */

.team-grid {
    transition: opacity .25s ease;
}

.team-grid.is-switching {
    opacity: 0;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {

    .team-toggle {
        margin-bottom: 2.25rem;
    }

    .team-toggle-inner {
        gap: .85rem;
    }

    .team-toggle-label {
        font-size: .7rem;

        letter-spacing: .08em;
    }

}