:root{
    --bg:#F5F6F9;--surface:#fff;--ink:#1B2740;--muted:#5B6880;
    --line:#E6EAF1;--accent:#2E5E97;--navy:#253450;
    --oc:#273776;--oc2:#6996cf;--oc3:#adc3da;
    --font:'Gotham','Montserrat',Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.6}
  a{color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,44px)}
  .cwrap{max-width:900px;margin:0 auto;padding:0 28px}

  /* nav */

  /* navy hero */
  .phead{background:linear-gradient(160deg,#273a5a 0%,#223047 55%,#1d2a40 100%);color:#fff;position:relative;overflow:hidden}
  .phead::after{content:"";position:absolute;right:-6%;top:-40%;width:50%;height:190%;background:radial-gradient(closest-side,rgba(143,185,232,.16),transparent 70%);pointer-events:none}
  .phead .cwrap{position:relative;z-index:2;padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(42px,5vw,62px)}
  .phead .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:#8FB9E8;font-weight:700;margin:0 0 14px}
  .phead h1{font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0 0 16px;max-width:18ch;text-wrap:balance}
  .phead p{color:#C9D4E6;font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.55;margin:0;max-width:56ch}

  /* hire path */
  .hire{padding:clamp(48px,7vw,84px) 0 clamp(36px,5vw,56px)}
  .seyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;color:var(--accent);font-weight:700;margin:0 0 .9rem}
  .hire h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.025em;margin:0 0 1rem;line-height:1.08}
  .hire .intro{font-size:1.1rem;color:#38445c;margin:0;max-width:64ch}
  .brings{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
  .brings li{position:relative;padding-left:28px;font-size:1.02rem;color:#2d3a52;line-height:1.4;font-weight:500}
  .brings li::before{content:"";position:absolute;left:4px;top:3px;width:7px;height:12px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg)}
  .avail{margin:1.8rem 0 0;font-size:.98rem;color:var(--muted)}
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;transition:.2s;cursor:pointer}
  .btn.primary{background:var(--navy);color:#fff}
  .btn.primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
  .btn.ghost{border:1px solid #c9d2e2;color:var(--navy)}
  .btn.ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}

  /* divider */
  .div{max-width:900px;margin:0 auto;padding:0 28px}
  .div hr{border:0;border-top:1px solid var(--line);margin:0}

  /* partner path (Outermost Creative) */
  .partner{padding:clamp(40px,6vw,70px) 0 clamp(54px,8vw,92px)}
  .oc{background:linear-gradient(150deg,#2c3f80 0%,#243566 55%,#1d2a54 100%);color:#fff;border-radius:22px;
    padding:clamp(34px,5vw,56px);position:relative;overflow:hidden}
  .oc::after{content:"";position:absolute;right:-6%;top:-55%;width:42%;height:210%;background:radial-gradient(closest-side,rgba(173,195,218,.22),transparent 70%);pointer-events:none}
  .oc .inner{position:relative;z-index:2;max-width:62ch}
  .oc .eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;color:var(--oc3);font-weight:700;margin:0 0 .9rem}
  .oc h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin:0 0 1rem;color:#fff;line-height:1.08}
  .oc p{color:#d2dbf0;font-size:1.06rem;line-height:1.55;margin:0 0 24px}
  .ocbtn{display:inline-block;background:var(--oc2);color:#0e1c45;font-weight:700;font-size:.92rem;padding:14px 26px;border-radius:999px;text-decoration:none;transition:.2s}
  .ocbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}

  footer{background:var(--surface);border-top:1px solid var(--line)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:30px 28px;color:var(--muted);font-size:.9rem}
  footer a{color:var(--muted);text-decoration:none;margin-left:20px}
  footer a:hover{color:var(--ink)}

  @media(max-width:760px){
    .brings{grid-template-columns:1fr}
  }