:root{
  --ink:#0A0F1C; --navy:#002768; --accent:#C8262A; --dark-red:#A90100;
  --white:#FFFFFF; --container:1240px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.display{ font-family:"Archivo Black","Archivo",sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:.98; text-wrap:balance; margin:0; }
.eyebrow{ font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--accent); }
a{ color:var(--accent); }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 40px; background:var(--accent); color:var(--white); text-decoration:none; font-family:"Archivo Black",sans-serif; font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.06em; border-radius:3px; transition:background .2s ease, transform .2s ease; }
.btn:hover{ background:var(--dark-red); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:2px solid var(--white); color:var(--white); }
.btn-ghost:hover{ background:var(--white); color:var(--ink); }

/* Image placeholder */
.img-ph{ position:relative; width:100%; background:repeating-linear-gradient(-45deg,#1a2338 0px,#1a2338 12px,#141c2e 12px,#141c2e 24px); border:2px dashed rgba(255,255,255,.28); border-radius:6px; display:flex; align-items:center; justify-content:center; padding:32px; min-height:260px; }
.img-ph.light{ background:repeating-linear-gradient(-45deg,#eee9dd 0px,#eee9dd 12px,#e5dfcf 12px,#e5dfcf 24px); border-color:rgba(10,15,28,.25); }
.img-ph .tag{ max-width:520px; text-align:center; }
.img-ph .tag .lab{ display:inline-block; font-family:"Archivo",sans-serif; font-weight:800; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent); padding:5px 12px; border-radius:2px; margin-bottom:14px; }
.img-ph .tag p{ margin:0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82); font-weight:600; }
.img-ph.light .tag p{ color:rgba(10,15,28,.72); }

/* Hero */
.emp-hero{ background:var(--ink); color:var(--white); padding:140px 0 100px; position:relative; overflow:hidden; }
.emp-hero h1{ font-size:clamp(44px,7vw,104px); color:var(--white); margin:16px 0 0; }
.emp-hero h1 .red{ color:var(--accent); }
.emp-hero .sub{ font-size:20px; line-height:1.6; color:rgba(255,255,255,.82); max-width:640px; margin:28px 0 40px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

section{ padding:104px 0; }
.sec-white{ background:var(--white); color:var(--ink); }
.sec-ink{ background:var(--ink); color:var(--white); }
.sec-navy{ background:var(--navy); color:var(--white); }
.sec-ink h2, .sec-navy h2{ color:var(--white); }
.sec-white h2{ color:var(--ink); }
h2.display{ font-size:clamp(34px,5vw,60px); }

.lead{ font-size:19px; line-height:1.7; max-width:720px; }
.sec-white .lead{ color:#333; }
.sec-ink .lead, .sec-navy .lead{ color:rgba(255,255,255,.85); }

/* Values grid */
.val-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.val-card{ background:#10192B; border:1px solid rgba(255,255,255,.14); padding:32px 28px; border-radius:4px; }
.val-card .num{ font-family:"Archivo Black",sans-serif; font-size:32px; color:var(--accent); margin:0 0 12px; }
.val-card h3{ font-family:"Archivo Black",sans-serif; font-size:19px; color:var(--white); margin:0 0 10px; }
.val-card p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.72); }

/* Perks */
.perk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 40px; margin-top:48px; }
.perk{ display:flex; gap:16px; align-items:flex-start; }
.perk .mark{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Archivo Black",sans-serif; font-size:16px; }
.perk h3{ font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; margin:2px 0 6px; }
.sec-white .perk p{ color:#444; }
.perk p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.75); }

/* Roles */
.role{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:28px 32px; border:1px solid rgba(255,255,255,.16); border-radius:6px; margin-bottom:16px; background:#10192B; }
.role h3{ font-family:"Archivo Black",sans-serif; font-size:22px; color:var(--white); margin:0 0 8px; }
.role .meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; font-weight:700; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.04em; }
.role p{ margin:12px 0 0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.72); max-width:640px; }

/* Process */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.step .n{ font-family:"Archivo Black",sans-serif; font-size:48px; color:rgba(255,255,255,.18); line-height:1; margin-bottom:12px; }
.sec-white .step .n{ color:rgba(10,15,28,.12); }
.step h3{ font-family:"Archivo Black",sans-serif; font-size:18px; margin:0 0 8px; }
.step p{ margin:0; font-size:14.5px; line-height:1.6; }
.sec-white .step p{ color:#555; }

/* CTA */
/* closing CTA lives inside the light Hiring Process section (the FAQ band after it is dark) */
.emp-cta{ margin-top:clamp(72px,9vw,120px); text-align:center; }
.emp-cta h2{ font-family:"Archivo Black",sans-serif; font-size:clamp(32px,5vw,56px); text-transform:uppercase; color:var(--ink); margin:0 0 20px; }
.emp-cta p{ font-size:18px; color:#333; max-width:560px; margin:0 auto 40px; line-height:1.6; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .val-grid,.step-grid{ grid-template-columns:1fr 1fr; }
  .perk-grid{ grid-template-columns:1fr; }
  .role{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .val-grid,.step-grid{ grid-template-columns:1fr; }
  section{ padding:72px 0; }
}

/* Employment-page styles (moved from inline style attributes) */
.emp-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.sec-white.emp-bg-texture{ background-image:url('../../assets/white-engineering-background.webp'); background-size:cover; background-position:center; }
h2.display.emp-mt16-24{ margin:16px 0 24px; }
h2.display.emp-mt16-0{ margin:16px 0 0; }
h2.display.emp-mt16-40{ margin:16px 0 40px; }
.ai-role-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:24px; }
.ai-role-card{ background:#10192B; border:1px solid rgba(255,255,255,.14); padding:32px; border-radius:4px; }
.ai-role-card h3{ font-family:'Archivo Black',sans-serif; font-size:20px; color:var(--white); margin:0 0 8px; }
.ai-role-card .pay{ font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px; }
.ai-role-card .desc{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.75); margin:0 0 16px; }
.ai-role-card .tech{ font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.ai-role-card .btn{ margin-top:20px; font-size:12px; padding:12px 24px; }
.step p.emp-fw700{ font-weight:700; }
.ai-roles{ margin-top:clamp(72px,9vw,120px); }
