/* ============================================================
   CAREERS . careers.html . 2026-11-05
   Interim page until the designer's frame lands. No new design language: it rides the contact skin
   (data-skin="cnt", sept-cnt.css) for resets, tokens, buttons, nav chrome and reveals, and only adds
   the two folds below in the same units (1440 canvas, 80px insets, 48px card radius, #F4F3F0 surface,
   #D6D2C7 hairlines, 44/53 section type, 24/29 item type, #B75F00 links).
     fold 1  .car-hero   one surface card: the role, its facts, Apply by email. Fits 1440 x 900 with the nav.
     fold 2  .car-role   the full job ad inside one <details>, closed by default (in the DOM, so indexable).
   ============================================================ */

/* ---------- fold 1: the role card ---------- */
[data-skin="cnt"] #main .car-hero{padding:20px 80px 40px}
[data-skin="cnt"] #main .car-card{width:1280px;background:var(--surface);border-radius:48px;display:flex;align-items:center;gap:120px;padding:80px}
[data-skin="cnt"] #main .car-lead{width:520px;display:flex;flex-direction:column;gap:40px;flex-shrink:0}
[data-skin="cnt"] #main .car-lead h1{font-weight:500;font-size:52px;line-height:63px;color:var(--ink)}
[data-skin="cnt"] #main .car-lead p{font-size:16px;line-height:24px;color:var(--text-2)}
[data-skin="cnt"] #main .car-btn-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

[data-skin="cnt"] #main .car-facts{width:480px;flex-shrink:0}
[data-skin="cnt"] #main .car-facts dl{display:flex;flex-direction:column}
[data-skin="cnt"] #main .car-fact{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 0 23px;border-bottom:1px solid var(--border)}
[data-skin="cnt"] #main .car-fact:first-child{border-top:1px solid var(--border);padding-top:23px}
[data-skin="cnt"] #main .car-fact dt{font-size:16px;line-height:24px;color:var(--muted)}
[data-skin="cnt"] #main .car-fact dd{font-weight:500;font-size:24px;line-height:29px;color:var(--ink);text-align:right}
[data-skin="cnt"] #main .car-apply-note{margin-top:20px;font-size:16px;line-height:24px;color:var(--text-body)}
[data-skin="cnt"] #main .car-apply-note a{color:var(--link)}

/* ---------- fold 2: the full role, FAQ rhythm (hairline rows, heading left, body right) ---------- */
[data-skin="cnt"] #main .car-role{padding:0 160px 100px}
[data-skin="cnt"] #main .car-details{width:1120px}
[data-skin="cnt"] #main .car-details > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:32px 0 31px;border-bottom:1px solid var(--border);font-weight:500;font-size:24px;line-height:29px;color:var(--ink)}
[data-skin="cnt"] #main .car-details > summary::-webkit-details-marker{display:none}
[data-skin="cnt"] #main .car-details > summary:focus-visible{outline:2px solid var(--brand-orange);outline-offset:4px;border-radius:4px}
[data-skin="cnt"] #main .car-plus{position:relative;width:20px;height:20px;flex-shrink:0}
[data-skin="cnt"] #main .car-plus::before,[data-skin="cnt"] #main .car-plus::after{content:"";position:absolute;left:0;top:9.5px;width:20px;height:1px;background:var(--ink);transition:transform .2s cubic-bezier(.25,1,.5,1)}
[data-skin="cnt"] #main .car-plus::after{transform:rotate(90deg)}
[data-skin="cnt"] #main .car-details[open] .car-plus::after{transform:rotate(0)}

[data-skin="cnt"] #main .car-block{display:flex;gap:80px;padding:40px 0 39px;border-bottom:1px solid var(--border)}
[data-skin="cnt"] #main .car-block > h2{width:320px;flex-shrink:0;font-weight:500;font-size:28px;line-height:34px;color:var(--ink)}
[data-skin="cnt"] #main .car-body{width:720px;display:flex;flex-direction:column;gap:16px}
[data-skin="cnt"] #main .car-body h3{font-weight:500;font-size:20px;line-height:24px;color:var(--ink);margin-top:8px}
[data-skin="cnt"] #main .car-body h3:first-child{margin-top:0}
[data-skin="cnt"] #main .car-body p,[data-skin="cnt"] #main .car-body li{font-size:16px;line-height:24px;color:var(--text-body)}
[data-skin="cnt"] #main .car-body ul{display:flex;flex-direction:column;gap:8px}
[data-skin="cnt"] #main .car-body li{position:relative;padding-left:20px}
[data-skin="cnt"] #main .car-body li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--muted)}
[data-skin="cnt"] #main .car-body .car-btn-row{margin-top:16px}

/* ---------- reveals: the cnt family, same ranges ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    [data-skin="cnt"] #main .car-card{animation:cnt-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="cnt"] #main .car-details{animation:cnt-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
  }
}
@media (prefers-reduced-motion: reduce){[data-skin="cnt"] #main .car-plus::before,[data-skin="cnt"] #main .car-plus::after{transition:none}}

/* ---------- below 1300: the fixed canvas relaxes, same breakpoint as sept-cnt.css ---------- */
@media (max-width:1299.98px){
  [data-skin="cnt"] #main .car-hero{padding:20px 40px 40px}
  [data-skin="cnt"] #main .car-card{width:100%;gap:60px;padding:60px}
  [data-skin="cnt"] #main .car-lead,[data-skin="cnt"] #main .car-facts{width:auto;flex:1 1 0;min-width:0}
  [data-skin="cnt"] #main .car-role{padding:0 40px 80px}
  [data-skin="cnt"] #main .car-details{width:100%}
  [data-skin="cnt"] #main .car-block > h2{width:280px}
  [data-skin="cnt"] #main .car-body{width:auto;flex:1 1 0;min-width:0}
}

/* ---------- phone: no mobile comp exists for careers, so the legacy body shows under the island chrome; stack it ---------- */
@media (max-width:760px){
  [data-skin="cnt"] #main .car-hero{padding:16px 16px 24px}
  [data-skin="cnt"] #main .car-card{flex-direction:column;align-items:stretch;gap:40px;padding:36px 24px;border-radius:32px}
  [data-skin="cnt"] #main .car-lead h1{font-size:36px;line-height:44px}
  [data-skin="cnt"] #main .car-btn-row .cnt-btn{flex:1 1 100%}
  [data-skin="cnt"] #main .car-fact dd{font-size:20px;line-height:24px}
  [data-skin="cnt"] #main .car-role{padding:0 16px 60px}
  [data-skin="cnt"] #main .car-details > summary{font-size:20px;line-height:24px}
  [data-skin="cnt"] #main .car-block{flex-direction:column;gap:16px}
  [data-skin="cnt"] #main .car-block > h2{width:auto;font-size:24px;line-height:29px}
}