/* =========================================================
RECIPE WORLD — MEET THE TEAM
========================================================= */

/* =========================================================
PAGE
========================================================= */

.team-page {
width: 100%;
min-height: 100vh;
overflow: hidden;
}

.team-container {
width: min(
1180px,
calc(100% - 40px)
);

 
margin: 0 auto;
 

}

/* =========================================================
HERO
========================================================= */

.team-hero {
position: relative;

 
padding: 105px 0 100px;

background:
    radial-gradient(
        circle at 85% 10%,
        rgba(251, 191, 36, 0.15),
        transparent 28%
    ),
    radial-gradient(
        circle at 10% 80%,
        rgba(249, 115, 22, 0.08),
        transparent 30%
    );
 

}

.team-hero-content {
max-width: 800px;
margin: 0 auto;

 
text-align: center;
 

}

.team-eyebrow,
.team-section-label,
.team-cta-label {
display: inline-flex;

 
align-items: center;
gap: 9px;

color: #ea580c;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.16em;
 

}

.team-eyebrow::before,
.team-section-label::before {
content: "";

 
width: 28px;
height: 2px;

flex-shrink: 0;

border-radius: 999px;

background: #f97316;
 

}

.team-hero h1 {
margin: 20px 0 24px;

 
color: #172033;

font-size: clamp(
    46px,
    7vw,
    76px
);

line-height: 0.98;

letter-spacing: -0.055em;

font-weight: 800;
 

}

.team-hero h1 span {
display: block;

 
color: #f97316;
 

}

.team-hero p {
max-width: 650px;

 
margin: 0 auto;

color: #64748b;

font-size: 18px;
line-height: 1.8;
 

}

/* =========================================================
INTRODUCTION
========================================================= */

.team-introduction {
padding: 110px 0;

 
background: #ffffff;
 

}

.team-section-heading {
max-width: 760px;

 
margin: 0 auto;

text-align: center;
 

}

.team-section-heading .team-section-label {
justify-content: center;
}

.team-section-heading h2,
.team-values-heading h2 {
margin: 18px 0;

 
color: #172033;

font-size: clamp(
    34px,
    4vw,
    52px
);

line-height: 1.08;

letter-spacing: -0.04em;
 

}

.team-section-heading h2 span,
.team-values-heading h2 span {
color: #f97316;
}

.team-section-heading p {
margin: 0;

 
color: #64748b;

font-size: 16px;

line-height: 1.8;
 

}

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

.team-grid {
display: grid;

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

gap: 22px;

margin-top: 60px;
 

}

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

.team-card {
display: grid;

 
grid-template-columns:
    180px
    1fr;

min-height: 275px;

overflow: hidden;

border: 1px solid #edf0f4;

border-radius: 24px;

background: #ffffff;

box-shadow:
    0 8px 30px rgba(
        15,
        23,
        42,
        0.04
    );

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
 

}

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

 
box-shadow:
    0 20px 45px rgba(
        15,
        23,
        42,
        0.09
    );
 

}

.team-card-featured {
border-color: #fed7aa;

 
background: #fffaf5;
 

}

/* =========================================================
TEAM PHOTO / AVATAR
========================================================= */

.team-photo {
position: relative;

 
display: flex;

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

min-height: 275px;

background:
    radial-gradient(
        circle at 50% 40%,
        #ffedd5,
        #fff7ed 60%,
        #ffffff
    );
 

}

.team-avatar {
width: 112px;
height: 112px;

 
display: flex;

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

border-radius: 50%;

color: #ea580c;

background: #ffffff;

font-size: 28px;
font-weight: 800;

letter-spacing: -0.04em;

box-shadow:
    0 15px 35px rgba(
        249,
        115,
        22,
        0.13
    );
 

}

.team-status {
position: absolute;

 
left: 15px;
bottom: 15px;

padding: 6px 10px;

border-radius: 999px;

color: #9a3412;

background: rgba(
    255,
    255,
    255,
    0.88
);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.08em;

text-transform: uppercase;

backdrop-filter: blur(8px);
 

}

/* =========================================================
TEAM INFORMATION
========================================================= */

.team-info {
display: flex;

 
flex-direction: column;

justify-content: center;

padding: 30px;
 

}

.team-role {
color: #f97316;

 
font-size: 11px;
font-weight: 800;

letter-spacing: 0.10em;

text-transform: uppercase;
 

}

.team-info h3 {
margin: 8px 0 10px;

 
color: #172033;

font-size: 24px;

letter-spacing: -0.03em;
 

}

.team-info p {
margin: 0;

 
color: #64748b;

font-size: 13px;

line-height: 1.7;
 

}

/* =========================================================
SOCIAL LINKS
========================================================= */

.team-socials {
display: flex;

 
align-items: center;

gap: 8px;

margin-top: 20px;
 

}

.team-socials a {
width: 34px;
height: 34px;

 
display: flex;

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

border: 1px solid #e2e8f0;

border-radius: 10px;

color: #475569;

background: #ffffff;

font-size: 10px;
font-weight: 800;

transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
 

}

.team-socials a:hover {
color: #ffffff;

 
border-color: #f97316;

background: #f97316;
 

}

/* =========================================================
VALUES
========================================================= */

