/* 
Work With Us / Join Us Page
Path: /careers/work-with-us/core/join-us.css
*/


/* ─────────────────────────────────────────────
1. CUSTOM FONTS
───────────────────────────────────────────── */

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueRegular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Uhudscript';
src: url('/-global-assets/fonts/Uhudscript-Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ─────────────────────────────────────────────
2. CSS VARIABLES & KEYFRAMES
───────────────────────────────────────────── */

:root {
--navy: #02253d;
--black: #00080e;
--panel-black: #000000;
--cyan: #037e96;
--text: #ffffff;
--muted: rgba(255, 255, 255, 0.78);
--line: rgba(3, 126, 150, 0.75);
--option-bg: rgba(7, 39, 63, 0.92);
--option-border: rgba(86, 141, 172, 0.38);
--top-gradient: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
}

@keyframes gradient {
0%   { background-position: 0% 50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}


/* ─────────────────────────────────────────────
3. BASE RESET
───────────────────────────────────────────── */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
height: 100%;
}

body.join-us-page {
position: relative;
isolation: isolate;
height: 100dvh;
overflow: hidden;
font-family: 'Galano', sans-serif;
color: var(--text);
background:
radial-gradient(62% 70% at 70% 45%, rgba(2, 37, 61, 0.96) 0%, rgba(2, 37, 61, 0.58) 44%, transparent 78%),
linear-gradient(108deg, #00080e 0%, #00111f 20%, #02253d 28%, #02253d 58%, #00080e 100%);
overflow-x: hidden;
}

body.join-us-page::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(0, 8, 14, 0.14), rgba(0, 8, 14, 0.24)),
url('/careers/work-with-us/images/join-our-team.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}

body.join-us-page a {
color: inherit;
text-decoration: none;
}

body.join-us-page button {
font: inherit;
}


/* ─────────────────────────────────────────────
4. TOP GRADIENT BAR
───────────────────────────────────────────── */

.gradient-background {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 10px;
background: var(--top-gradient);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
}


/* ─────────────────────────────────────────────
5. MAIN PAGE LAYOUT
───────────────────────────────────────────── */

.join-us-main {
width: 100%;
height: 100dvh;
overflow: hidden;
padding: 120px 90px 90px;
display: flex;
align-items: center;
justify-content: center;
}

.join-us-layout {
width: 100%;
max-width: 1440px;
min-height: auto;
margin: 0 auto;
display: grid;
/*grid-template-columns: 1fr 540px;*/
grid-template-rows: auto auto;
align-items: center;
column-gap: 96px;
}

.join-us-copy {
grid-column: 1;
grid-row: 1;
align-self: end;
}

.join-us-card {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}

.join-us-support {
grid-column: 1;
grid-row: 2;
align-self: start;
margin-top: 34px;
position: relative;
}


/* ─────────────────────────────────────────────
6. LEFT SIDE CONTENT
───────────────────────────────────────────── */

.join-us-eyebrow {
width: fit-content;
min-width: 124px;
margin: 0 0 40px;
padding: 12px 24px 10px;
border-radius: 7px;
font-size: 16px;
font-weight: 700;
line-height: 1;
text-align: center;
color: #062333;
background: var(--top-gradient);
}

.join-us-title {
display: flex;
flex-direction: column;
gap: 18px;
font-size: 48px;
font-weight: 400;
line-height: 1.12;
letter-spacing: 0;
}

.join-us-title span {
white-space: nowrap;
}

.join-us-title-gradient {
display: block;
max-width: 100%;
font-size: 48px;
font-weight: 700;
line-height: 1.02;
background: var(--top-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}


/* ─────────────────────────────────────────────
7. SUPPORT TEXT AND PATH IMAGE
───────────────────────────────────────────── */

.join-us-description {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 620px;
font-size: 24px;
font-weight: 500;
line-height: 1.35;
color: #ffffff;
}

.join-us-path-line{

display:block;
width:620px;
max-width:56vw;
height:110px;
margin-top:28px;
margin-left:-90px;
overflow:visible;
pointer-events:none;
user-select:none;
}


/* ─────────────────────────────────────────────
8. RIGHT SIDE CARD
───────────────────────────────────────────── */

.join-us-card {
width: 100%;
max-width: 540px;
min-height: 410px;
padding: 1px;
border-radius: 18px;
background: var(--cyan);
box-shadow: 0 0 20px var(--cyan);
}

.join-us-card-content {
width: 100%;
min-height: 408px;
padding: 36px 36px;
border-radius: 17px;
background: linear-gradient(112deg, #000000 30%, #02253d 69%);
}

.join-us-card-header {
margin-bottom: 30px;
}

.join-us-card-title {
font-family: 'Uhudscript', cursive;
font-size: 42px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
background: var(--top-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.join-us-card-text {
margin-top: 10px;
font-size: 17px;
font-weight: 500;
line-height: 1.3;
color: var(--text);
}


/* ─────────────────────────────────────────────
9. CARD OPTIONS
───────────────────────────────────────────── */

.join-us-options {
display: flex;
flex-direction: column;
gap: 14px;
}

.join-us-option {
width: 100%;
min-height: 54px;
display: grid;
grid-template-columns: 36px 1fr 20px;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1px solid var(--option-border);
border-radius: 7px;
color: var(--text);
background: var(--option-bg);
cursor: pointer;
text-align: left;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.join-us-option:hover,
.join-us-option:focus-visible,
.join-us-option.is-active {
color: #062333;
border-color: transparent;
background: var(--top-gradient);
outline: none;
}

.join-us-option:focus-visible {
box-shadow: 0 0 0 3px rgba(6, 209, 229, 0.35);
}

.join-us-option:hover {
transform: translateY(-1px);
}

.join-us-option-icon,
.join-us-option-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
}

.join-us-option-icon {
width: 32px;
height: 32px;
font-size: 20px;
background: var(--top-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.join-us-option-arrow {
font-size: 18px;
color: var(--text);
}

.join-us-option:hover .join-us-option-icon,
.join-us-option:hover .join-us-option-arrow,
.join-us-option:focus-visible .join-us-option-icon,
.join-us-option:focus-visible .join-us-option-arrow,
.join-us-option.is-active .join-us-option-icon,
.join-us-option.is-active .join-us-option-arrow {
color: #062333;
background: none;                     
-webkit-text-fill-color: #062333;
}

.join-us-option-label {
min-width: 0;
font-size: 17px;
font-weight: 500;
line-height: 1.2;
white-space: normal;
}


/* ─────────────────────────────────────────────
10. JS BACK BUTTON
───────────────────────────────────────────── */

.join-us-back {
width: fit-content;
margin: 0 0 22px;
padding: 0;
border: 0;
display: inline-flex;
align-items: center;
gap: 6px;
color: #64eda8;
background: transparent;
cursor: pointer;
font-size: 16px;
font-weight: 500;
}

.join-us-back:hover,
.join-us-back:focus-visible {
color: #02bcdd;
outline: none;
}


/* ─────────────────────────────────────────────
11. MAX WIDTH: 1100px
───────────────────────────────────────────── */

@media (max-width: 1100px) {
.join-us-main {
padding: 110px 57px 80px;
}

.join-us-layout {
grid-template-columns: 1fr 420px;
column-gap: 0px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 44px;
}

.join-us-card-content {
padding: 34px;
}

.join-us-card-title {
font-size: 26px;
}

.join-us-card-text {
font-size: 16px;
}

.join-us-option-label {
font-size: 16px;
}
}


/* ─────────────────────────────────────────────
12. MAX WIDTH: 1024px
───────────────────────────────────────────── */

@media (max-width: 1024px) {
.join-us-main {
padding: 104px 86px 76px;
}

.join-us-layout {
grid-template-columns: 1fr 440px;
column-gap: 40px;
}

.join-us-eyebrow {
margin-bottom: 30px;
}

.join-us-description {
font-size: 21px;
}

.join-us-options {
gap: 12px;
}

.join-us-option {
min-height: 52px;
}
}


/* ─────────────────────────────────────────────
13. TABLET: 769px TO 1024px
───────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {

.join-us-layout {
grid-template-columns: minmax(0, 1fr) 312px;
column-gap: 12px;
}
.join-us-title,
.join-us-title-gradient {
font-size: 38px;
}

.join-us-card {
max-width: 420px;
min-height: 380px;
}

.join-us-card-content {
min-height: 378px;
padding: 30px;
}

.join-us-card-title {
font-size: 24px;
}

.join-us-card-text {
font-size: 16px;
}

.join-us-option-label {
font-size: 16px;
}

.join-us-path-line {
width: 470px;
max-width: 48vw;
}

/*.join-us-copy{*/
/*  margin: 0 -5px;*/
/*}*/
}


/* ─────────────────────────────────────────────
14. MAX WIDTH: 768px
Mobile and small tablet — scroll allowed
───────────────────────────────────────────── */

@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
body.join-us-page::before {
background-image:
linear-gradient(rgba(0, 8, 14, 0.14), rgba(0, 8, 14, 0.24)),
url('/careers/work-with-us/images/join-our-team-background-mobile.webp');
}
}

@media (max-width: 768px) {
body.join-us-page {
height: auto;
overflow-y: auto;
overflow-x: hidden;
background-attachment: fixed; 
}

.join-us-title{
margin-left: 4px;
}

.join-us-main {
height: auto;
min-height: 100dvh;
overflow: visible;
padding: 96px 28px 76px;
align-items: flex-start;
}

.join-us-layout {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 28px;
}

.join-us-copy {
order: 1;
width: 100%;
}

.join-us-card {
order: 3;
width: 100%;
max-width: none;
min-height: 0;
}
.join-us-card, .join-us-layout{
margin: 30px 20px;
}

.join-us-support {
order: 2;
width: 100%;
margin-top: 0;
margin-left: 2px;
}

.join-us-eyebrow {
min-width: 104px;
margin-bottom: 26px;
padding: 10px 18px 9px;
font-size: 14px;
margin-left: 2px;
display: none;
}

.join-us-title,
.join-us-title-gradient {
gap: 12px;
font-size: 42px;
line-height: 1.08;
margin-left: 2px;
}

.join-us-title span {
white-space: normal;
}

.join-us-card-content {
min-height: 0;
padding: 30px 26px;
}

.join-us-card-title {
font-size:40px !important;
}

.join-us-card-text {
font-size:20px !important;
}

.join-us-options {
gap: 14px;
}

.join-us-option {
min-height: 54px;
grid-template-columns: 36px 1fr 18px;
gap: 14px;
padding: 12px 16px;
}

.join-us-option-icon {
width: 32px;
height: 32px;
font-size: 20px;
}

.join-us-option-arrow {
font-size: 18px;
}

.join-us-option-label {
font-size: 17px;
}

.join-us-description {
font-size: 22px;
}

.join-us-path-line {
width:100%;
height:90px;
height:auto;
    /* aspect-ratio: 700 / 90; */
max-width:560px;
margin-top:24px;
margin-left:-28px;
}
}


/* ─────────────────────────────────────────────
15. MAX WIDTH: 640px
───────────────────────────────────────────── */

@media (max-width: 640px) {
.join-us-main {
padding-left: 22px;
padding-right: 22px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 38px;
}

.join-us-card-content {
padding: 28px 22px;
}

.join-us-card-header {
margin-bottom: 22px;
}

.join-us-options {
gap: 12px;
}
}


/* ─────────────────────────────────────────────
16. MAX WIDTH: 480px
───────────────────────────────────────────── */

@media (max-width: 480px) {
.join-us-main {
padding: 86px 20px 66px;
}

.join-us-eyebrow {
margin-bottom: 22px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 34px;
}

.join-us-card {
border-radius: 15px;
}

.join-us-card-content {
border-radius: 14px;
padding: 24px 18px;
}

.join-us-card-title {
font-size: 30px!important;
}

.join-us-card-text {
margin-top: 10px;
font-size: 16px;
}

.join-us-option {
min-height: 52px;
grid-template-columns: 30px 1fr 16px;
padding: 12px 14px;
}

.join-us-option-label {
font-size: 16px;
}

.join-us-description {
font-size: 20px;
}

.join-us-path-line {
margin-left: -20px;
}
}


/* ─────────────────────────────────────────────
17. MAX WIDTH: 360px - breakpoint for small mobiles
───────────────────────────────────────────── */

@media (max-width: 360px) {


.join-us-main {
padding-top: 116px;
padding-left: 16px;
padding-right: 16px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 30px;
}

.join-us-card-content {
padding: 25px 22px;

}

.join-us-card-title {
font-size: 23px;
}

.join-us-option {
gap: 10px;
padding-left: 12px;
padding-right: 12px;
}

.join-us-option-label {
font-size: 15px;
}

.join-us-description {
font-size: 18px;
}

.join-us-path-line {
margin-left: -16px;
}
.join-us-layout, .join-us-card{
margin: 0 10px;
}
}


/* ─────────────────────────────────────────────
18. SHORT SCREEN HEIGHT: ≤ 700px
───────────────────────────────────────────── */

@media (max-height: 700px) {
.join-us-main {
padding-top: 82px;
padding-bottom: 54px;
}

.join-us-eyebrow {
margin-bottom: 24px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 38px;
gap: 14px;
}

.join-us-support {
margin-top: 24px;
}

.join-us-description {
font-size: 20px;
}

.join-us-path-line {
margin-top: 22px;
}

.join-us-card-content {
padding-top: 30px;
padding-bottom: 30px;
}

.join-us-options {
gap: 12px;
}

.join-us-option {
min-height: 50px;
}
}


/* ─────────────────────────────────────────────
19. MOBILE + SHORT HEIGHT: ≤ 768px and ≤ 700px
───────────────────────────────────────────── */

@media (max-width: 768px) and (max-height: 700px) {
.join-us-main {
padding-top: 72px;
padding-bottom: 44px;
}

.join-us-layout {
gap: 20px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 32px;
gap: 8px;
}

.join-us-card-content {
padding: 20px 18px;
}

.join-us-card-header {
margin-bottom: 16px;
}

.join-us-card-title {
font-size: 22px;
}

.join-us-card-text {
font-size: 14px;
}

.join-us-options {
gap: 10px;
}

.join-us-option {
min-height: 48px;
}

.join-us-description {
font-size: 20px;
}

.join-us-path-line {
margin-top: 14px;
}
}


/* ─────────────────────────────────────────────
20. EXACT 768px + SHORT HEIGHT
───────────────────────────────────────────── */

@media (width: 768px) and (max-height: 700px) {
.join-us-main {
padding: 76px 34px 50px;
}

.join-us-title,
.join-us-title-gradient {
font-size: 38px;
}

.join-us-card-content {
padding: 24px;
}

.join-us-card-title {
font-size: 26px;
}

.join-us-option-label {
font-size: 16px;
}
}


@media (width: 1024px) and (height: 600px) {
.join-us-layout {
grid-template-columns: unset;
column-gap: 20px;
margin-bottom: 25px;
}
}

.begin-here{
font-family: 'Uhudscript', cursive;
font-size: 42px;
font-weight: 400;
line-height: 1.1;
background: var(--top-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
margin-top: 8px;
}

@media (max-width:768px){
.begin-here{
font-size: 38px;
}
}

.begin-here span{
display:inline;
}

@media (max-width:768px){
.begin-here span{
display:block;
}
}