/* INNO Site — job pages, the careers list and the thank-you pages. Loaded after inno.css; uses its
   tokens (--navy, --ink, --gray, --bg-gray, --font, --font-h, --font-n, --r) and its roles. */

/* ================= shared ================= */
.pg-eyebrow{display:block;font:500 12px/1 var(--font-n);letter-spacing:.12em;text-transform:uppercase;color:var(--velocity);margin-bottom:16px}
.pg-h1{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.9;font-size:clamp(40px,5.4vw,76px);margin:0 0 24px;color:var(--ink)}
.dark .pg-h1{color:#fff}
.pg-lead{font-family:var(--font);font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#3A4166;max-width:34em;margin:0}
.dark .pg-lead{color:rgba(255,255,255,.86)}
.meta-chips{display:flex;flex-wrap:wrap;gap:8px}
.meta-chips span{font:500 11px/1 var(--font-n);letter-spacing:.1em;text-transform:uppercase;color:#3A4166;padding:8px 11px;border-radius:999px;border:1px solid rgba(1,9,46,.12);background:#fff;white-space:nowrap}
.meta-chips span.is-dep{color:var(--blue);border-color:rgba(2,50,255,.22)}
.dark .meta-chips span{color:#C6CFEF;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.page-top{padding-top:150px}
@media(max-width:720px){.page-top{padding-top:110px}.pg-h1{font-size:clamp(34px,10vw,44px)}.pg-lead{font-size:18px}}

/* ================= job hero ================= */
.job-hero{background:#fff;padding:150px 0 80px;position:relative;overflow:hidden}
.job-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.job-hero .meta-chips{margin-bottom:24px}
.job-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:36px}
/* the blade sits INSIDE a square box: absolutely positioned and object-fit:contain, so a tall
   blade (Aggressive Media, Creative) cannot stretch the hero to twice its height */
.job-art{position:relative;aspect-ratio:1;max-width:420px;margin-inline:auto;width:100%}
.job-art::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(0,160,255,.22),rgba(2,50,255,.08) 55%,transparent 75%);filter:blur(6px)}
.job-art img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,160,255,.28))}
@media(max-width:1023px){.job-hero .wrap{grid-template-columns:1fr;gap:36px}.job-art{max-width:300px;order:-1}}
@media(max-width:720px){.job-hero{padding:110px 0 56px}.job-actions .btn{width:100%;justify-content:center}}