.team-values {
padding: 110px 0;

 
background:
    linear-gradient(
        180deg,
        #fafaf9 0%,
        #ffffff 100%
    );
 

}

.team-values-heading {
max-width: 650px;
}

.values-grid {
display: grid;

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

gap: 16px;

margin-top: 55px;
 

}

.value-card {
padding: 28px;

 
border: 1px solid #edf0f4;

border-radius: 20px;

background: #ffffff;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
 

}

.value-card:hover {
transform: translateY(-5px);

 
box-shadow:
    0 18px 40px rgba(
        15,
        23,
        42,
        0.07
    );
 

}

.value-icon {
width: 52px;
height: 52px;

 
display: flex;

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

margin-bottom: 22px;

border-radius: 15px;

background: #fff7ed;

font-size: 23px;
 

}

.value-card h3 {
margin: 0 0 9px;

 
color: #172033;

font-size: 18px;
 

}

.value-card p {
margin: 0;

 
color: #64748b;

font-size: 13px;

line-height: 1.7;
 

}

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

.team-cta {
padding: 0 0 100px;

 
background: #ffffff;
 

}

.team-cta-card {
position: relative;

 
padding: 75px 50px;

overflow: hidden;

border-radius: 30px;

text-align: center;

background: #f97316;

box-shadow:
    0 25px 65px rgba(
        249,
        115,
        22,
        0.20
    );
 

}

.team-cta-card::before,
.team-cta-card::after {
content: "";

 
position: absolute;

border:
    1px solid rgba(
        255,
        255,
        255,
        0.14
    );

border-radius: 50%;
 

}

.team-cta-card::before {
width: 320px;
height: 320px;

 
top: -220px;
left: -80px;
 

}

.team-cta-card::after {
width: 420px;
height: 420px;

 
right: -180px;
bottom: -300px;
 

}

.team-cta-label {
position: relative;
z-index: 2;

 
color: rgba(
    255,
    255,
    255,
    0.78
);
 

}

.team-cta-label::before {
content: "";

 
width: 28px;
height: 2px;

border-radius: 999px;

background: rgba(
    255,
    255,
    255,
    0.65
);
 

}

.team-cta-card h2 {
position: relative;
z-index: 2;

 
max-width: 700px;

margin: 18px auto;

color: #ffffff;

font-size: clamp(
    36px,
    5vw,
    56px
);

line-height: 1.05;

letter-spacing: -0.045em;
 

}

.team-cta-card p {
position: relative;
z-index: 2;

 
max-width: 560px;

margin: 0 auto 30px;

color: rgba(
    255,
    255,
    255,
    0.82
);

font-size: 15px;

line-height: 1.7;
 

}

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

.team-cta-actions {
position: relative;
z-index: 3;

 
display: flex;

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

gap: 12px;
 

}

.team-btn {
min-height: 50px;

 
display: inline-flex;

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

gap: 9px;

padding: 0 22px;

border-radius: 13px;

font-size: 14px;
font-weight: 750;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
 

}

.team-btn:hover {
transform: translateY(-3px);
}

.team-btn-light {
color: #ea580c;

 
background: #ffffff;
 

}

.team-btn-light:hover {
box-shadow:
0 15px 35px rgba(
0,
0,
0,
0.16
);
}

.team-btn-outline {
color: #ffffff;

 
border: 1px solid rgba(
    255,
    255,
    255,
    0.40
);

background: transparent;
 

}

.team-btn-outline:hover {
background: rgba(
255,
255,
255,
0.10
);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

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

.team-card {
    grid-template-columns:
        145px
        1fr;
}

.team-photo {
    min-height: 275px;
}

.team-avatar {
    width: 90px;
    height: 90px;
}
 

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

 
.team-container {
    width: calc(100% - 28px);
}

.team-hero {
    padding: 65px 0 70px;
}

.team-hero h1 {
    font-size: 45px;
}

.team-hero p {
    font-size: 15px;
}

.team-introduction,
.team-values {
    padding: 75px 0;
}

.team-section-heading h2,
.team-values-heading h2 {
    font-size: 35px;
}

.team-grid {
    grid-template-columns: 1fr;

    margin-top: 45px;
}

.team-card {
    grid-template-columns: 125px 1fr;

    min-height: 240px;
}

.team-photo {
    min-height: 240px;
}

.team-avatar {
    width: 82px;
    height: 82px;

    font-size: 23px;
}

.team-info {
    padding: 22px;
}

.team-info h3 {
    font-size: 21px;
}

.team-info p {
    font-size: 12px;
}

.values-grid {
    grid-template-columns: 1fr;

    margin-top: 40px;
}

.value-card {
    padding: 24px;
}

.team-cta {
    padding-bottom: 70px;
}

.team-cta-card {
    padding: 55px 25px;

    border-radius: 24px;
}

.team-cta-card h2 {
    font-size: 37px;
}

.team-cta-actions {
    flex-direction: column;
}

.team-btn {
    width: 100%;
}
 

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

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

.team-photo {
    min-height: 190px;
}

.team-avatar {
    width: 85px;
    height: 85px;
}

.team-status {
    left: 15px;
    bottom: 12px;
}

.team-info {
    padding: 24px;
}
 

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

 
.team-card,
.value-card,
.team-btn,
.team-socials a {
    transition: none;
}
 

}