/* ---------- hero : edge to edge, larger than life ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0a0a0c;
    isolation: isolate;
}



.ahero-grid {
    padding: 150px 40px 80px;
}

.red-text {
	color: var(--coral);
}

/* full bleed photo on the right */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: scale(1.18);
    opacity: 0;
    animation: heroZoom 2.4s .2s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes heroZoom {
    0% {
        opacity: 0;
        transform: scale(1.18);
    }

    100% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* dark scrims so left copy stays legible */

/* .hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,#070708 0%,rgba(8,8,10,.96) 26%,rgba(8,8,10,.72) 44%,rgba(8,8,10,.15) 66%,rgba(8,8,10,.05) 100%),
  linear-gradient(180deg,rgba(8,8,10,.55),transparent 30%,rgba(8,8,10,.4))} */


.hero-curtain {
    position: absolute;
    inset: 0;
    background: #0a6c74;
    z-index: 20;
    transform-origin: top;
    animation: curtain 1.1s .1s cubic-bezier(.76, 0, .24, 1) forwards;
}

@keyframes curtain {
    0% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }
}

.hero-inner {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 200px 40px 80px;
}

.hero-copy {
    max-width: 680px;
}

.hero .eyebrow {
    color: var(--teal-400);
}

.hero h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    color: #fff;
    margin: 24px 0;
    letter-spacing: -.035em;
    line-height: .96;
}

.hero h1 .ln {
    display: block;
    overflow: hidden;
}

.hero h1 .ln span {
    display: block;
    transform: translateY(110%);
    animation: lineUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.hero h1 .ln:nth-child(1) span {
    animation-delay: .7s;
}

.hero h1 .ln:nth-child(2) span {
    animation-delay: .82s;
}

.hero h1 .ln:nth-child(3) span {
    animation-delay: .94s;
}

@keyframes lineUp {
    to {
        transform: translateY(0);
    }
}

.hero h1 .accent {
    position: relative;
    color: var(--teal-400);
    white-space: nowrap;
}

.hero h1 .accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.02em;
    height: .14em;
    background: var(--gold);
    border-radius: 6px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: underline .9s 1.5s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes underline {
    to {
        transform: scaleX(1);
    }
}

.hero p.lead {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: #000;
    max-width: 540px;
    margin-bottom: 34px;
    opacity: 0;
    animation: fadeUp .9s 1.5s forwards;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp .9s 1.7s forwards;
}

.hero-trust {
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .75);
    opacity: 0;
    animation: fadeUp .9s 1.9s forwards;
}

.hero-trust .badges {
    display: flex;
    gap: 8px;
}

.hero-trust .badges i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 1rem;
}

.hero-trust b {
    color: #fff;
}


.ahero h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    color: #103137;
    margin: 18px 0;
    letter-spacing: -.03em;
    line-height: 1.0;
}

.ahero h1 .accent {
    color: #007c9f;
    position: relative;
    white-space: nowrap;
}

.ahero h1 .accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.02em;
    height: .13em;
    background: var(--gold);
    border-radius: 6px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: underline .9s 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.ahero .lead {
    color: #000;
    max-width: 560px;
    font-size: 1.03rem;
    margin-bottom: 24px;
    font-weight: 600;
}

/* floating glass cards on the photo */
.float-card {
    position: absolute;
    z-index: 8;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 15px 20px 15px 16px;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    gap: 13px;
    opacity: 0;
}

.float-card .dot {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex: none;
}

.float-card b {
    font-family: var(--display);
    font-size: 1.15rem;
    display: block;
    color: var(--teal-900);
    line-height: 1.1;
}

.float-card small {
    font-size: .78rem;
    color: var(--ink-soft);
}

.fc1 {
    top: 16%;
    right: 5%;
    animation: cardIn .8s 2s forwards, bob 6s 2.8s ease-in-out infinite;
}

.fc1 .dot {
    background: var(--cyan-100);
    color: var(--teal-700);
}

.fc2 {
    top: 58%;
    right: 4%;
    animation: cardIn .8s 2.2s forwards, bob 7s 3s ease-in-out infinite;
}

.fc2 .dot {
    background: #ffe9e6;
    color: var(--coral);
}

.fc3 {
    bottom: 9%;
    right: 16%;
    animation: cardIn .8s 2.4s forwards, bob 8s 3.2s ease-in-out infinite;
}

.fc3 .dot {
    background: var(--gold-soft);
    color: #b67d00;
}

