/* ==========================================================================
   assets/careers/n1.css · CAREERS ROUND 2 · OPTION 1 · "ROWS" — 2026-09-28
   Mindset: one clear list, one action. The five roles are full-width rows in
   the homepage's Why Choose Us grammar (pale-blue row, white picture tile,
   blue caps kicker, bold title) with a solid Apply on each. Apply opens the
   application below as nine rows in the homepage FAQ grammar: a numbered
   badge, a title, its state (Required / Optional / Complete) and a +/- key.
   Also: why-us as cobalt-plate cards, the company as the homepage's
   Company Snapshot (the real nameplate photo), and the FAQ rows.
   ========================================================================== */

/* ---- open roles: five rows ----------------------------------------------- */
#roles.n1-roles .n1-list{ display:grid; gap:10px; }
#roles.n1-roles .n1-row{
  display:grid; grid-template-columns:minmax(220px, 280px) minmax(0,1fr) auto; align-items:center; gap:clamp(20px, 2.6vw, 40px);
  padding:14px clamp(18px, 2.4vw, 32px) 14px 14px; border-radius:4px; background:#E6EEF9;
  scroll-margin-top:calc(var(--barh, 104px) + 12px);
}
#roles.n1-roles .n1-pic{ padding:10px; border-radius:4px; background:#FFFFFF; }
#roles.n1-roles .n1-kick{ margin:0; font-size:12px; line-height:16px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:#0760C6; }
#roles.n1-roles .n1-t{ margin:6px 0 0; font-size:clamp(20px, 1.7vw, 25px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:#0E1E35; }
#roles.n1-roles .n1-s{ margin:8px 0 0; max-width:62ch; font-size:16px; line-height:1.55; color:#34414F; }
#roles.n1-roles .n1-works{ margin:10px 0 0; font-size:14.5px; line-height:1.5; color:#24364F; }
#roles.n1-roles .n1-works b{ margin-right:8px; color:#004594; font-weight:800; }
#roles.n1-roles .n1-go{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 24px; border-radius:6px;
  background:#0760C6; color:#FFFFFF; font-size:16px; font-weight:800; text-decoration:none; white-space:nowrap;
  transition:background-color .15s;
}
#roles.n1-roles .n1-go:hover{ background:#004EA6; }
#roles.n1-roles .n1-go:focus-visible{ outline:2px solid #003F8A; outline-offset:3px; }
@media (max-width:980px){
  #roles.n1-roles .n1-row{ grid-template-columns:200px minmax(0,1fr); }
  #roles.n1-roles .n1-act{ grid-column:2; }
}
@media (max-width:640px){
  #roles.n1-roles .n1-row{ grid-template-columns:minmax(0,1fr); padding:12px 12px 16px; gap:14px; }
  #roles.n1-roles .n1-act{ grid-column:auto; }
  #roles.n1-roles .n1-go{ width:100%; justify-content:center; }
  #roles.n1-roles .n1-mid{ padding:0 4px; }
}

/* ---- why: four cards with cobalt plates ------------------------------------ */
#why.n1-why .n1-why-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
#why.n1-why .n1-w{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:20px; align-items:start;
  padding:26px 28px; border-radius:14px; background:#FFFFFF; border:1px solid #D6E0EE; }
