/* ===== SHARED SUBPAGE COMPONENTS =====
   Reusable styles for Careers, Contact, Security, and any future subpages.
   ===== */

/* — Subpage Hero — */
.subpage-hero{
  padding:160px 0 100px;
  background:radial-gradient(circle at 10% 20%,rgba(86,137,255,.25),transparent 40%),
             radial-gradient(circle at 80% 0,rgba(232,255,100,.2),transparent 45%),
             var(--indigo);
  color:#fff;
  position:relative;overflow:hidden;
}
.subpage-hero .section-label{color:var(--chartreuse)}
.subpage-hero .section-label::before{background:var(--chartreuse)}
.subpage-hero h1{
  font-weight:800;font-size:clamp(34px,5vw,56px);
  line-height:1.08;max-width:720px;margin-bottom:18px;
}
.hero-copy{
  font-size:18px;font-weight:300;line-height:1.8;
  color:rgba(255,255,255,.78);max-width:640px;margin-bottom:36px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px}

/* — Stat Cards (hero stats) — */
.hero-stats{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.stat-card{
  padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  background:rgba(255,255,255,.04);backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25)}
.stat-card span{display:block;font-size:22px;font-weight:700;font-family:var(--font-heading);margin-bottom:8px;color:var(--chartreuse)}
.stat-card p{font-size:15px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.7}

/* — Content Section (white bg, used by open-roles, practices, form sections) — */
.subpage-content{background:var(--white);padding:120px 0;position:relative}
.subpage-content-headline{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px;margin-bottom:52px}

/* — Roles / Cards Grid (shared by Careers + Security) — */
.roles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.role-card{
  background:var(--white);
  border:1px solid rgba(20,20,64,.07);
  border-radius:var(--radius);
  padding:36px 30px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.role-card:hover{
  transform:translateY(-6px);
  border-color:rgba(38,55,244,.2);
  box-shadow:0 20px 50px rgba(38,55,244,.08),0 6px 16px rgba(20,20,64,.04);
}
.role-card::before{
  content:'';position:absolute;top:-1px;right:-1px;
  width:0;height:0;
  border-top:2.5px solid var(--system-blue);border-right:2.5px solid var(--system-blue);
  border-top-right-radius:var(--radius);
  transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1);
}
.role-card:hover::before{width:36px;height:36px}
.role-card .card-glow{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--system-blue),var(--reverse-blue),var(--chartreuse));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.role-card:hover .card-glow{transform:scaleX(1)}
.role-location{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--system-blue)}
.role-card h3{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--indigo)}
.role-card p{font-size:14px;font-weight:300;color:rgba(20,20,64,.55);line-height:1.75}
.role-card ul{list-style:disc;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.role-card li{font-size:14px;font-weight:300;color:rgba(20,20,64,.55);line-height:1.6}
.role-cta{
  margin-top:auto;font-weight:500;font-size:13px;
  color:var(--system-blue);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s,color .2s;
}
.role-cta:hover{gap:12px;color:var(--system-blue)}

/* — Callout Section — */
.subpage-callout{background:var(--indigo);position:relative;overflow:hidden}
.subpage-callout .cta-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(86,137,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(86,137,255,.06) 1px,transparent 1px);
  background-size:60px 60px;
  animation:ctaGridShift 20s linear infinite;
}
@keyframes ctaGridShift{
  0%{transform:translate(0,0)}
  100%{transform:translate(60px,60px)}
}
.callout-card{
  text-align:center;
  padding:80px 44px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  position:relative;
  color:#fff;
}
.callout-card::before{
  content:'';position:absolute;top:-1px;right:-1px;
  width:70px;height:70px;
  border-top:3px solid var(--reverse-blue);border-right:3px solid var(--reverse-blue);
  border-top-right-radius:var(--radius);
  animation:calloutCornerPulse 4s ease-in-out infinite;
}
.callout-card::after{
  content:'';position:absolute;bottom:-1px;left:-1px;
  width:70px;height:70px;
  border-bottom:3px solid var(--reverse-blue);border-left:3px solid var(--reverse-blue);
  border-bottom-left-radius:var(--radius);
  animation:calloutCornerPulse 4s ease-in-out infinite 2s;
}
@keyframes calloutCornerPulse{
  0%,100%{opacity:.4}
  50%{opacity:1}
}
.callout-card h2{font-weight:800;font-size:clamp(30px,4.2vw,48px);margin-bottom:18px}
.callout-card p{font-size:17px;font-weight:300;color:rgba(255,255,255,.6);max-width:500px;margin:0 auto 40px;line-height:1.8}

/* — Form Styles — */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:1.5px;
  color:var(--indigo);
}
.form-input{
  width:100%;padding:14px 16px;
  border:1px solid rgba(20,20,64,.12);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:15px;font-weight:400;
  color:var(--indigo);
  background:var(--white);
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.form-input::placeholder{color:rgba(20,20,64,.3);font-weight:300}
.form-input:focus{
  border-color:var(--system-blue);
  box-shadow:0 0 0 3px rgba(38,55,244,.08);
}
.form-input-invalid{
  border-color:var(--burnt-orange);
  box-shadow:0 0 0 3px rgba(223,109,78,.1);
}
.form-input-invalid:focus{
  border-color:var(--burnt-orange);
  box-shadow:0 0 0 3px rgba(223,109,78,.15);
}
.form-textarea{resize:vertical;min-height:120px}
.form-error{
  font-size:13px;font-weight:400;color:var(--burnt-orange);
  min-height:18px;
}

/* — Success State — */
.form-success{
  text-align:center;padding:40px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.form-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(34,197,94,.1);color:#16a34a;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:500;
}
.form-success h3{
  font-weight:700;font-size:22px;color:var(--indigo);
}
.form-success p{
  font-size:15px;font-weight:300;line-height:1.75;
  color:rgba(20,20,64,.6);max-width:360px;
}

/* — Responsive — */
@media(max-width:900px){
  .roles-grid{grid-template-columns:1fr}
  .subpage-content-headline{flex-direction:column}
}
@media(max-width:640px){
  .subpage-hero{padding:120px 0 80px}
  .hero-cta .btn{width:100%;justify-content:center}
  .callout-card{padding:32px}
}