@keyframes cardIn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    color: rgba(255, 255, 255, .6);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeUp 1s 2.6s forwards;
}

.scroll-cue .line {
    width: 1px;
    height: 34px;
    background: linear-gradient(rgba(255, 255, 255, .7), transparent);
    animation: cue 1.8s ease-in-out infinite;
}

@keyframes cue {

    0%,
    100% {
        transform: scaleY(.4);
        opacity: .4;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* ===== benefits ===== */
.benefits {
    background: var(--paper)
}

.ben-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.bcard {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 24px;
    transition: .4s;
    position: relative;
    overflow: hidden
}

.bcard::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--ac, var(--teal-500));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s
}

.bcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    background: #fff
}

.bcard:hover::after {
    transform: scaleY(1)
}

.bcard .bi {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--sb, var(--cyan-100));
    margin-bottom: 14px
}

.bcard h4 {
    font-size: 1.08rem;
    color: var(--teal-900);
    margin-bottom: 8px
}

.bcard p {
    color: var(--ink-soft);
    font-size: .88rem
}

/* ===== job board ===== */
.jobs {
    background: linear-gradient(180deg, var(--cyan-50), var(--cream))
}

.board {
    max-width: 920px;
    margin: 0 auto
}

.board-tools {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px
}

.filterbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

.fpill {
    font-family: var(--body);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    padding: 11px 20px;
    border-radius: 100px;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.fpill .c {
    font-size: .72rem;
    background: var(--cyan-100);
    color: var(--teal-700);
    padding: 2px 9px;
    border-radius: 100px;
    font-weight: 700;
    transition: all .3s
}

.fpill:hover {
    border-color: var(--teal-400);
    color: var(--teal-700)
}

.fpill.active {
    background: var(--teal-700);
    color: #fff;
    border-color: var(--teal-700);
    box-shadow: 0 14px 30px -14px rgba(10, 108, 116, .9)
}

.fpill.active .c {
    background: rgba(255, 255, 255, .22);
    color: #fff
}

.job-search {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

.job-search input {
    width: 100%;
    padding: 14px 20px 14px 46px;
    border-radius: 100px;
    border: 1.5px solid var(--line);
    font-family: var(--body);
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    transition: .3s
}

.job-search input:focus {
    outline: none;
    border-color: var(--teal-400);
    box-shadow: var(--shadow-sm)
}

.job-search .si {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    opacity: .6
}

.job-count {
    text-align: center;
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 18px 0 26px
}

.job-count b {
    color: var(--coral);
    font-family: var(--display);
    font-size: 1.2rem
}

.job-list {
    display: grid;
    gap: 14px
}

.job {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px 26px;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.job::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--teal-500);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s
}

.job:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-400)
}

.job:hover::after {
    transform: scaleY(1)
}

.job .jmain {
    flex: 1;
    min-width: 0
}

.job .jtitle {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.job h3 {
    font-size: 1.2rem;
    color: var(--teal-900)
}

.job .dept {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-600);
    background: var(--cyan-100);
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap
}

.job .jmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.job .m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    color: var(--ink-soft);
    font-weight: 500
}

.job .m+.m::before {
    content: "\2022";
    margin-right: 8px;
    color: var(--line)
}

.job .jcta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-700);
    font-weight: 600;
    font-size: .9rem
}

.job .jcta .ar {
    transition: transform .35s
}

.job:hover .jcta .ar {
    transform: translateX(4px)
}

.empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 50px 20px;
    display: none
}

.empty.show {
    display: block
}

.empty .ei {
    font-size: 2.4rem;
    margin-bottom: 12px;
    opacity: .5
}

/* ===== departments ===== */
.depts {
    background: var(--paper)
}

.dept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.dcard {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px 22px;
    transition: .35s;
    text-align: left;
    cursor: default
}

.dcard.hiring {
    cursor: pointer
}

.dcard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
    background: #fff
}

.dcard.hiring {
    border-color: var(--teal-400)
}

.dcard .di {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--cyan-100);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin-bottom: 14px
}

.dcard h4 {
    font-size: 1.02rem;
    color: var(--teal-900);
    margin-bottom: 10px
}

.dstatus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 5px 12px
}

.dstatus.on {
    background: #e3f7ec;
    color: #1f7a4d
}

.dstatus.on .d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2eb872
}

.dstatus.off {
    background: #f0ece4;
    color: var(--ink-soft)
}

.dcard .reg {
    display: block;
    margin-top: 12px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--teal-700);
    cursor: pointer
}