#why.n1-why .n1-plate{ display:grid; place-items:center; width:60px; height:60px; border-radius:12px; background:#004594; color:#FFFFFF; }
#why.n1-why .n1-plate .ni{ width:28px; height:28px; stroke:#FFFFFF; }
#why.n1-why .n1-w-k{ margin:0; font-size:12px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:#0760C6; }
#why.n1-why .n1-w-t{ margin:6px 0 0; font-size:21px; line-height:1.25; font-weight:800; letter-spacing:-.015em; color:#0E1E35; }
#why.n1-why .n1-w-p{ margin:8px 0 0; font-size:16px; line-height:1.6; color:#34414F; }
@media (max-width:860px){ #why.n1-why .n1-why-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px){ #why.n1-why .n1-w{ grid-template-columns:minmax(0,1fr); gap:14px; padding:22px; } }

/* ---- the company: the homepage's Company Snapshot ------------------------- */
#company.n1-co .n1-co-card{ border:1px solid #C6D9F4; background:#FFFFFF; }
#company.n1-co .n1-co-tray{ display:flex; padding:14px 32px 0; background:#C6D9F4; }
#company.n1-co .n1-co-tab{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 22px; background:#FFFFFF;
  font-size:16px; font-weight:800; color:#0F1B3D; }
#company.n1-co .n1-co-tab .ni{ width:18px; height:18px; color:#004594; }
#company.n1-co .n1-co-in{ display:grid; grid-template-columns:minmax(260px, 400px) minmax(0,1fr); }
#company.n1-co .n1-co-ph{ margin:0; min-height:100%; background:#B98A57; }
#company.n1-co .n1-co-ph img{ display:block; width:100%; height:100%; min-height:420px; object-fit:cover; object-position:left center; }
#company.n1-co .n1-co-tx{ padding:clamp(24px, 3vw, 40px); }
#company.n1-co .n1-co-badge{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:8px 14px; background:#EEF4FC;
  font-size:12.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:#0F1B3D; }
#company.n1-co .n1-co-badge .ni{ width:16px; height:16px; }
#company.n1-co .n1-co-t{ margin:18px 0 0; font-size:clamp(26px, 2.3vw, 32px); line-height:1.15; font-weight:800; letter-spacing:-.03em; color:#0E1E35; }
#company.n1-co .n1-co-s{ margin:6px 0 0; font-size:clamp(19px, 1.6vw, 22px); font-weight:750; color:#0760C6; }
#company.n1-co .n1-co-p{ margin:14px 0 0; max-width:58ch; font-size:16px; line-height:1.6; color:#34414F; }
#company.n1-co .n1-co-dl{ margin:18px 0 0; background:#F3F7FC; }
#company.n1-co .n1-co-dl > div{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px; padding:13px 18px; border-bottom:1px solid #E3EAF4; }
#company.n1-co .n1-co-dl dt{ font-size:12px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:#505C6C; align-self:center; }
#company.n1-co .n1-co-dl dd{ margin:0; font-size:16px; font-weight:650; color:#0E1E35; overflow-wrap:anywhere; }
#company.n1-co .n1-co-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:18px; border:1px solid #D6E0EE; }
#company.n1-co .n1-co-tiles > div{ display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; padding:14px 16px; border-left:1px solid #D6E0EE; }
#company.n1-co .n1-co-tiles > div:first-child{ border-left:0; }
#company.n1-co .n1-plate.s{ grid-row:1 / span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:9px; background:#004594; }
#company.n1-co .n1-plate.s .ni{ width:20px; height:20px; stroke:#FFFFFF; }
#company.n1-co .n1-co-tiles b{ font-size:15px; font-weight:800; color:#0E1E35; }
#company.n1-co .n1-co-tiles span:not(.n1-plate){ font-size:14px; color:#505C6C; }
#company.n1-co .n1-co-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:22px; }
@media (max-width:980px){
  #company.n1-co .n1-co-in{ grid-template-columns:minmax(0,1fr); }
  #company.n1-co .n1-co-ph img{ min-height:0; height:230px; object-position:38% center; }
  #company.n1-co .n1-co-tiles{ grid-template-columns:minmax(0,1fr); }
  #company.n1-co .n1-co-tiles > div{ border-left:0; border-top:1px solid #D6E0EE; }
  #company.n1-co .n1-co-tiles > div:first-child{ border-top:0; }
}
@media (max-width:560px){
  #company.n1-co .n1-co-tray{ padding:10px 12px 0; }
  #company.n1-co .n1-co-dl > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
}

/* ---- the application: nine rows that open in turn -------------------------- */
#apply.n1-apply .n1-acc{ max-width:1000px; margin:0 auto; }
#apply.n1-apply .n1-for{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:12px; padding:16px 22px;
  border-radius:4px; background:#FFFFFF; border:1px solid #C6D9F4; font-size:14.5px; color:#505C6C;
}
#apply.n1-apply .n1-for b{ font-size:19px; font-weight:800; color:#0E1E35; }
#apply.n1-apply .n1-for b.is-empty{ font-size:16px; color:#6B7788; }
#apply.n1-apply .af{ background:none; border:0; border-radius:0; box-shadow:none; }
#apply.n1-apply .af-top{ padding:0 4px 12px; border:0; }
#apply.n1-apply .n1-item{ margin:0 0 8px; padding:0; border:0; border-radius:4px; background:#E2EAF5; transition:background-color .2s; }
#apply.n1-apply .n1-item.is-open{ background:#FFFFFF; box-shadow:0 0 0 1px #C6D9F4; }
#apply.n1-apply .n1-h{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:18px;
  width:100%; min-height:74px; margin:0; padding:14px 18px 14px 16px; border:0; background:none; cursor:pointer;
  font:inherit; text-align:left; color:#0E1E35;
}
#apply.n1-apply .n1-h:focus-visible{ outline:2px solid #1A73E8; outline-offset:-2px; }
#apply.n1-apply .n1-q{ display:grid; place-items:center; width:56px; height:40px; border-radius:4px; background:#FFFFFF; font-size:16px; font-weight:800; color:#0F1B3D; }
#apply.n1-apply .n1-item.is-open .n1-q{ background:#004594; color:#FFFFFF; }
#apply.n1-apply .n1-ht{ font-size:clamp(18px, 1.5vw, 21px); font-weight:800; letter-spacing:-.015em; }
#apply.n1-apply .n1-st{ font-size:13.5px; font-weight:750; color:#505C6C; white-space:nowrap; }
#apply.n1-apply .n1-st.is-req{ color:#0760C6; }
#apply.n1-apply .n1-st.is-done{ display:inline-flex; align-items:center; gap:6px; color:#1E7B3A; }
#apply.n1-apply .n1-st.is-done::before{ content:""; width:18px; height:18px; border-radius:50%;
  background:#1E8E3E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6 5.4-5.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
