/* body */
body{background-color: var(--c-cream);}
strong{color: var(--c-charcoal);}
/* hero */
.hero{position: relative; overflow: hidden; background: var(--c-charcoal); padding: 80px 0 0;}
.hero > :first-child{width: 500px; height: 500px; position: absolute; background: radial-gradient(circle, rgba(242, 92, 122, .18), transparent 70%); top: -120px; left: -80px;}
.hero > :nth-child(2){width: 400px; height: 400px; background: radial-gradient(circle, rgba(232, 151, 42, .14), transparent 70%); top: 0; right: -60px; position: absolute;}
.hero > :nth-child(3){width: 300px; height: 300px; background: radial-gradient(circle, rgba(59, 191, 173, .12), transparent 70%); bottom: 0; left: 40%; position: absolute;}
.hero > :nth-child(4) ,.hero > :nth-child(5) ,.hero > :nth-child(6) ,.hero > :nth-child(7) ,.hero > :nth-child(8){position: absolute; pointer-events: none; color: rgba(255, 255, 255, .12); animation: floating ease-in-out infinite;}
.hero > :nth-child(4){font-size: 48px; top: 12%; left: 6%; animation-duration: 5s;}
.hero > :nth-child(5){font-size: 32px; top: 30%; left: 22%; animation-duration: 4s; animation-delay: .8s;}
.hero > :nth-child(6){font-size: 56px; top: 10%; right: 8%; animation-duration: 4.5s; animation-delay: .4s;}
.hero > :nth-child(7){font-size: 24px; top: 55%; right: 18%; animation-duration: 6s; animation-delay: 1s;}
.hero > :nth-child(8){font-size: 40px; bottom: 20%; left: 48%; animation-duration: 5.5s; animation-delay: .6s;}
.hero .container .wrapper{position: relative;padding-bottom: 60px;}
.hero .container .wrapper > :first-child{display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); border: 1.5px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: .5px; margin-bottom: 20px; backdrop-filter: blur(6px);}
.hero .container .wrapper > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(36px, 5vw, 62px); font-weight: 700; color: var(--c-white); line-height: 1.1; margin-bottom: 20px; padding-right: 800px;}
.hero .container .wrapper > :nth-child(2) > *{color: var(--c-gold);}
.hero .container .wrapper > :nth-child(3){font-size: 18px; color: rgba(255, 255, 255, .65); line-height: 1.75; padding-right: 668px;}
.hero > :last-child{width: 55%; height: 56px; background: var(--c-cream); clip-path: ellipse(55% 100% at 50% 100%); margin-top: -56px; position: relative; z-index: 3; float: right;}
/* mission-css */
.mission{background: var(--c-white); border-bottom: 1.5px solid var(--c-border); padding: 48px 0;}
.mission .container .wrapper{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1.5px solid var(--c-border); border-radius: 20px; overflow: hidden;}
.mission .container .wrapper > *{padding: 32px 28px; text-align: center; border-right: 1.5px solid var(--c-border); transition: background .25s; position: relative; overflow: hidden;}
.mission .container .wrapper >* >:first-child{font-family: var(--ff-primary); font-size: 38px; font-weight: 700; color: var(--c-gold); line-height: 1; margin-bottom: 6px; position: relative;}
.mission .container .wrapper >* >:first-child:after{content: "+"; position: absolute; font-size: 22px; right: -14px; bottom: 6px;}
.mission .container .wrapper >* >:nth-child(2){font-family: var(--ff-secondary); font-size: var(--fs-sm); font-weight: 600; color: var(--c-charcoal); margin-bottom: 4px;}
.mission .container .wrapper >* >:nth-child(3){font-size: 12px; color: var(--c-text);}
.story{padding-block: 80px;}
.story .left{position: relative; padding-block: 200px;}
.story .container .wrapper{display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;}
.story .left .card{ position: absolute; border-radius: 22px; padding: 28px; font-family: var(--ff-primary); font-style: italic; box-shadow: 0 8px 32px rgba(44, 37, 34, .12); transition: transform .35s;}
.story .left > :first-child{width: 260px; background: linear-gradient(135deg, #F25C7A, #e85580); color: #fff; transform: rotate(-5deg); bottom: 30px; left: 0; z-index: 1; font-size: 14px; line-height: 1.65}
.story .left > :nth-child(2){width: 260px; background: linear-gradient(135deg, #E8972A, #f5b040); color: #fff; transform: rotate(3deg); bottom: 80px; left: 60px; z-index: 2; font-size: 14px; line-height: 1.65;}
.story .left >:last-child{width: 270px; background: var(--c-white); color: var(--c-charcoal); border: 1.5px solid var(--c-border); transform: rotate(0); bottom: 130px; left: 130px; z-index: 3; font-size: 14px; line-height: 1.65;}
.story .left > * >:first-child{font-style: normal; font-size: 22px; margin-bottom: 10px; display: block;}
.story .left > * >:nth-child(2){font-size: var(--fs-sm); font-family: var(--ff-primary); color: var(--c-white);}
.story .left > *:hover{box-shadow: 0 18px 50px rgba(44, 37, 34, .18);}
.story .left > :first-child:hover{    transform: rotate(-3deg) translateY(-6px);}
.story .left > :nth-child(2):hover{transform: rotate(1deg) translateY(-6px);}
.story .left > :last-child:hover{transform: translateY(-8px);}
.story .left > :last-child > :nth-child(2){color: var(--c-charcoal);}
.story .left > * >:last-child{color:var(--c-white); position: relative; font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: .65; margin-top: 10px; margin-left: 16px;}
.story .left > :last-child > :last-child{color:var(--c-text);}
.story .left > * > :last-child::before { position: absolute; content: "-"; font-size: 22px; left: -16px; top: -13px; color: var(--c-white); }
.story .left > :last-child > :last-child::before{color: var(--c-text);}
.story .right > :first-child{position: relative; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); display: block; margin-left: 20px; margin-bottom: 10px;}
.story .right > :first-child::before { content: "✦"; font-size: 11px; left: -18px; position: absolute; }
.story .right > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2; margin-bottom: 20px;}
.story .right > :nth-child(2) > *{color: var(--c-gold);}
.story .right p{font-size: 16px; color: var(--c-text); line-height: 1.8; margin-bottom: 16px;}
.right .quote{background: var(--c-surface); border-left: 4px solid var(--c-gold); border-radius: 0 14px 14px 0; padding: 20px 24px; margin: 28px 0;}
.right .quote > :first-child{font-family: var(--ff-primary); font-style: italic; font-size: 18px; color: var(--c-charcoal); line-height: 1.6;}
.right .quote > :last-child{font-size: 13px; color: var(--c-text); font-style: normal; font-weight: 600; margin-top: 8px; display: block;}
/* core values */
.values{background-color: var(--c-surface); padding-block: 80px;}
.values .container > :first-child{display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); margin-bottom: 8px;}
.values .container > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2; text-align: center;}
.values .container .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 56px;}
.values .container .wrapper > *{background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 20px; padding: 32px 28px; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;}
.values .wrapper > * > :first-child{position: absolute; top: 0; left: 0; right: 0; height: 4px;}
.values .wrapper > :nth-child(+3n+1) > :first-child{ background:linear-gradient(135deg,#F25C7A,#e8972a);}
.values .wrapper > * > :nth-child(2){font-size: 40px; margin-bottom: 16px; display: block;}
.values .wrapper > * > :nth-child(3){font-family: var(--ff-primary); font-size: 20px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 10px;}
.values .wrapper > * > :nth-child(4){font-size: 14px; color: var(--c-text); line-height: 1.7;}
.values .wrapper > :nth-child(+3n+2) > :first-child {background: linear-gradient(135deg,#E8972A,#f5b942);}
.values .wrapper > :nth-child(+3n+3) > :first-child {background: linear-gradient(135deg,#3BBFAD,#2d7dd2);}
.values .wrapper > :nth-child(4) > :nth-child(1) {background: linear-gradient(135deg,#7c3aed,#F25C7A);}
.values .wrapper > :nth-child(5) > :nth-child(1) {background: linear-gradient(135deg,#166534,#3BBFAD);}
.values .wrapper > :nth-child(6) > :nth-child(1) {background: linear-gradient(135deg, #E8972A, #3BBFAD);}
.values .wrapper > *:hover {transform: translateY(-5px); box-shadow: 0 14px 40px rgba(44, 37, 34, .1);}
/* team */
.team{background-color: var(--c-white); padding-block: 80px;}
.team .container > :first-child{display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); margin-bottom: 8px;}
.team .container > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2; text-align: center;}
.team .container .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 56px;}
.team .container .wrapper > *{background: var(--c-cream); border: 1.5px solid var(--c-border); border-radius: 20px; padding: 32px 24px; text-align: center; transition: transform .25s, box-shadow .25s;}
.team .wrapper > * > :first-child {width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 36px; border: 3px solid var(--border);}
.team .wrapper >:first-child > :first-child {background:linear-gradient(135deg,#fde3ea,#ffc5d3)}
.team .wrapper >:nth-child(2) > :first-child{background:linear-gradient(135deg,#fef3dc,#fde0a0);}
.team .wrapper >:nth-child(3) > :first-child{background:linear-gradient(135deg,#d6f5f1,#a8ece6);}
.team .wrapper >* >:nth-child(2){font-family: var(--ff-primary); font-size: 20px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 4px;}
.team .wrapper >* >:nth-child(3){font-size: 13px; font-weight: 600; color: var(--c-gold); margin-bottom: 10px;}
.team .wrapper >* >:nth-child(4){font-size: var(--fs-sm); color: var(--c-text); line-height: 1.65;}
.team-social{display: flex; justify-content: center; gap: 8px; margin-top: 14px;}
.team-social > *{width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--c-border); background: var(--c-white); display: flex; align-items: center; justify-content: center; color: var(--c-text); transition: all .2s;}
.team .container .wrapper > *:hover{transform: translateY(-5px); box-shadow: 0 14px 40px rgba(44, 37, 34, .1);}
/* journey */
.journey{background-color: var(--c-surface); padding-block: 80px;  padding-inline: 332px;}
.journey .container > :first-child{display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); margin-bottom: 8px;}
.journey .container > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2; text-align: center;}
.timeline{position: relative; margin: 0 auto;}
.timeline::before{content: ''; position: absolute; left: 49%; transform: translateX(-50%); top: 0; bottom: 0; width: 2px; background: var(--c-border);}
.journey .timeline > .wrapper {margin-top: 52px; display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: start; margin-bottom: 40px;}
.timeline > .wrapper > :first-child{text-align: right; padding-right: 28px; padding-top: 4px;}
.timeline  > .wrapper > :nth-child(2) {display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 2;}
.timeline .wrapper > :nth-child(3){padding-left: 28px; padding-top: 4px;}
.timeline .wrapper > :last-child {margin-bottom: 0;}
.timeline .wrapper >:first-child {text-align: right;}
.timeline .wrapper >:first-child >:first-child{font-family: var(--ff-primary); font-size: 13px; font-weight: 700; color: var(--c-gold); margin-bottom: 4px; display: block;}
.timeline .wrapper > :first-child > :nth-child(2){ font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; color: var(--c-charcoal); margin-bottom: 4px;}
.timeline .wrapper > :first-child > :nth-child(3){font-size: 13px; color: var(--c-text); line-height: 1.6;}
.timeline .wrapper > :nth-child(2){background:linear-gradient(135deg,#fde3ea,#ffc5d3);}
.timeline .wrapper > :nth-child(2){width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 3px solid var(--c-white); box-shadow: 0 0 0 2px var(--c-border);}
/* cta */
.cta{background: var(--c-charcoal); padding-block: 72px; position: relative; overflow: hidden;}
.cta > :first-child{width: 300px; height: 300px; background: rgba(242, 92, 122, .15); top: -80px; left: -60px;}
.cta > :first-child ,
.cta > :nth-child(2){position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;}
.cta > :nth-child(2){width: 250px; height: 250px; background: rgba(59, 191, 173, .12); bottom: -60px; right: -40px;}
.cta .container > :first-child{text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); display: block; margin-bottom: 14px;}
.cta .container > :nth-child(2){text-align: center; font-family: var(--ff-primary); font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: var(--c-white); line-height: 1.2; margin-bottom: 16px; padding-inline: 238px;}
.cta .container > :nth-child(3){text-align: center; font-size: var(--fs-base); color: rgba(255, 255, 255, .6); line-height: 1.7; margin-bottom: 36px; padding-inline: 234px;}
.cta .container .wrapper{display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;}
.cta .wrapper >:first-child{background: linear-gradient(135deg, #E8972A, #f5b942);; color: var(--c-white); border: none; border-radius: 999px; padding: 14px 30px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 18px rgba(232, 151, 42, .3); transition: opacity .2s, transform .2s;}
.cta .wrapper > :nth-child(2){background: transparent; color: var(--c-white); border: 2px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 13px 28px; font-size: 15px; font-weight: 600; transition: all .2s;}
.cta .wrapper > :first-child:hover{opacity: .9; transform: translateY(-2px);}
.cta .wrapper > :nth-child(2):hover{border-color: var(--c-white); background: rgba(255, 255, 255, .08);}
/* responsive */
@media only screen and (max-width:1200px){
    /*hero sec  */
    .hero .container .wrapper > :nth-child(2){padding-right: 436px;}
    .hero .container .wrapper > :nth-child(3) {padding-right: 436px}
}
@media only screen and (max-width:1024px){
    /* journey */
    .journey {padding-inline:116px}
}
@media only screen and (max-width:992px) {
    .hero .container .wrapper > :nth-child(2){padding-right: 434px;}
    /* story */
    .story {padding-block: 0px;}
    .story .container .wrapper {padding-block: 20px 0;}
    .story .left >:last-child {left: 50px;}
    .story .left > :nth-child(2) {left: 26px;}
    .story .left > :first-child {left: 0;}
    .story .right p {font-size: var(--fs-sm);}
    .right .quote > :first-child {font-size: (var(--fs-sm));}
    .right .quote {padding: 10px; margin: 15px 0;}
    /* values */
    .values {padding-block: 20px;}
    .values .container .wrapper {grid-template-columns: repeat(2,1fr); padding-top: 15px; gap: 15px;}
    .team .container .wrapper {display: flex; justify-content: center; align-items: center; padding-top: 15px; gap: 15px;}
    .team {padding-block: 20px;}
    .values .container .wrapper > * {padding: 20px;}
    .journey {padding: 0;}
    .journey .container > :first-child {padding-top: 20px;}
}
@media only screen and (max-width:768px) {
    .hero .container .wrapper > :nth-child(2){padding-right: 408px;}
    .hero .container .wrapper > :nth-child(3) { padding-right: 404px; }
    /* mission */
    .mission .container .wrapper {grid-template-columns: repeat(2,1fr);}
    /* story */
    .story .container .wrapper{grid-template-columns: 1fr;}
    .story .left {display: none;}
    /* values */
    .values .container .wrapper {grid-template-columns: repeat(1, 1fr);}
    /* team */
    .team .container .wrapper {flex-wrap: wrap;}
    /* journey */
    .journey {padding-inline: 0;}
    /* cta */
    .cta .container > :nth-child(2) {padding-inline: 112px;}
    .cta .container > :nth-child(3){padding-inline: 70px;}
}
@media only screen and (max-width:576px){
    /* hero */
    .hero .container .wrapper > :nth-child(2) {padding-right: 0px;}
    .hero .container .wrapper > :nth-child(3) {padding-right: 0px;}
    .hero > :last-child {width: 0;}
    /* mission */
    .mission .container .wrapper {grid-template-columns: repeat(1, 1fr);}
    .cta .container > :nth-child(2) {padding-inline: 0;}
    .cta .container > :nth-child(3){padding-inline: 0;}
    .cta .wrapper >:first-child {padding: 14px 66px;}
    
    /* timeline */
    .journey .timeline > .wrapper {grid-template-columns: 1fr 60px 0; margin-bottom: 0;}
    .timeline::before{left: 87%;}
    }

@keyframes floating {
    0%, 100% {
    transform: translateY(0) rotate(0deg);
}
50% {
    transform: translateY(-16px) rotate(15deg);
}
}