.dcard .reg:hover {
    text-decoration: underline
}

/* ===== modal ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.modal.open {
    display: flex
}

.modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 30, 33, .6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s
}

.modal.open .modal-bg {
    opacity: 1
}

.modal-card {
    position: relative;
    background: var(--paper);
    border-radius: var(--r-lg);
    max-width: 70%;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px) scale(.98);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s
}

.modal.open .modal-card {
    transform: none;
    opacity: 1
}

.modal-head {
    padding: 30px 32px 0;
    position: relative
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--ink-soft);
    display: grid;
    place-items: center;
    transition: .3s;
    z-index: 2
}

.modal-close:hover {
    background: var(--cream);
    color: var(--coral);
    transform: rotate(90deg)
}

.modal-head .dept {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-600);
    background: var(--cyan-100);
    padding: 5px 12px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 12px
}

.modal-head h3 {
    font-size: 1.6rem;
    color: var(--teal-900);
    margin-bottom: 6px
}

.modal-body {
    padding: 22px 32px 30px
}

.half-div-module {
    display: flex;
    justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

#wpcf7-f333-o1 .half-div-module {
	gap: 0;
}

.half-div {
    width: 48%;
}

.full-div {
    width: 100%;
}

.mrow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

.mrow .mk {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--cyan-100);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex: none
}

.mrow .ml {
    font-size: .74rem;
    color: var(--ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em
}

.mrow .mv {
    font-family: var(--display);
    font-weight: 600;
    color: var(--teal-900);
    font-size: 1rem
}

.mnote {
    background: var(--cyan-50);
    border: 1px dashed var(--teal-400);
    border-radius: var(--r-md);
    padding: 14px 18px;
    font-size: .86rem;
    color: var(--teal-700);
    margin: 18px 0
}

.modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px
}

/* apply form */
.field {
    margin: 10px 14px 14px 0;
}

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--teal-900);
    margin-bottom: 6px
}

.field input,
.field textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    font-family: var(--body);
    font-size: .92rem;
    color: var(--ink);
    background: var(--cream);
    transition: .3s
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--teal-400);
    background: #fff
}

.field textarea {
    resize: vertical;
    min-height: 80px
}

.apply-ok {
    display: none;
    text-align: center;
    padding: 20px 0
}

.apply-ok.show {
    display: block
}

.apply-ok .ok {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e3f7ec;
    color: #2eb872;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    margin: 0 auto 16px
}

.apply-ok h4 {
    font-size: 1.3rem;
    color: var(--teal-900);
    margin-bottom: 8px
}

.apply-ok p {
    color: var(--ink-soft);
    font-size: .94rem
}

/* ===== cta ===== */
.cta {
    background: linear-gradient(180deg, var(--cyan-50), var(--cream))
}

.cta-card {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(150deg, var(--teal-700), var(--teal-900));
    border-radius: var(--r-lg);
    padding: 58px 50px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px)
}

.cta-card h2 {
    position: relative;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin-bottom: 12px;
    color: #fff
}

.cta-card p {
    position: relative;
    color: rgba(255, 255, 255, .84);
    max-width: 600px;
    margin: 0 auto 24px;
    font-size: 1.04rem
}

.cta-actions {
    position: relative;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

footer {
    background: var(--teal-900);
    color: #fff;
    padding: 70px 0 30px;
    position: relative;
    overflow: hidden
}

.foot-cross {
    position: absolute;
    font-weight: 800;
    color: rgba(255, 255, 255, .05);
    font-size: 14rem;
    right: -30px;
    top: -40px;
    line-height: 1;
    font-family: var(--display)
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    position: relative
}

.foot-grid .logo {
    color: #fff;
    margin-bottom: 16px
}

.foot-grid .logo b {
    color: var(--coral)
}

.foot-about {
    color: rgba(255, 255, 255, .65);
    font-size: .92rem;
    max-width: 280px
}

.foot-col h5 {
    font-family: var(--display);
    font-size: 1rem;
    margin-bottom: 16px
}

.foot-col a {
    display: block;
    color: rgba(255, 255, 255, .65);
    font-size: .9rem;
    padding: 5px 0;
    transition: .25s
}

.foot-col a:hover {
    color: #fff;
    padding-left: 6px
}

.foot-bottom {
    margin-top: 46px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255, 255, 255, .5);
    font-size: .84rem;
    position: relative
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
}

.reveal.in {
    opacity: 1;
    transform: none
}