#apply.n1-apply .n1-b{ padding:4px clamp(16px, 2.6vw, 34px) 26px clamp(16px, 7vw, 90px); overflow:hidden; }
#apply.n1-apply .n1-b > .af-help{ margin:0; }
#apply.n1-apply .n1-b > .af-body{ margin-top:22px; }
#apply.n1-apply .n1-next-row{ display:flex; justify-content:flex-end; margin-top:26px; padding-top:18px; border-top:1px solid #E3E9F2; }
#apply.n1-apply .n1-next{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border:0; border-radius:6px; cursor:pointer;
  background:#0760C6; color:#FFFFFF; font:inherit; font-size:16px; font-weight:800;
}
#apply.n1-apply .n1-next:hover{ background:#004EA6; }
#apply.n1-apply .n1-next:focus-visible{ outline:2px solid #003F8A; outline-offset:3px; }
#apply.n1-apply .af-end{ margin-top:14px; border-radius:4px; background:#FFFFFF; box-shadow:0 0 0 1px #C6D9F4; }
#apply.n1-apply .af-done{ border-radius:4px; }
@media (max-width:640px){
  #apply.n1-apply .n1-h{ grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:12px; min-height:66px; }
  #apply.n1-apply .n1-st{ grid-column:2; grid-row:2; margin-top:-6px; }
  #apply.n1-apply .npm{ grid-column:3; grid-row:1 / span 2; }
  #apply.n1-apply .n1-q{ width:44px; height:38px; grid-row:1 / span 2; }
  #apply.n1-apply .n1-b{ padding:4px 14px 22px; }
  #apply.n1-apply .n1-next{ width:100%; justify-content:center; }
}

/* ---- FAQ: the homepage's question rows --------------------------------------- */
#faq.n1-faq .n1-faq-list{ max-width:1100px; margin:0 auto; }
#faq.n1-faq .n1-fq{ margin-bottom:8px; border-radius:4px; background:#E2EAF5; }
#faq.n1-faq .n1-fq.is-open{ background:#FFFFFF; box-shadow:0 0 0 1px #D6E0EE; }
#faq.n1-faq .n1-fq-h{ margin:0; font:inherit; }
#faq.n1-faq .n1-fq-h button{ display:flex; align-items:center; gap:20px; width:100%; min-height:72px; padding:14px 18px 14px 16px;
  border:0; background:none; cursor:pointer; font:inherit; text-align:left; color:#0E1E35; }
#faq.n1-faq .n1-fq-h button:focus-visible{ outline:2px solid #1A73E8; outline-offset:-2px; }
#faq.n1-faq .n1-fq-t{ flex:1; font-size:clamp(16.5px, 1.3vw, 19px); font-weight:750; letter-spacing:-.01em; }
#faq.n1-faq .n1-fq-a{ display:flex; gap:20px; padding:0 18px 24px 16px; }
#faq.n1-faq .n1-fq-a p{ margin:6px 0 0; max-width:70ch; font-size:16px; line-height:1.65; color:#34414F; }
@media (max-width:560px){
  #faq.n1-faq .n1-fq-h button{ gap:12px; }
  #faq.n1-faq .nq, #faq.n1-faq .na{ min-width:46px; width:46px; }
  #faq.n1-faq .n1-fq-a{ gap:12px; }
}

/* each row keeps its fieldset title for screen readers only — it must not
   take the row's width (careers.css gives .af-lg width:100%) */
#apply.n1-apply .af-lg.vh{ position:absolute; float:none; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }