/* =====================================================================
   SplitStep AI Consulting - site stylesheet
   Shared by / (homepage), /jobs/ (listings) and /jobs/<role>/ (detail).

   Filename is versioned (styles-v1.css) on purpose: the deploy token has
   zone (read) only and cannot purge Cloudflare's edge cache, so changing
   an asset's CONTENTS at the same path serves stale CSS for up to 4h.
   To change this file, copy it to styles-v2.css, edit that, and update
   the <link> in every page. Same convention as og-v3.png.
   ===================================================================== */

  :root {
    --ink: #0a0a0a;
    --paper: #ffffff;
    --line: #0a0a0a;
    --line-soft: #d4d4d4;
    --muted: #525252;
    --faint: #737373;
    --fill: #f4f4f4;
    --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --maxw: 1180px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  h1,h2,h3,h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }

  /* Scaffolding frame */
  .frame { max-width: var(--maxw); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .pad { padding: 0 28px; }
  @media (max-width:640px){ .pad{ padding:0 18px; } }

  .label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .rule { border-top: 1px solid var(--line); }
  .rule-soft { border-top: 1px solid var(--line-soft); }

  /* Header */
  header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 28px; }
  .word { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .02em; display:flex; align-items:center; gap:9px; }
  .word .sq { width: 13px; height: 13px; background: var(--ink); display:inline-block; }
  .nav nav { display: flex; gap: 26px; align-items: center; }
  .nav nav a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
  .nav nav a:hover { color: var(--ink); }
  .nav .cta { border: 1px solid var(--line); padding: 8px 14px; color: var(--ink); }
  .nav .cta:hover { background: var(--ink); color: var(--paper); }
  .menu-toggle { display: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: none; border: 1px solid var(--line); padding: 9px 14px; cursor: pointer; align-items: center; gap: 8px; }
  .menu-toggle::before { content: ""; width: 15px; height: 9px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); box-sizing: border-box; position: relative; }
  .menu-toggle[aria-expanded="true"]::before { border-bottom-color: transparent; }
  /* Full wordmark needs ~800px before it collides with the nav links */
  @media (max-width:800px){ .word .wmark { display: none; } }
  @media (max-width:720px){
    .menu-toggle { display: inline-flex; }
    .nav nav {
      position: absolute; top: 100%; left: 0; right: 0;
      display: none; flex-direction: column; gap: 0; align-items: stretch;
      background: var(--paper); border-bottom: 1px solid var(--line);
    }
    .nav nav.open { display: flex; }
    .nav nav a { padding: 16px 28px; font-size: 14px; border-top: 1px solid var(--line-soft); }
    .nav .cta { border: none; border-top: 1px solid var(--line); color: var(--ink); }
    .nav .cta:hover { background: var(--fill); color: var(--ink); }
  }

  /* Section header row */
  .sec-head { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 22px 28px; border-bottom: 1px solid var(--line); }
  .sec-head .idx { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing:.1em; }
  .sec-head h2 { font-size: clamp(24px, 4vw, 34px); }
  @media (max-width:640px){ .sec-head{ padding:18px; } }

  /* Hero */
  .hero { padding: 64px 28px 56px; }
  @media (max-width:640px){ .hero{ padding:40px 18px; } }
  .hero .label { margin-bottom: 22px; }
  .hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; max-width: 22ch; text-wrap: balance; }
  .hero p { font-size: clamp(16px, 2.1vw, 20px); color: var(--muted); max-width: 62ch; margin: 26px 0 0; }
  .hero p.promise { font-size: clamp(20px, 3.1vw, 32px); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; max-width: 24ch; margin: 20px 0 0; }
  .hero-cta { margin-top: 36px; }
  .cta-primary { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding: 18px 32px; border: 1px solid var(--ink); transition: background .15s; }
  .cta-primary:hover { background: #333; }
  .cta-note { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-top: 16px; letter-spacing: .02em; }
  @media (max-width:640px){
    .cta-primary { display: block; width: 100%; text-align: center; padding: 16px 14px; font-size: 13px; letter-spacing: .02em; }
    .cta-note { text-align: center; }
  }
  .hero-actions { margin-top: 34px; display: flex; gap: 0; border: 1px solid var(--line); width: fit-content; flex-wrap: wrap; }
  .hero-actions a { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 14px 22px; }
  .hero-actions a:first-child { background: var(--ink); color: var(--paper); }
  .hero-actions a:first-child:hover { background: #333; }
  .hero-actions a:last-child { border-left: 1px solid var(--line); }
  .hero-actions a:last-child:hover { background: var(--fill); }

  /* Client logo strip */
  .clients { border-bottom: 1px solid var(--line); }
  .clients .clabel { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 18px 28px; border-bottom: 1px solid var(--line); }
  .logo-row { display: grid; grid-template-columns: repeat(5, 1fr); }
  .logo-row .lcell { display: flex; align-items: center; justify-content: center; padding: 28px 18px; border-right: 1px solid var(--line); min-height: 100px; }
  .logo-row .lcell:last-child { border-right: none; }
  .logo-row img { max-height: 36px; max-width: 88%; width: auto; object-fit: contain; filter: brightness(0); opacity: .68; transition: opacity .15s; }
  .logo-row img.keepcolor { filter: none; opacity: .9; }
  .logo-row img.tall { max-height: 54px; }
  .logo-row img.fieldbridge { max-height: 54px; opacity: 1; }
  .logo-row .lcell:hover img { opacity: 1; }
  @media (max-width:760px){
    .logo-row { grid-template-columns: repeat(2,1fr); }
    .logo-row .lcell { border-bottom: 1px solid var(--line); }
    .logo-row .lcell:nth-child(2n){ border-right: none; }
    .logo-row .lcell:last-child{ grid-column: 1 / -1; border-bottom: none; }
  }

  /* Services grid */
  .svc { display: grid; grid-template-columns: repeat(2, 1fr); }
  .svc .cell { padding: 32px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .svc .cell:nth-child(2n){ border-right: none; }
  .svc .cell .n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
  .svc .cell h3 { font-size: 21px; margin: 14px 0 0; }
  .svc .cell p { color: var(--muted); margin: 10px 0 0; font-size: 15.5px; }
  @media (max-width:680px){ .svc{ grid-template-columns:1fr;} .svc .cell{ border-right:none; } }

  /* About */
  .about { display: grid; grid-template-columns: 260px 1fr; }
  @media (max-width:760px){ .about{ grid-template-columns:1fr; } }
  .about .photo { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--fill); display:flex; align-items:flex-end; justify-content:center; position:relative; overflow:hidden; }
  .about .photo img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
  .about .photo .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--faint); font-family:var(--mono); font-size:12px; text-align:center; padding:20px; }
  .about .bio { padding: 32px 28px; border-bottom: 1px solid var(--line); }
  @media (max-width:760px){ .about .photo{ border-right:none; aspect-ratio:5/4; } }
  .about .bio h3 { font-size: 24px; }
  .about .bio .role { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
  .about .bio p { color: var(--muted); margin: 16px 0 0; font-size: 16px; max-width: 64ch; }

  /* Case studies */
  .case { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
  .case:nth-child(even) .case-media { order: 2; border-left: 1px solid var(--line); border-right: none; }
  .case .case-media { border-right: 1px solid var(--line); background: var(--fill); min-height: 340px; position: relative; overflow: hidden; }
  .case .case-media img { width:100%; height:100%; object-fit: cover; position:absolute; inset:0; filter: grayscale(0.5) contrast(1.04); }
  .case .case-media img.raw { filter: grayscale(0.5) contrast(1.04); }
  .case .case-media.dark { background: #121b25; }
  .case .case-media.paper { background: #ffffff; }
  .case .case-media img.fit { object-fit: contain; }
  .case .case-media .tag { position:absolute; top:0; left:0; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing:.08em; padding: 6px 12px; text-transform: uppercase; z-index:2; }
  .case .case-body { padding: 32px 28px; }
  .case .case-body h3 { font-size: 23px; }
  .case .case-body .sub { font-family: var(--mono); font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing:.06em; margin-top: 6px; }
  .case .case-body p { color: var(--muted); margin: 16px 0 0; font-size: 15.5px; }
  .case .facts { margin: 22px 0 0; border-top: 1px solid var(--line-soft); }
  .case .facts .f { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
  .case .facts .f .v { font-family: var(--mono); font-weight: 700; font-size: 18px; }
  .case .facts .f .k { color: var(--muted); font-size: 14.5px; }
  @media (max-width:780px){ .case{ grid-template-columns:1fr; } .case .case-media{ border-right:none; border-bottom:1px solid var(--line); order:0 !important; } .case:nth-child(even) .case-media{ border-left:none; } }

  /* Contact */
  .contact { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width:760px){ .contact{ grid-template-columns:1fr; } }
  .contact .cinfo { padding: 32px 28px; border-right: 1px solid var(--line); }
  @media (max-width:760px){ .contact .cinfo{ border-right:none; border-bottom:1px solid var(--line); } }
  .contact .cinfo h2 { font-size: clamp(26px,4vw,38px); }
  .contact .cinfo p { color: var(--muted); margin-top: 16px; font-size: 16px; max-width: 46ch; }
  .contact .cinfo .ci { margin-top: 26px; }
  .contact .cinfo .ci div { font-family: var(--mono); font-size: 13px; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line-soft); }
  .contact form { padding: 32px 28px; }
  .field { margin-bottom: 16px; }
  .field label { display:block; font-family: var(--mono); font-size: 11.5px; letter-spacing:.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0;
    font-size: 15px; font-family: inherit; color: var(--ink); background: var(--paper);
  }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
  .field textarea { resize: vertical; min-height: 96px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap: 14px; }
  @media (max-width:460px){ .two{ grid-template-columns:1fr; } }
  form button { width: 100%; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  form button:hover { background:#333; }
  .form-note { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 12px; }
  .form-msg { display:none; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; border: 1px solid var(--line); }
  .form-msg.ok { display:block; background: var(--fill); }
  .form-msg.err { display:block; background: var(--fill); border-style: dashed; }

  footer { padding: 26px 28px; display:flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--faint); }
  footer a:hover { color: var(--ink); }

  .nav nav a[aria-current="page"] { color: var(--ink); }

  /* Open-roles list - one .job-row per open requisition */
  .job-row { display: grid; grid-template-columns: 210px 1fr; border-bottom: 1px solid var(--line); }
  .job-row .job-meta { border-right: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
  .job-row .job-meta .req { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
  .job-row .job-meta .m { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .job-row .job-body { padding: 28px; }
  .job-row .job-body h3 { font-size: 23px; }
  .job-row .job-body .sub { font-family: var(--mono); font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
  .job-row .job-body p { color: var(--muted); margin: 16px 0 0; font-size: 15.5px; max-width: 66ch; }
  @media (max-width:680px){
    .job-row { grid-template-columns: 1fr; }
    .job-row .job-meta { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 20px 18px; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
    .job-row .job-body { padding: 22px 18px; }
  }

  /* Empty state - shown when no requisitions are open */
  .no-roles { padding: 32px 28px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15.5px; }

  /* Posting header facts strip */
  .posting-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .posting-facts .pf { padding: 22px 28px; border-right: 1px solid var(--line); }
  .posting-facts .pf:last-child { border-right: none; }
  .posting-facts .pf .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .posting-facts .pf .v { font-family: var(--mono); font-weight: 700; font-size: 15px; margin-top: 8px; letter-spacing: -0.01em; }
  @media (max-width:860px){
    .posting-facts { grid-template-columns: repeat(2, 1fr); }
    .posting-facts .pf:nth-child(2n) { border-right: none; }
    .posting-facts .pf:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }
  @media (max-width:460px){
    .posting-facts { grid-template-columns: 1fr; }
    .posting-facts .pf { border-right: none; border-bottom: 1px solid var(--line); padding: 18px; }
    .posting-facts .pf:last-child { border-bottom: none; }
  }

  /* Posting prose */
  .posting { padding: 40px 28px 8px; max-width: 74ch; }
  @media (max-width:640px){ .posting{ padding: 28px 18px 4px; } }
  .posting h3 { font-size: 19px; margin: 40px 0 0; }
  .posting h3:first-child { margin-top: 0; }
  .posting h3 + p, .posting h3 + ul { margin-top: 14px; }
  .posting p { color: var(--muted); font-size: 16px; margin: 16px 0 0; }
  .posting p.lede { color: var(--ink); font-size: 17px; }
  .posting ul { list-style: none; margin: 16px 0 0; padding: 0; }
  .posting ul li { color: var(--muted); font-size: 16px; padding: 0 0 0 24px; margin-top: 12px; position: relative; }
  .posting ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--line); }
  .posting strong { color: var(--ink); font-weight: 700; }
  .posting .stack { margin: 16px 0 0; border-top: 1px solid var(--line-soft); }
  .posting .stack .s { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
  .posting .stack .s .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .posting .stack .s .v { color: var(--muted); font-size: 15.5px; }
  @media (max-width:520px){ .posting .stack .s { grid-template-columns: 1fr; gap: 4px; } }

  /* Apply block */
  .apply { margin: 40px 0 0; border-top: 1px solid var(--line); padding: 32px 28px 36px; }
  @media (max-width:640px){ .apply{ padding: 26px 18px 30px; } }
  .apply h3 { font-size: 22px; }
  .apply p { color: var(--muted); font-size: 16px; margin: 16px 0 0; max-width: 70ch; }
  .apply .subject { font-family: var(--mono); font-size: 13.5px; color: var(--ink); background: var(--fill); border: 1px solid var(--line-soft); padding: 3px 8px; white-space: nowrap; }
  .apply .cta-primary { margin-top: 26px; }
  .posting-foot { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 18px 28px; border-top: 1px solid var(--line); }
  @media (max-width:640px){ .posting-foot{ padding: 16px 18px; } }

  /* Breadcrumb - role detail pages */
  .crumb { padding: 16px 28px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
  .crumb a { color: var(--faint); }
  .crumb a:hover { color: var(--ink); }
  @media (max-width:640px){ .crumb{ padding: 14px 18px; } }

  /* Role hero sits tighter than the marketing hero */
  .role-hero { padding: 40px 28px 36px; }
  .role-hero h1 { font-size: clamp(28px, 4.6vw, 44px); max-width: 24ch; }
  .role-hero p { font-size: clamp(16px, 1.9vw, 18px); }
  @media (max-width:640px){ .role-hero{ padding: 28px 18px 26px; } }

  /* Linked role title in the listings rows */
  .job-row .job-body h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-soft); }
  .job-row .job-body h3 a:hover { text-decoration-color: var(--ink); }

  /* Listings page: rows follow the header directly, so the list carries
     the separating rule the removed .sec-head used to provide. */
  .roles-list { border-top: 1px solid var(--line); }

  /* Short pages (a listings page with few roles) would otherwise end the
     frame's side borders mid-viewport and strand the footer partway down
     the screen. Make the frame a full-height column and let the footer
     take up the slack, so it always sits at the bottom. Long pages are
     unaffected - there is no slack to take. 60px is the sticky header. */
  .frame { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
  .frame > footer { margin-top: auto; }