.reveal.d1 {
    transition-delay: .08s
}

.reveal.d2 {
    transition-delay: .16s
}

.reveal.d3 {
    transition-delay: .24s
}

.reveal.d4 {
    transition-delay: .32s
}

.job-listing, #mDetail .wp-block-list {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 15px;
}

.job-listing li, #mDetail .wp-block-list li {
    margin-bottom: 8px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.field label,
#mDetail .wp-block-heading {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 20px;
    color: var(--teal-900);
	font-size: .90rem;
}

.field label {
	margin-top:0;
}



/* ===== keep india healthy + contact + cta ===== */
.kih {
    background: linear-gradient(180deg, var(--cyan-50), var(--cream))
}

.kih-card {
    max-width: 1000px;
    margin: 0 auto;
    /* background: linear-gradient(150deg, var(--teal-700), var(--teal-900)); */
    background-image: url('/wp-content/uploads/2026/06/career-cta-banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--r-lg);
    padding: 60px 50px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.kih-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px) */
}

.kih-card .tag {
    position: relative;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    color: #fff;
    letter-spacing: -.02em;
    margin-bottom: 14px;
    text-align: left;
    line-height: 1.1;
}

.kih-card .tag span {
    color: var(--gold)
}

.kih-card p {
    position: relative;
    color: rgba(255, 255, 255, .84);
    max-width: 600px;
    margin-bottom: 70px;
    margin-right: auto;
    text-align: left;
    font-size: 1.04rem
}

.kih-contact {
    position: relative;
    display: flex;
    gap: 12px;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.kih-contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2); */
    border-radius: 100px;
    /* padding: 11px 20px; */
    padding-right: 15px;
    font-weight: 600;
    font-size: .92rem;
    transition: .3s
}

/* .kih-contact a:hover {
    background: rgba(255, 255, 255, .2) 
} */

.kih-actions {
    position: relative;
    display: flex;
    gap: 14px;
    justify-content: start;
    flex-wrap: wrap
}

@media(max-width:980px) {

    .nav-links,
    .nav-cta {
        display: none
    }

    .burger {
        display: flex
    }

    .ben-grid {
        grid-template-columns: 1fr 1fr
    }

    .dept-grid {
        grid-template-columns: 1fr 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }
}

@media(max-width:620px) {
    .wrap {
        padding: 0 18px
    }

    .ben-grid,
    .dept-grid,
    .foot-grid {
        grid-template-columns: 1fr
    }

    .job {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }

    .job .jcta {
        align-self: flex-end
    }

    .cta-card {
        padding: 46px 24px
    }

    .hero h1 {
        font-size: 2.5rem
    }

    .modal {
        padding: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}


:root{
  --teal-900:#053b41; --teal-700:#0a6c74; --teal-600:#0e8089; --teal-500:#16a3ad; --teal-400:#3fc2cb;
  --cyan-100:#d6f3f5; --cyan-50:#eafafb;
  --coral:#ff6b5e; --gold:#ffc24b; --gold-soft:#ffe2a3;
  --cream:#fbf7ef; --paper:#ffffff; --ink:#103137; --ink-soft:#4a6066;
  --line:rgba(10,108,116,.14);
  --shadow-sm:0 4px 18px -8px rgba(10,108,116,.30);
  --shadow-md:0 18px 50px -22px rgba(10,108,116,.45);
  --r-lg:30px; --r-md:20px; --r-sm:14px;
  --display:"Bricolage Grotesque",sans-serif; --body:"Plus Jakarta Sans",sans-serif;
}
.as-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.as-sec-pad{padding:84px 0;position:relative;font-family:var(--body);color:var(--ink)}
.as-eyebrow{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-600);display:inline-flex;align-items:center;gap:.6em}
.as-eyebrow::before{content:"";width:26px;height:2px;background:var(--coral);border-radius:2px;display:inline-block}
.as-head{text-align:center;max-width:740px;margin:0 auto 46px}
.as-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--teal-900);margin:16px 0 14px;line-height:1.05}
.as-head p{color:var(--ink-soft);font-size:1.05rem}
.as-head .y{color:var(--coral)}

