@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

  :root{
    --ink: #0B1220;
    --ink-2: #111B2E;
    --paper: #F3F1EA;
    --brass: #4A7FE8;
    --brass-dim: #2A4A8F;
    --slate: #8A93A6;
    --line: rgba(243,241,234,0.14);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    overflow-x:hidden;
  }

  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }

  ::selection{ background:var(--brass); color:var(--ink); }

  a{ color:inherit; }

  /* subtle vignette + grain-like gradient */
  .backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    background:
      radial-gradient(1200px 600px at 82% -10%, rgba(74,127,232,0.10), transparent 60%),
      radial-gradient(900px 500px at 10% 110%, rgba(74,127,232,0.06), transparent 60%),
      var(--ink);
  }

  .wrap{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
  }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 2.4rem clamp(1.5rem, 5vw, 4rem) 0;
  }

  .wordmark{
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .wordmark img{
    height:42px;
    width:auto;
    display:block;
  }
  .wordmark .tagline{
    font-family:'Inter', sans-serif;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--slate);
    border-left:1px solid var(--line);
    padding-left:0.7rem;
  }
  .wordmark .tagline b{ color:var(--brass); font-weight:600; }

  .status-pill{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--slate);
    border:1px solid var(--line);
    padding:0.45rem 0.9rem;
    border-radius:999px;
  }
  .status-pill .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--brass);
    box-shadow:0 0 0 3px rgba(74,127,232,0.18);
  }

  main{
    flex:1;
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items:center;
    gap:2rem;
    padding: 2rem clamp(1.5rem, 5vw, 4rem) 3rem;
    max-width:1320px;
    margin:0 auto;
    width:100%;
  }

  .copy{ max-width:640px; }

  .eyebrow{
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--brass);
    margin-bottom:1.4rem;
    display:block;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(2.4rem, 5.2vw, 4.1rem);
    line-height:1.05;
    letter-spacing:-0.01em;
    margin-bottom:1.5rem;
  }
  h1 em{
    font-style:italic;
    font-weight:300;
    color:var(--brass);
  }

  .lede{
    font-size:1.05rem;
    line-height:1.65;
    color:#C9CEDA;
    max-width:480px;
    margin-bottom:2.4rem;
  }

  form.notify{
    display:flex;
    gap:0.6rem;
    max-width:440px;
    margin-bottom:1rem;
  }

  form.notify input[type="email"]{
    flex:1;
    background:transparent;
    border:1px solid var(--line);
    border-radius:8px;
    padding:0.85rem 1rem;
    color:var(--paper);
    font-family:'Inter', sans-serif;
    font-size:0.92rem;
    outline:none;
    transition:border-color 0.2s ease;
  }
  form.notify input[type="email"]::placeholder{ color:#5D6577; }
  form.notify input[type="email"]:focus{ border-color:var(--brass); }
  form.notify input[type="email"]:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:2px;
  }

  form.notify button{
    background:var(--brass);
    color:var(--ink);
    border:none;
    border-radius:8px;
    padding:0.85rem 1.4rem;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:0.92rem;
    cursor:pointer;
    white-space:nowrap;
    transition:filter 0.2s ease, transform 0.15s ease;
  }
  form.notify button:hover{ filter:brightness(1.08); }
  form.notify button:active{ transform:scale(0.98); }
  form.notify button:focus-visible{
    outline:2px solid var(--paper);
    outline-offset:2px;
  }

  .form-note{
    font-size:0.8rem;
    color:var(--slate);
  }
  .form-note.success{ color:var(--brass); }

  /* signature: converging vertex diagram */
  .signature{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }
  .signature svg{ width:100%; max-width:460px; height:auto; }

  .node-line{
    stroke:var(--line);
    stroke-width:1;
    fill:none;
  }
  .node-line.active{
    stroke:var(--brass-dim);
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw 1.8s ease forwards;
  }
  .node-dot{ fill:var(--slate); }
  .node-dot.peak{ fill:var(--brass); }

  @keyframes draw{
    to{ stroke-dashoffset:0; }
  }

  .caption{
    position:absolute;
    bottom:-2.2rem;
    left:50%;
    transform:translateX(-50%);
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--slate);
    white-space:nowrap;
  }

  /* services section */
  .services{
    position:relative;
    z-index:1;
    max-width:1320px;
    margin:0 auto;
    width:100%;
    padding: 0.5rem clamp(1.5rem, 5vw, 4rem) 3.5rem;
    border-top:1px solid var(--line);
    padding-top:3rem;
  }

  .services-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2.2rem;
  }

  .services-head h2{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(1.5rem, 2.6vw, 2rem);
  }

  .services-head p{
    color:var(--slate);
    font-size:0.92rem;
    max-width:340px;
  }

  .service-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
  }

  .service-card{
    background:var(--ink);
    padding:1.8rem 1.5rem;
    transition:background 0.25s ease;
  }
  .service-card:hover{ background:var(--ink-2); }

  .service-card .mark{
    color:var(--brass);
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:block;
    margin-bottom:0.9rem;
  }

  .service-card h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:1.08rem;
    margin-bottom:0.6rem;
    line-height:1.3;
  }

  .service-card p{
    font-size:0.86rem;
    color:#B7BECC;
    line-height:1.55;
  }

  @media (max-width: 860px){
    .service-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 540px){
    .service-grid{ grid-template-columns:1fr; }
  }

  /* job seeker CTA band */
  .jobs-band{
    position:relative;
    z-index:1;
    max-width:1320px;
    margin:0 auto;
    width:100%;
    padding: 0 clamp(1.5rem, 5vw, 4rem) 3.5rem;
  }

  .jobs-card{
    background: linear-gradient(135deg, rgba(74,127,232,0.14), rgba(74,127,232,0.03));
    border:1px solid rgba(74,127,232,0.3);
    border-radius:16px;
    padding: 2.2rem clamp(1.5rem, 4vw, 3rem);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1.5rem;
  }

  .jobs-card .text .eyebrow{ margin-bottom:0.6rem; }

  .jobs-card h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(1.3rem, 2.4vw, 1.7rem);
    margin-bottom:0.5rem;
  }

  .jobs-card p{
    color:#C9CEDA;
    font-size:0.95rem;
    max-width:460px;
  }

  .jobs-actions{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    align-items:flex-start;
  }

  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:var(--brass);
    color:var(--ink);
    text-decoration:none;
    font-weight:600;
    font-size:0.92rem;
    padding:0.85rem 1.5rem;
    border-radius:8px;
    transition:filter 0.2s ease, transform 0.15s ease;
  }
  .btn-primary:hover{ filter:brightness(1.08); }
  .btn-primary:active{ transform:scale(0.98); }
  .btn-primary:focus-visible{
    outline:2px solid var(--paper);
    outline-offset:2px;
  }

  .btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    color:var(--paper);
    text-decoration:none;
    font-size:0.88rem;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .btn-secondary:hover{ color:var(--brass); border-color:var(--brass); }

  footer{
    position:relative;
    z-index:1;
    border-top:1px solid var(--line);
    padding: 1.4rem clamp(1.5rem, 5vw, 4rem);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.82rem;
    color:var(--slate);
  }

  footer .contact a{
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  footer .contact a:hover{
    color:var(--paper);
    border-color:var(--brass);
  }

  footer .socials{
    display:flex;
    gap:1.4rem;
  }
  footer .socials a{
    text-decoration:none;
    color:var(--slate);
    font-size:0.82rem;
    transition:color 0.2s ease;
  }
  footer .socials a:hover{ color:var(--brass); }

  @media (max-width: 640px){
    .wordmark .tagline{ display:none; }
    header{ flex-wrap:wrap; gap:0.8rem; }
  }

  @media (max-width: 860px){
    main{
      grid-template-columns:1fr;
      padding-top:1rem;
    }
    .signature{
      order:-1;
      height:auto;
      padding:1.5rem 0 2.5rem;
    }
    .signature svg{ max-width:280px; }
    .caption{ display:none; }
    .copy{ max-width:100%; }
    form.notify{ flex-direction:column; }
    form.notify button{ width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .node-line.active{
      animation:none;
      stroke-dashoffset:0;
    }
  }