/* ================= job body ================= */
.job-main{background:var(--bg-gray);padding:80px 0 100px}
.job-main .wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start}
.job-rail{position:sticky;top:110px}
.glance{background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);padding:26px 26px 24px;box-shadow:0 20px 60px rgba(1,9,46,.05)}
.glance .pg-eyebrow{color:var(--gray);margin-bottom:18px}
.glance dl{margin:0;display:grid;gap:14px}
.glance dt{font:500 11px/1 var(--font-n);letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.glance dd{margin:0;font:600 15px/1.35 var(--font);color:var(--ink)}
.glance .btn{width:100%;justify-content:center;margin-top:22px}
.glance .closed{margin-top:18px;font-size:14px;color:var(--gray)}
.job-content{max-width:62ch}
.job-content h2{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.95;font-size:clamp(24px,2.5vw,32px);color:var(--ink);margin:56px 0 18px}
.job-content h2:first-child{margin-top:0}
.job-content h3{font:600 18px/1.3 var(--font);color:var(--ink);margin:30px 0 10px}
.job-content p{font-size:17px;line-height:1.65;color:#3A4166;margin:0 0 16px}
.job-content p b,.job-content p strong,.job-content li b,.job-content li strong{color:var(--ink);font-weight:600}
.job-content ul,.job-content ol{margin:0 0 22px;padding:0;list-style:none}
.job-content li{position:relative;padding-left:28px;margin:0 0 10px;font-size:16.5px;line-height:1.6;color:#3A4166}
.job-content li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#0232FF,#00A0FF)}
.job-content ol{counter-reset:n}
.job-content ol li::before{background:none;content:counter(n);counter-increment:n;font:700 12px/12px var(--font-n);color:var(--blue);top:.45em}
@media(max-width:1023px){.job-main .wrap{grid-template-columns:1fr;gap:40px}.job-rail{position:static}.glance dl{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.job-main{padding:56px 0 70px}.job-content p,.job-content li{font-size:16px}}

/* ================= application form (reuses .cta / .lead-form) ================= */
.apply .wrap{max-width:760px}
.apply h2{margin-bottom:16px}
.apply .apply-intro{color:#C6CFEF;font-size:17px;line-height:1.6;margin:0 auto 40px;max-width:36em}
.apply .lead-form{max-width:none;text-align:left}
.apply .lead-form textarea{grid-column:span 2;font-family:var(--font);font-size:15px;padding:13px 18px;border-radius:14px;border:1.5px solid transparent;background:#fff;color:var(--ink);outline:none;min-height:110px;resize:vertical}
.apply .lead-form textarea:focus{border-color:var(--velocity);box-shadow:0 0 0 3px rgba(0,160,255,.14)}
.apply .lead-form textarea::placeholder{color:#9AA1BF}
.cv-field{grid-column:span 2;position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.03);color:#C6CFEF;cursor:pointer;transition:.2s}
.cv-field:hover,.cv-field:focus-within{border-color:var(--velocity);background:rgba(0,160,255,.06)}
.cv-field.has-file{border-style:solid;border-color:rgba(0,246,255,.5)}
.cv-field input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cv-field svg{flex:none;width:22px;height:22px;fill:none;stroke:#7FC4FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-field .cv-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.cv-field .cv-label{font:600 15px/1.2 var(--font);color:#fff}
.cv-field .cv-hint{font:400 12.5px/1.3 var(--font);color:#9BA6CF}
.cv-field .cv-name{font:500 13px/1.3 var(--font-n);color:#00F6FF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-field .cv-name:empty{display:none}
.apply .consent{grid-column:span 2;font-size:12.5px;line-height:1.5;color:#8B94BC;margin:0;text-align:center}
.apply .consent a{color:#C6CFEF}
@media(max-width:720px){.apply .lead-form textarea,.cv-field,.apply .consent{grid-column:span 1}}

/* ================= careers list ================= */
.careers-hero{background:#fff;padding:150px 0 70px}
.careers-hero .wrap{max-width:900px}
.jobs{background:var(--bg-gray);padding:70px 0 100px}
.jobs .wrap{max-width:900px}
.jobs-list{display:grid;gap:14px}
.job-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:center;background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);padding:28px 30px;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.job-card:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(1,9,46,.08)}
.job-card h3{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.95;font-size:clamp(22px,2.2vw,28px);color:var(--ink);margin:0 0 12px}
.job-card .meta-chips{margin-bottom:12px}
.job-card p{margin:0;font-size:15.5px;line-height:1.55;color:#3A4166}
.job-card .btn{white-space:nowrap}
.jobs-empty{background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);padding:40px;text-align:center;color:#3A4166}
@media(max-width:720px){.careers-hero{padding:110px 0 44px}.jobs{padding:44px 0 70px}.job-card{grid-template-columns:1fr;padding:22px}.job-card .btn{width:100%;justify-content:center}}

/* ================= thank-you ================= */
.thanks{display:flex;align-items:center;padding:clamp(140px,17vh,190px) 0 clamp(90px,12vh,120px);position:relative;overflow:hidden}
.thanks .wrap{max-width:840px}
.thanks .pg-lead{max-width:36em;margin-bottom:44px}
/* the headline reads as two lines: the plain half on top, the gradient half under it */
.thanks .pg-h1 .grad{display:block}
.thanks .steps{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.thanks .steps li{position:relative;border-radius:var(--r);padding:22px 20px 20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.thanks .steps .n{display:block;font:700 24px/1 var(--font-n);letter-spacing:-.03em;background:var(--grad-dark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:14px}
.thanks .steps b{display:block;font:600 16px/1.3 var(--font);color:#fff;margin-bottom:6px}
.thanks .steps span{font:400 14px/1.5 var(--font);color:#C6CFEF}
.thanks .actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.thanks .actions .link{color:#C6CFEF}
.thanks .thanks-art{position:absolute;right:-8%;top:50%;width:min(52vw,720px);transform:translateY(-50%);opacity:.08;pointer-events:none}
@media(max-width:720px){.thanks{padding:110px 0 70px;min-height:0}.thanks .steps{grid-template-columns:1fr}.thanks .actions .btn{width:100%;justify-content:center}.thanks .thanks-art{width:120%;right:-40%;top:auto;bottom:-10%;transform:none}}

/* ================= legal (privacy policy) =================
   A reading page, not a marketing page: one column at a comfortable measure, the table allowed
   to scroll on its own on a phone rather than squeezing four columns into 390px. */
.legal{padding:calc(var(--hd-h,84px) + 72px) 0 96px}
.legal .wrap{max-width:820px}
.legal-head{margin-bottom:48px}
.legal-when{font:500 13px/1.4 var(--font-n);letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin:0 0 20px}
.legal-sec{margin-bottom:40px}
.legal-sec h2{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(22px,2.4vw,30px);line-height:1;margin:0 0 14px;color:var(--ink)}
.legal-sec p{font-family:var(--font);font-size:17px;line-height:1.62;color:var(--ink);margin:0 0 12px;max-width:70ch}
.legal-sec p b{font-weight:700}
.legal-sec a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 14px;
  border:1px solid rgba(1,9,46,.10);border-radius:14px}
.legal-t{width:100%;border-collapse:collapse;font-family:var(--font);font-size:15px;min-width:560px}
.legal-t th{text-align:start;font:500 11.5px/1 var(--font-n);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);padding:13px 16px;background:var(--bg-gray);white-space:nowrap}
.legal-t td{padding:13px 16px;border-top:1px solid rgba(1,9,46,.08);vertical-align:top;line-height:1.5;color:var(--ink)}
.legal-t code{font-family:var(--font-n);font-size:13px;color:var(--blue);white-space:nowrap}
[dir=rtl] .legal-t th,[dir=rtl] .legal-t td{text-align:right}
[dir=rtl] .legal-t th{letter-spacing:0}
@media(max-width:720px){
  .legal{padding:calc(var(--hd-h,72px) + 40px) 0 64px}
  .legal-sec p{font-size:16px}
  .legal-t{font-size:14px}
}

/* the one legal link in the footer row — the same weight as the line it sits in */
footer .f-legal{color:inherit;opacity:.72;text-decoration:underline;text-underline-offset:2px}
footer .f-legal:hover{opacity:1}