/* SECTION 1 — WHY BUILD YOUR CAREER */
.as-why{background:linear-gradient(180deg,var(--cyan-50),var(--cream))}
.as-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.as-bcard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ac,var(--teal-500));border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s;box-shadow:var(--shadow-sm)}
.as-bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.as-bbody{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.as-bchip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--teal-700));background:color-mix(in srgb,var(--ac,var(--teal-500)) 11%,#fff);border-radius:100px;padding:6px 13px;margin-bottom:14px}
.as-bcard h4{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--teal-900);margin-bottom:8px;letter-spacing:-.01em}
.as-bcopy{color:var(--ink-soft);font-size:.9rem;margin-bottom:20px}
.as-bcard ul{list-style:none;display:grid;gap:11px;margin-top:0;padding:0}
.as-bcard li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink);line-height:1.4}
.as-bcard li::before{content:"\2713";width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ac,var(--teal-500)) 15%,#fff);color:var(--ac,var(--teal-700));display:grid;place-items:center;font-size:.64rem;font-weight:800;flex:none;margin-top:1px}

/* SECTION 2 — LIFE AT SHINE SLIDER (6 total, 4 visible, image only) */
.as-life{background:var(--paper);overflow:hidden}
.as-slider{position:relative;max-width:1200px;margin:0 auto;padding:0 28px}
.as-slider-viewport{overflow:hidden}
.as-slider-track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.as-life-card{flex:0 0 calc((100% - 3*24px)/4);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.as-life-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.as-life-img{position:relative;height:340px;flex:none;overflow:hidden;background:var(--cyan-100)}
.as-life-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.as-life-card:hover .as-life-img img{transform:scale(1.06)}
.as-life-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--teal-700);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.as-slider-nav{display:flex;justify-content:center;gap:14px;margin-top:34px;align-items:center}
.as-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--teal-700);font-size:1.3rem;cursor:pointer;display:grid;place-items:center;transition:.3s;box-shadow:var(--shadow-sm)}
.as-arrow:hover:not(:disabled){background:var(--teal-700);color:#fff;border-color:var(--teal-700);transform:translateY(-2px)}
.as-arrow:disabled{opacity:.35;cursor:not-allowed}
.as-dots{display:flex;gap:8px;align-items:center}
.as-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:.3s}
.as-dot.active{background:var(--coral);width:26px;border-radius:100px}

@media(max-width:1080px){
  .as-why-grid{grid-template-columns:1fr 1fr}
  .as-life-card{flex-basis:calc((100% - 2*24px)/3)}
}
@media(max-width:760px){
  .as-life-card{flex-basis:calc((100% - 1*16px)/2)}
  .as-slider-track{gap:16px}
	.ahero-copy {
    padding: 25px 0;
}

.ahero h1 {
    font-size: 44px;
}
	.ahero .lead {
    font-size: 16px;
  
}

}
@media(max-width:560px){
  .as-why-grid{grid-template-columns:1fr}
  .as-wrap,.as-slider{padding-left:18px;padding-right:18px}
  .as-life-card{flex-basis:100%}
	
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== great place to work recognition ===== */
.gptw{background:#fff;position:relative;overflow:hidden}
.gptw-confetti{position:absolute;inset:0;pointer-events:none;z-index:0}
.gptw-confetti span{position:absolute;left:var(--l);bottom:-6%;width:var(--s);height:var(--s);background:var(--bg);opacity:0;animation:gptwFloat var(--t) linear infinite;animation-delay:var(--d)}
.gptw-confetti span.rd{border-radius:50%}
.gptw-confetti span.sq{border-radius:2px}
@keyframes gptwFloat{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  8%{opacity:.22}
  50%{transform:translateY(-58vh) translateX(14px) rotate(160deg)}
  92%{opacity:.22}
  100%{transform:translateY(-108vh) translateX(-6px) rotate(320deg);opacity:0}
}
.gptw-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:420px}
.gptw-copy h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--teal-900);margin-bottom:18px}
.gptw-copy h2 .y{color:var(--coral)}
.gptw-copy p{color:var(--ink-soft);font-size:1.08rem;max-width:460px;line-height:1.65}
.gptw-badge{position:relative;width:min(340px,80%);aspect-ratio:1/1;margin:0 auto}
.gptw-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 40px rgba(5,59,65,.18))}
.gptw-fallback{width:100%;height:100%;filter:drop-shadow(0 22px 40px rgba(5,59,65,.18))}

@media(prefers-reduced-motion:reduce){.gptw-confetti{display:none}}
@media(max-width:860px){
  .gptw-grid{grid-template-columns:1fr;gap:38px;text-align:center;min-height:0}
  .gptw-copy p{margin:0 auto}
  .gptw-badge{width:min(280px,72%)}
  .gptw-confetti span:nth-child(even){display:none}
}